So verwenden Sie die Web Browser Developer Tools

Neben den meisten Browserherstellern, die sich auf den alltäglichen Benutzer konzentrieren, der im Internet surfen möchte, richten sie sich auch an Webentwickler, Designer und Experten für Qualitätssicherung, die bei der Erstellung der Apps und Websites, auf die diese Benutzer zugreifen, durch die Integration leistungsfähiger Tools direkt in die Browser helfen sich.

Vorbei sind die Zeiten, in denen Sie mit den einzigen Programmier- und Testwerkzeugen in einem Browser den Quellcode einer Seite anzeigen konnten und nichts weiter. Mit den heutigen Browsern können Sie viel tiefer eintauchen, indem Sie beispielsweise JavaScript-Snippets ausführen und debuggen, DOM-Elemente prüfen und bearbeiten, den Netzwerkverkehr in Echtzeit überwachen, während Ihre App oder Seite geladen wird, um Engpässe zu erkennen, die CSS-Leistung analysieren und sicherstellen, dass Ihr Code korrekt ist nicht zu viel Speicher oder zu viele CPU-Zyklen und vieles mehr. Aus der Testperspektive können Sie die Wiedergabe einer App oder einer Webseite in verschiedenen Browsern sowie auf verschiedenen Geräten und Plattformen mithilfe des Responsive Designs und der integrierten Simulatoren reproduzieren. Das Beste ist, dass Sie all dies tun können, ohne Ihren Browser verlassen zu müssen!

In den folgenden Tutorials erfahren Sie, wie Sie in verschiedenen gängigen Webbrowsern auf diese Entwicklertools zugreifen.

Google Chrome

Mit den Entwicklertools von Chrome können Sie Code bearbeiten und debuggen, einzelne Komponenten prüfen, um Leistungsprobleme aufzudecken, verschiedene Gerätebildschirme zu simulieren, einschließlich derjenigen, die Android oder iOS ausführen, und verschiedene andere nützliche Funktionen ausführen.

1. Klicken Sie auf die Hauptmenü-Schaltfläche von Chrome, die mit drei horizontalen Linien markiert ist und sich in der oberen rechten Ecke des Browsers befindet.
2. Wenn das Dropdown-Menü angezeigt wird, bewegen Sie den Mauszeiger über das Symbol Mehr Werkzeuge Möglichkeit.
3. Jetzt sollte ein Untermenü angezeigt werden. Wählen Sie die Option mit der Bezeichnung Entwicklerwerkzeuge . Sie können anstelle dieses Menüelements auch die folgende Tastenkombination verwenden: Chrome OS / Windows ( STRG + UMSCHALT + I ), Mac OS X ( ALT (OPTION) + BEFEHLSTASTE + I )
4. Die Benutzeroberfläche der Chrome-Entwicklertools sollte nun wie in diesem Beispiel-Screenshot gezeigt angezeigt werden. Abhängig von Ihrer Chrome-Version kann das anfängliche Layout, das Sie sehen, leicht von dem hier dargestellten abweichen. Der Hauptknoten der Entwickler-Tools, der sich normalerweise auf der unteren oder rechten Seite des Bildschirms befindet, enthält die folgenden Registerkarten.Elemente: Bietet die Möglichkeit, CSS- und HTML-Code zu überprüfen und CSS direkt zu bearbeiten, um die Auswirkungen Ihrer Änderungen in Echtzeit zu sehen.Konsole: Die JavaScript-Konsole von Chrome ermöglicht die direkte Eingabe von Befehlen sowie das Diagnose-Debugging.Quellen: Ermöglicht das Debuggen von JavaScript-Code über eine leistungsstarke grafische Benutzeroberfläche.Netzwerk: Kategorisiert und zeigt detaillierte Informationen zu allen zugehörigen Vorgängen in der aktiven Anwendung oder Seite an, einschließlich vollständiger Anforderungs- und Antwortheader sowie erweiterter Timing-Metriken.Zeitleiste: Ermöglicht eine detaillierte Analyse aller Aktivitäten, die innerhalb des Browsers stattfinden, sobald eine Anforderung zum Laden einer Seite oder App ausgelöst wird.
5. Zusätzlich zu diesen Abschnitten können Sie auf folgende Tools zugreifen >> Symbol, rechts neben dem Symbol Zeitleiste Tab.Profil: Aufgeschlüsselt in CPU-Profiler und Heap-Profiler In den folgenden Abschnitten finden Sie umfassende Speichernutzung und allgemeine Ausführungszeit der aktiven Anwendung oder Seite.Sicherheit: Hebt Zertifikatprobleme und andere sicherheitsbezogene Probleme mit der aktiven Seite oder Anwendung hervor.Ressourcen: Hier können Sie Cookies, lokalen Speicher, App-Cache und andere lokale Datenquellen überprüfen, die von der aktuellen Webseite oder Anwendung verwendet werden.Audits: Bietet Möglichkeiten, die Ladezeit einer Seite oder Anwendung und die allgemeine Leistung zu optimieren.
6. Gerätemodus ermöglicht das Anzeigen der aktiven Seite in einem Simulator, der sie fast genau so wiedergibt, wie sie auf einem von über einem Dutzend Geräten erscheinen würde, einschließlich mehrerer bekannter Android- und iOS-Modelle wie iPad, iPhone und Samsung Galaxy. Sie haben auch die Möglichkeit, benutzerdefinierte Bildschirmauflösungen für Ihre speziellen Entwicklungs- oder Testanforderungen zu emulieren. Umschalten Gerätemodus Wählen Sie ein und aus, und wählen Sie das Mobiltelefonsymbol aus, das sich links neben dem Symbol befindet Elemente Tab.
7. Sie können das Erscheinungsbild Ihrer Entwickler-Tools auch anpassen, indem Sie zunächst auf die Menüschaltfläche klicken, die durch drei vertikal angeordnete Punkte dargestellt wird und sich ganz rechts auf den oben genannten Registerkarten befindet. Über dieses Dropdown-Menü können Sie das Dock neu positionieren, verschiedene Werkzeuge anzeigen oder ausblenden sowie erweiterte Elemente wie einen Geräteinspektor starten. Sie werden feststellen, dass die Benutzeroberfläche von dev tools über die Einstellungen in diesem Abschnitt sehr anpassbar ist.

Mozilla Firefox

Der Web Developer-Bereich von Firefox enthält Tools für Designer, Entwickler und Tester, z. B. Stileditor und Pixel-Targeting-Pipette.

Lifewire Empfohlenes Lesen:Die Top 25 Greasemonkey- und Tampermonkey-Benutzerskripts

1. Klicken Sie auf die Hauptmenüschaltfläche von Firefox, die durch drei horizontale Linien dargestellt wird und sich in der oberen rechten Ecke des Browserfensters befindet.
2. Wenn das Dropdown-Menü angezeigt wird, wählen Sie das Symbol aus Entwickler . Das Web-Entwickler Das Menü sollte nun mit den folgenden Optionen angezeigt werden.Sie werden feststellen, dass den meisten Menüelementen Tastenkombinationen zugeordnet sind.Tools umschalten: Zeigt oder versteckt die Benutzeroberfläche der Entwickler-Tools, die sich normalerweise am unteren Rand des Browserfensters befindet. Tastenkombination: Mac OS X ( ALT (OPTION) + BEFEHLSTASTE + I ), Windows ( STRG + UMSCHALT + I )Inspektor: Ermöglicht die Überprüfung und / oder Optimierung von CSS- und HTML-Code auf der aktiven Seite sowie auf einem tragbaren Gerät über Debugging per Fernzugriff. Tastenkombination: Mac OS X ( ALT (OPTION) + BEFEHLSTASTE + C ), Windows ( STRG + UMSCHALT + C )Webkonsole: Ermöglicht das Ausführen von JavaScript-Ausdrücken auf der aktiven Seite sowie das Überprüfen verschiedener protokollierter Daten, einschließlich Sicherheitswarnungen, Netzwerkanforderungen, CSS-Meldungen und mehr. Tastenkombination: Mac OS X ( ALT (OPTION) + BEFEHLSTASTE + K ), Windows ( STRG + UMSCHALT + K )Debugger: Das JavaScript-Debugger Sie können Defekte lokalisieren und beheben, indem Sie Haltepunkte setzen, DOM-Knoten untersuchen, externe Quellen für Blackboxen und vieles mehr. Wie bei der Inspektor Diese Funktion unterstützt auch das Remote-Debugging. Tastenkombination: Mac OS X ( ALT (OPTION) + BEFEHLSTASTE + S ), Windows ( STRG + UMSCHALT + S) Style Editor: Damit können Sie neue Stylesheets erstellen und in die aktive Webseite integrieren oder vorhandene Arbeitsblätter bearbeiten und mit nur einem Klick testen, wie Ihre Änderungen in einem Browser gerendert werden. Tastenkombination: Mac OS X, Windows ( UMSCHALT + F7 )Performance: Bietet eine detaillierte Aufschlüsselung der Netzwerkleistung der aktiven Seite, der Framerate-Daten, der Ausführungszeit und des JavaScript-Status, des Paint-Flashings und vielem mehr. Tastenkombination: Mac OS X, Windows ( UMSCHALT + F5 )Netzwerk: Listet jede vom Browser initiierte Netzwerkanforderung mit der entsprechenden Methode, Ursprungsdomäne, Typ, Größe und abgelaufenen Zeit auf. Tastenkombination: Mac OS X ( ALT (OPTION) + BEFEHLSTASTE + Q ), Windows ( STRG + UMSCHALT + Q )Entwickler-Symbolleiste: Öffnet einen interaktiven Befehlszeileninterpreter. Eingeben Hilfe eine Liste aller verfügbaren Befehle und ihre korrekte Syntax in den Interpreter. Tastenkombination: Mac OS X, Windows ( UMSCHALT + F2 )WebIDE: Bietet die Möglichkeit, Web-Apps über ein aktuelles Gerät mit Firefox OS oder über den Firefox OS Simulator zu erstellen und auszuführen. Tastenkombination: Mac OS X, Windows ( UMSCHALT + F8 )Browser-Konsole: Bietet die gleiche Funktionalität wie das Webkonsole (siehe oben). Alle zurückgegebenen Daten beziehen sich jedoch auf die gesamte Firefox-Anwendung (einschließlich Erweiterungen und Funktionen auf Browser-Ebene) und nicht nur auf der aktiven Webseite. Tastenkombination: Mac OS X ( UMSCHALT + BEFEHLSTASTE + J ), Windows ( STRG + UMSCHALT + J )Responsive Design-Ansicht: Ermöglicht das sofortige Anzeigen einer Webseite in verschiedenen Auflösungen, Layouts und Bildschirmgrößen, um mehrere Geräte, einschließlich Tablets und Smartphones, nachzuahmen. Tastenkombination: Mac OS X ( ALT (OPTION) + BEFEHLSTASTE + M ), Windows ( STRG + UMSCHALT + M )Pipette: Zeigt den Hex-Farbcode für einzeln ausgewählte Pixel an.Scratchpad: Ermöglicht das Schreiben, Bearbeiten, Integrieren und Ausführen von JavaScript-Code-Ausschnitten aus einem herausgefahrenen Firefox-Fenster. Tastenkombination: Mac OS X, Windows ( UMSCHALT + F4 )Seitenquelltext: Beim ursprünglichen browserbasierten Entwickler-Tool zeigt diese Option einfach den verfügbaren Quellcode für die aktive Seite an. Tastenkombination: Mac OS X ( BEFEHLSTASTE + U ), Windows ( STRG + U )Weitere Tools erhalten: Öffnet die Webentwickler-Toolbox Sammlung auf der offiziellen Add-On-Site von Mozilla mit etwa einem Dutzend beliebter Erweiterungen wie Firebug und Greasemonkey.

Microsoft Edge / Internet Explorer

Im Allgemeinen als bezeichnet F12-Entwicklertools , eine Hommage an die Tastenkombination, mit der die Benutzeroberfläche seit früheren Versionen von Internet Explorer gestartet wurde, ist das Dev-Toolset von IE11 und Microsoft Edge von Anfang an sehr weit gekommen, da es eine sehr praktische Gruppe von Monitoren, Debugger, Emulatoren und mehr bietet -the-fly-Compiler.

1. Klicke auf das Mehr Aktionen Das Menü wird durch drei Punkte dargestellt und befindet sich in der oberen rechten Ecke des Browserfensters. Wenn das Dropdown-Menü angezeigt wird, wählen Sie die Option mit der Bezeichnung F12-Entwicklertools . Wie bereits erwähnt, können Sie die Tools auch über die F12 Tastaturkürzel.
2. Die Entwicklungsoberfläche sollte jetzt normalerweise am unteren Rand des Browserfensters angezeigt werden. Die folgenden Tools stehen zur Verfügung, die jeweils durch Klicken auf die jeweilige Überschrift der Registerkarte oder über die zugehörige Tastenkombination aufgerufen werden können.DOM Explorer: Ermöglicht das Bearbeiten von Stylesheets und HTML-Code auf der aktiven Seite, sodass die geänderten Ergebnisse während der Wiedergabe angezeigt werden. Verwendet die IntelliSense-Funktion, um gegebenenfalls Code automatisch zu vervollständigen. Tastaturkürzel: (STRG + 1) Konsole: Bietet die Möglichkeit, Debugging-Informationen, einschließlich Zähler, Zeitgeber, Ablaufverfolgungen und benutzerdefinierten Meldungen, über eine integrierte API zu übermitteln. Außerdem können Sie Code in eine aktive Webseite einfügen und die Werte ändern, die den einzelnen Variablen in Echtzeit zugewiesen sind. Tastaturkürzel: (STRG + 2) Debugger: Ermöglicht das Festlegen von Haltepunkten und das Debuggen Ihres Codes, während er ausgeführt wird, falls erforderlich, Zeile für Zeile. Tastaturkürzel: (STRG + 3) Netzwerk: Listet jede vom Browser während des Ladens und der Ausführung der Seite initiierte Netzwerkanforderung auf, einschließlich Protokolldetails, Inhaltstyp, Bandbreitennutzung und vielem mehr. Tastaturkürzel: (STRG + 4) Performance: Details zu Frameraten, CPU-Auslastung und anderen leistungsbezogenen Metriken, mit denen Sie das Laden von Seiten und andere Aktivitäten beschleunigen können. Tastaturkürzel: (STRG + 5) Erinnerung: Hilft Ihnen beim Isolieren und Beheben von potenziellen Speicherverlusten auf der aktuellen Webseite, indem Sie eine Zeitleiste für die Speicherverwendung zusammen mit Momentaufnahmen aus verschiedenen Zeitintervallen anzeigen. Tastaturkürzel: (STRG + 6) Emulation: Zeigt an, wie die aktive Seite in verschiedenen Auflösungen und Bildschirmgrößen dargestellt wird und Smartphones, Tablets und andere Geräte emuliert. Bietet auch die Möglichkeit, die Benutzeragenten- und Seitenausrichtung zu ändern sowie verschiedene Geolokationen durch Eingabe eines Breiten- und Längengrades zu simulieren. Tastaturkürzel: (STRG + 7)
3. Anzeigen der Konsole Klicken Sie in einem der anderen Tools auf den quadratischen Button mit einer rechten Klammer in der rechten oberen Ecke der Oberfläche der Entwicklungs-Tools.
4. Um die Oberfläche der Entwicklerwerkzeuge abzudocken, klicken Sie auf die Schaltfläche, die durch zwei hintereinander angeordnete Rechtecke dargestellt wird, oder verwenden Sie die folgende Tastenkombination: STRG + P . Sie können die Werkzeuge wieder an ihrem ursprünglichen Ort ablegen, indem Sie drücken STRG + P ein zweites Mal.

Apple Safari (nur OS X)

Das vielfältige Entwicklungs-Toolset von Safari spiegelt die große Entwicklergemeinschaft wider, die einen Mac für ihre Design- und Programmierungsanforderungen verwendet. Neben einer leistungsstarken Konsole und traditionellen Protokollierungs- und Debugging-Funktionen werden auch ein benutzerfreundlicher responsiver Designmodus und ein Tool zum Erstellen eigener Browsererweiterungen bereitgestellt.

1. Klicke auf Safari im Browser-Menü oben auf dem Bildschirm. Wenn das Dropdown-Menü angezeigt wird, wählen Sie Einstellungen . Anstelle dieses Menüelements können Sie auch die folgende Tastenkombination verwenden: BEFEHL + COMMA (,)
2. Safaris Einstellungen Die Benutzeroberfläche sollte nun angezeigt werden und Ihr Browserfenster überlagern. Klicke auf das Erweitert Symbol, das sich ganz rechts in der Kopfzeile befindet.
3. Das Erweitert Präferenzen sollten jetzt sichtbar sein. Am unteren Rand dieses Bildschirms befindet sich eine Option Entwicklungsmenü in der Menüleiste anzeigen , begleitet von einem Kontrollkästchen. Wenn in dem Kästchen kein Häkchen angezeigt wird, klicken Sie einmal darauf, um eines dort zu platzieren.
4. Schließe Einstellungen Klicken Sie auf das rote "x" in der oberen linken Ecke.
5. Sie sollten jetzt eine neue Option im Browser-Menü mit dem Namen sehen Entwickeln liegt zwischen Lesezeichen und Fenster . Klicken Sie auf diesen Menüpunkt. Jetzt sollte ein Dropdown-Menü mit den folgenden Optionen angezeigt werden.Seite öffnen mit: Ermöglicht das Öffnen der aktiven Webseite in einem der anderen Browser, die derzeit auf Ihrem Mac installiert sind.User-Agent: Ermöglicht die Auswahl aus über einem Dutzend vordefinierter Werte für Benutzeragenten, einschließlich mehrerer Versionen von Chrome, Firefox und Internet Explorer, und die Definition einer eigenen benutzerdefinierten Zeichenfolge.Rufen Sie den Responsive Design-Modus auf: Rendert die aktuelle Seite so, wie sie auf verschiedenen Geräten und mit unterschiedlichen Bildschirmauflösungen erscheinen würde.Webinspektor anzeigen: Startet die Hauptschnittstelle für die Entwicklungswerkzeuge von Safari. Diese befindet sich normalerweise am unteren Rand des Browser-Bildschirms und enthält die folgenden Abschnitte: Elemente , Netzwerk , Ressourcen , Zeitleisten , Debugger , Lager , Konsole .Fehlerkonsole anzeigen: Startet auch die Dev-Tools-Schnittstelle direkt zur Konsole Registerkarte, auf der Fehler, Warnungen und andere durchsuchbare Protokolldaten angezeigt werden.Seitenquelle anzeigen: Öffnet die Ressourcen Registerkarte, auf der der Quellcode für die aktive Seite nach Dokument kategorisiert wird.Seitenressourcen anzeigen: Führt dieselbe Funktion wie der aus Seitenquelle anzeigen Möglichkeit.Snippet-Editor anzeigen: Öffnet ein neues Fenster, in dem Sie CSS- und HTML-Code eingeben können, um eine Vorschau der Ausgabe anzuzeigen.Extension Builder anzeigen: Bietet die Möglichkeit, Safari-Erweiterungen mit CSS, HTML und JavaScript zu erstellen oder zu bearbeiten.Timeline-Aufnahme anzeigen: Öffnet die Zeitleisten Startet die Anzeige von Netzwerkanforderungen, Layout- und Rendering-Informationen sowie die Ausführung von JavaScript in Echtzeit.Leere Caches: Löscht den gesamten Cache, der aktuell auf Ihrer Festplatte gespeichert ist.Caches deaktivieren: Stoppt die Zwischenspeicherung von Safari, so dass der Inhalt bei jedem Laden der Seite vom Server abgerufen wird.Bilder deaktivieren: Verhindert, dass Bilder auf allen Webseiten gerendert werden.Stile deaktivieren: Ignoriert CSS-Eigenschaften, wenn eine Seite geladen wird.Javascript ausschalten: Beschränkt die Ausführung von JavaScript auf allen Seiten.Erweiterungen deaktivieren: Verhindert, dass alle installierten Erweiterungen im Browser ausgeführt werden.Site-spezifische Hacks deaktivieren: Wenn Safari so geändert wurde, dass Probleme spezifisch für die aktive Webseite behandelt werden, werden diese Änderungen mit dieser Option blockiert, sodass die Seite so geladen wird, wie sie vor den Änderungen vorgenommen wurde.Lokale Dateibeschränkungen deaktivieren: Ermöglicht dem Browser den Zugriff auf Dateien auf Ihren lokalen Festplatten. Diese Aktion ist aus Sicherheitsgründen standardmäßig eingeschränkt.Ursprungsübergreifende Beschränkungen deaktivieren: Diese Einschränkungen werden standardmäßig festgelegt, um XSS und andere potenzielle Gefahren zu vermeiden. Sie müssen jedoch häufig zu Entwicklungszwecken vorübergehend deaktiviert werden.Erlaube JavaScript aus dem intelligenten Suchfeld: Wenn aktiviert, können URLs eingegeben werden Javascript: direkt in die Adressleiste aufgenommen.SHA-1-Zertifikate als unsicher behandeln: SSL-Zertifikate, die den SHA-1-Algorithmus verwenden, gelten allgemein als veraltet und anfällig.