Browser Console
Die Browser Console lässt sich unter Chrome mit dem Shortcut STRG + SHIFT + J oder Rechtsklick -> Untersuchen öffnen.
Elements
Im Elements Tab kann man den HTML Quellcode inklusive CSS einsehen.
Mit Inspect Element findet man schnell den auf der Website markierten Part im Quellcode. Das kann nützlich sein, um schnell an einen X-PATH für beispielsweise Selenium o.ä. zu kommen. Hiermit können auch leicht nicht persistente Änderungen an der Website vorgenommen werden. Man könnte somit zum Beispiel sein Online Banking aufrufen, mit Inspect Element den Kontostand im Quellcode finden, diesen dort auf 1 Mio. € hochstellen und so seine Kollegen auf den Arm nehmen.
Die Device Toolbar ist nützlich um eine Website auf responsiveness zu testen. Man kann zwischen bereits eingetragenen Vorlagen (z.B. Screenresolution von iPhone X) oder eine eigene Auflösung nutzen um sich anzeigen zu lassen wie eine Website sich bei verschiedenen Auflösungen verhält.
Console
Sources
Über den Sources Tab werden die von der Website geladenen Dateien mit der Ordnderstruktur dargestellt. Zu finden sind hier unter anderem css files, Bilder, javascript files und fonts.
Network
Im Network Tab werden alle Dateien die geladen werden oder werden sollen aufgezeigt. Hier sieht man viele nützliche Informationen wie den HTTP Statuscode, die Ladezeiten und die Größe der Datei.
Security
Über den Security Tab lassen sich SSL/TLS Zertifikate der Website und des Remote Contents einsehen.
Lighthouse
Ligthouse analysiert die Webpage und zeigt Möglichkeiten zur Verbesserung auf.
