028 Entwickler Werkzeuge im Webbrowser | Narzędzia deweloperskie w przeglądarce



Możesz też posłuchać na:





DE

PL

Einführung

Wstęp

Heutige Folge ist den Entwickler Werkzeuge, die man in Webbrowser finden kann, gewidmet. Ich werde dir erzählen was man mit ihnen machen kann und wozu sie nutzbar sind. Wenn du einen Webbrowser Täglich nutzt es ist gut sie zu kennen, weil sie im am wenigsten erwarteten Moment nützlich sein können. Ich werde ein Beispiel von eine Schülerin geben, die ihre Kenntnisse von Entwickler Werkzeuge im Online-Unterricht gut ausgenutzt hat.
also loss damit.

Dzisiejszy odcinek jest poświęcony narzędziom programistycznym jakie można znaleźć w przeglądarce. Opowiem ci co można dzięki nim zrobić do czego się one przydają. Jeśli korzystasz z przeglądarki na co dzień to warto wiedzieć je znać, bo mogą się przydać w najmniej oczekiwanej chwili. Z resztą podam przykład uczennicy, której znajomość narzędzie deweloperskich przydała się w lekcjach onlne.

Was für Entwickler Werkzeuge gibt es und was kann man mit ihnen machen

Jakie narzędzia porgramistyczne są dostępne i co można z nimi zrobić

Webbrowser ist ein Wort wie Internetbrowser. Beide Wörter sind Synonyme und bedeuten, wie Du wahrscheinlich vermutet, przeglądarka internetowa. Was kann man mit Entwickler Werkzeuge im Internetbrowser machen? Und vor allem wie schaltet man sie ein? Ich Werde auf Google Chrome basieren während diese Folge.

Um sie einzuschalten muss man die F12 Taste betätigen. Oben befindet sich die Symbolleiste und die Reiterleiste. Ich werde nicht alle vorhandene Reiter beschprechen. Vor Allem weil es viel Zeit in anspruch nahmen wurde. Und zweitens ich bin kein Frontend Entwickler und persönlich habe ich nicht alle Reiter benutzt :-). Sowieso denke ich, dass die über ich dir heute erzählen werde sind die populärsten.

Element Reiter

Zuerst ist der Reiter Elements. Dort sieht man den HTML der dahinter steht. Dieser Reiter ist sehr hilfreich wenn man untersuchen will was hinter das was auf die Seite ist steht. Eigentlich der Reiter besteht aus 2 Teilen: in ersten ist der HTML (das was sich zurzeit in den DOM, also Document Object Model, befindet). In den zweiten Teil sind weitere Informationen über den Element der hervorgehoben ist, z.B.: Styles oder Eigenschaften (Properties). Ich Persönlich nutze diesen Reiter um zu Locatoren finden für bestimmte Elemente auf der Seite, damit der automatische Test weiss was er auf der Seite finden muss.
Aber letztens habe ich eine sehr interessante Verwendung von diesen Reiter gehört. Wegen Coronavirus die Kinder in Polen lernen von Zuhause, die kommunizieren sich mit den Lehrer per Zoom oder andere kommunikatoren. Ab und zu haben sie Prüfungen per Internet. Eine Schülerin hat ihren Test mit hilfe der Webbrowser Entwickler Werkzeuge untersucht. Es war ein Test wo man musste die richtige Antwort wählen und sie stellte fest, dass alle korrekte Antworte eine Flag = True haben. Dadurch hatte sie alle Antworten richtig. Also wie du siehst es lohnt sich diesen Reiter zu kennen :-).

Console Reiter

Nächte Reiter heisst Console. Hier kann man vor allem skripte in JavaScript schreiben. Wenn ich automatische Tests schreibe manchmal, um einen kleinen Teil des Testskript zu prüfen ob er wirklich wirkt, schreibe ich ihn in der Console und dann führe ich ihn aus. Auf diese weise muss ich nicht den ganzen Testskript ausführen, und ich weiss schnell ob es wirkt wie erwartet. Eine andere Sache die man in der Console machen kann ist Xpath zu prüfen. Xpath ist eine art wie man ein Element auf der Seite finden kann. Der vorteil von Xpath ist, dass es sehr universal ist, der nachteil, dass es manchmal sehr komplex werden kann. Und da kommt die Console zu hilfe. Du kannst dort den Xpath schreien und schauen was er findet, ob es wirklich das ist was du erwartet hast.

Netzwerk Reiter

Der letzte Reiter über den ich dir heute sagen will ist Network, also Netzwerk auf Altdeutsch ;-). Hier findest du alles was dein Rechner den Server fragt und alle Antworte von den serwer. Du kannst prüfen wie viel Zeit verschiedene Elemente brauchen um sich auf die Seite zu laden. Dort findest du auch den Status der Antwort von den Server. Also 200 alles ist OK, 300 ist eine Umleitung (also Redirect), 400 sind Fehler von den Client Seite (also von deinen Rechner) und 500 sind die Server Fehler.

Die Symbolleiste

Das letzte was ich dir sagen will ist die Symbolleiste, die sich vor der Reiterleiste befindet. In Google Chrome sind dort nur 2 Werkzeuge. Das Erste ist das Inspektionwerkzeug. Wenn man es wählt und auf irgendwas auf der Seite klickst, dann wird sich der Element in den Elementreiter öffnen und du kannst ihn weiter untersuchen, z.B. was für Eigenschaften er hat, oder ob es eine Flag=True hat und damit die richtige Antwort in einem Test ist :-).
Das andere Tool ermöglicht die Seite wie auf den Smartphon zu öffnen. Es ist nützlich wenn du ein Foto auf Instagram aus deinen Rechner hochladen willst. Du hast z.B. das Foto auf deinen Rechner bearbeitet und jetzt willst du es auf Instagram hochladen. Du gehst auf Instagram Seite und da kommt die schreckliche Entdeckung, dass es keine möglichkeit gibt das Bild hochzuladen. Aber hier zu hilfe kommen die Entwickler Werkzeuge und das zweite Werkzeug auf der Symbolleiste. Wenn du es klickst und die Seite aktualisierst wird sie wie die Anwendung für Smartphones aussehen und jetzt kannst du problemloss das Bild von deinen Rechner hochladen und sich damit vor deinen Bekannten prallen.

Webbrowser tak jak Internetbrowser są synonimami i jak zapewne się domyślasz, oznaczają przeglądarkę internetową. Co można zrobić z narzędziami programistycznymi w przeglądarce zrobić? I przede wszystkim jak się je włącza? W trakcie tego odcinka będę bazował na Google Chrome.

Aby je włączyć trzeba nacisnąć klawisz F12. Na górze znajduje się pasek narzędzi i pasek zakładek. Nie będę omawiał każdej zakładki. Przede wszystkim dlatego, że zajęłoby to za dużo czasu. Po drugie nie jestem frontend developerem i nie używałem każdej z zakładek :-). Tak czy inaczej uważam, że te o których czy dzisiaj opowiem są najpopularniejsze.

Elementy

Pierwszą zakładką są Elementy. Jest w niej widoczny HTML, który stoi za stroną. Ta zakładka jest bardzo pomocna kiedy chce się sprawdzić co stoi za tym co widać na stronie. Właściwie zakładka składa się z 2 części: w pierwszej jest HTML (czyli to co w danym momencie jest w DOMie - Document Object Modelu). W drugiej części są dalsze informacje o podświetlonym elemencie HTMLa, n.p.: style lub właściwości. Osobiście używam tej zakładki aby znaleźć lokatory dla konkretnych elementów na stronie, aby testy automatyczne wiedziały co muszą na stronie znaleźć.
Ostatnio słyszałem o bardzo ciekawym wykorzystaniu tej zakładki. Z powodu koronawirusa dzieci w Polsce uczą się zdalnie, jak zapewne wiesz, i kontaktują się z nauczycielem przez Zooma lub inny komunikator. Od czasu do czasu mają też sprawdziany przez Internet. Pewna uczennica zbadała sprawdzian używając narzędzi deweloperskich. Był to test gdzie trzeba było wybrać poprawną odpowiedź i okazało się, że poprawne odpowiedzi mają flagę=true. Dzięki temu poprawnie odpowiedziała poprawnie na wszystkie pytania. Także opłaca się znać tą zakładkę :-)

Konsola

Kolejna zakładka nazywa się konsolą. W niej można przede wszystkim pisać kod w JavaScripcie. Gdy piszę testy automatyczne czasem, aby sprawdzić mały kawałek kodu czy rzeczywiście działa, piszę do w konsoli i wywołuję go w niej. W ten sposób nie muszę wywoływać całego testu i wiem czy dany fragment działa tak jak powinien. Inną rzeczą, którą można zrobić w konsoli jest sprawdzenie Xpatha. Xpath jest sposobem na znalezienie elementu na stronie. Zaletą Xpatha jest jego uniwersalność, wadą że czasem może zrobić się dość skomplikowany. W tym właśnie pomaga konsola. Można w niej napisać Xpatha i zobaczyć co znajdzie, czy to na pewno to czego oczekiwałeś.

Sieć

Ostatnią zakładką, o której chcę ci dzisiaj powiedzieć to jest Sieć. Tu znajdziesz wszystko o co komputer pyta serwer i wszystkie odpowiedzi. Możesz sprawdzić jak długo ładują się różne elementy strony. Znajdziesz tam również statusy odpowiedzi od serwera. Czyli 200, że wszystko jest OK, 300 to przekierowania, 400 błędy po stronie klienta (czyli twojego komputera) i 500 to błędy serwera.

Pasek narzędzi

Ostatnią rzeczą, o której chcę ci powiedzieć to pasek narzędzi, znajdujący się przed paskiem zakładek. W Google Chrome są tam tylko 2 narzędzia. Pierwszy to narzędzie inspekcji. Gdy to wybierzesz i klikniesz na coś na stronie, to otworzy się ten element z zakładce z elementami i możesz go “zbadać”, np. sprawdzić właściwości lub czy flaga=true przez co wiesz, że to poprawna odpowiedź w teście :-).
Drugie narzędzie umożliwia ci otwarcie strony tak jak wyglądałaby ona na ekranie smartphona. Jest przydatne gdy chcesz załadować zdjęcie wprost z komputera na Instagrama. Np. edytowałeś zdjęcie na swoim komputerze i teraz chcesz je wrzucić na Instagrama. Otwierasz stronę Instagrama i następuje przerażające odkrycie, że nie ma żadnej możliwości załadowania zdjęcia. Tu z pomocą przychodzą narzędzie deweloperskie, a właściwie drugie narzędzie z paska narzędziowego. Gdy je włączysz i odświeżysz stronę będzie ona wyglądała jak aplikacja na smartfonie i teraz bez problemu możesz wrzucić zdjęcie z komputera i pochwalić się nim przed znajomymi.

Zusammenfassung

Podsumowanie

Danke, dass du zugehört hast. Wie immer hoffe ich dass der Inhalt dieser Folge nützlich für dich war. Wenn dir etwas zu diesem Thema fehlte sag es mir Bescheid, entweder in den Kommentaren unten den Artikel, oder per Mail niemieckidlait@gmail.com. Es gibt noch die Seite www.niemieckidlait.mn.co es ist wie eine Facebookgruppe aber auserhalb Facebook, also nicht lenkt dich ab. Du kannst auch da sich mit mir in Kontakt setzen. Wenn du auch allgemeine Fragen hast, die nicht mit eine bestimmte Folge verbunden sind, kannst du sie dort stellen. Mit laufe der Zeit, wird die Gemeinschaft auf der Seite großer und werdet ihr sich gegenseitig helfen. Das hoffe ich auf jeden Fall.

Dzięki że wysłuchałeś do końca. Jak zwykle mam nadzieję, że zawartość tego odcinka będzie dla ciebie przydatna. Jeśli czegoś ci brakowało w tym temacie to daj mi znać albo przez komentarz pod artykułem lub przez maila niemieckidlait@gmail.com. Jest też strona www.niemieckidlait.mn.co jest to jakie coś jak grupa na Facebooku tylko poza Facebookiem, więc nic cię nie rozprasza. Możesz się ze mną skontaktować również za jej pośrednictwem. Jeśli masz jakieś ogólne pytania nie związane z żadnym z odcinków możesz mi je tam zadać. Z czasem gdy społeczność się powiększy będziecie mogli sobie pomagać nawzajem. Na pewno liczę na to, że tak to będzie.
Przypominam o akcji, ze wszystkie pieniądze jakie do końca roku dostanę za pośrednicwem buymeacoffe.com wpłacę na rzecz UNICEF Polska. Na stronie www.niemieckidlait.mn.co będzie artykuł poświęcony tej zbiórce z podsumowaniem miesięcznym aby zachować transparentność. Dziękuję jeszcze raz i zapraszam już dziś na kolejny odcinek.



Danke alles gute und bleib gesund.

Komentarze