Verwenden der Webbrowser-Entwicklertools

Integrierte Toolsets für Webdesigner, Entwickler und Tester

Zusätzlich zu den meisten Browserherstellern, die sich auf alltägliche Benutzer konzentrieren, die im Internet surfen möchten, richten sie sich auch an Webentwickler, Designer und Qualitätssicherungsfachleute, die beim Erstellen der Apps und Websites, auf die diese Benutzer zugreifen, helfen, indem sie leistungsstarke Tools direkt in die Browser integrieren sich.

Vorbei sind die Zeiten, in denen Sie mit den einzigen Programmier- und Testwerkzeugen eines Browsers den Quellcode einer Seite und nichts mehr anzeigen konnten. Mit den heutigen Browsern können Sie einen tieferen Einblick gewinnen, indem Sie beispielsweise JavaScript-Snippets ausführen und debuggen, DOM-Elemente untersuchen und bearbeiten, den Echtzeit-Netzwerkverkehr überwachen, während Ihre App oder Seite geladen wird, um Engpässe zu identifizieren, die CSS-Leistung analysieren und sicherstellen, dass Ihr Code vorhanden ist Nicht zu viel Speicher oder zu viele CPU-Zyklen und vieles mehr.

Unter Testgesichtspunkten können Sie mithilfe von reaktionsschnellem Design und integrierten Simulatoren reproduzieren, wie eine App oder Webseite in verschiedenen Browsern sowie auf verschiedenen Geräten und Plattformen wiedergegeben wird. Das Beste daran ist, dass Sie dies alles tun können, ohne Ihren Browser verlassen zu müssen!

In den folgenden Tutorials erfahren Sie, wie Sie in mehreren gängigen Webbrowsern auf diese Entwicklertools zugreifen können.

Google Chrome

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

  1. Wählen Sie das Hauptmenü von Chrome aus, das 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 die Option Weitere Tools .

  3. Ein Untermenü sollte jetzt erscheinen. Wählen Sie die Option Entwicklertools . Anstelle dieses Menüelements können Sie auch die folgende Tastenkombination verwenden: Chrome OS / Windows ( STRG + UMSCHALT + I ), Mac OS X ( ALT (OPTION) + BEFEHL + I )

  4. Die Benutzeroberfläche der Chrome Developer Tools sollte jetzt angezeigt werden, wie in diesem Screenshot gezeigt. Abhängig von Ihrer Chrome-Version weicht das angezeigte ursprüngliche Layout möglicherweise geringfügig von dem hier gezeigten ab. Der Haupt-Hub der Entwicklertools, der sich normalerweise unten oder rechts auf dem Bildschirm 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 diagnostische Debuggen.
    • Quellen: Ermöglicht das Debuggen von JavaScript-Code über eine leistungsstarke grafische Oberfläche.
    • Netzwerk: Kategorisiert und zeigt detaillierte Informationen zu den jeweiligen Vorgängen auf der aktiven Anwendung oder Seite an, einschließlich vollständiger Anforderungs- und Antwortheader sowie erweiterter Zeitmesswerte.
    • Leistung: Testen Sie die Leistung einer Site, indem Sie die Ladezeiten überwachen. Sie können auch verschiedene Umstände simulieren, z. B. mobile CPU-Fähigkeiten.
  5. Zusätzlich zu diesen Abschnitten können Sie über das Symbol >> rechts auf der Registerkarte Leistung auf die folgenden Tools zugreifen.

    • Speicher: Überwacht und zeichnet die Speichernutzung auf einer Webseite auf. Sie können sehen, wie schwer das JavaScript auf Ihrer Website ist.
    • Sicherheit: Hebt Zertifikatprobleme und andere sicherheitsrelevante Probleme mit der aktiven Seite oder Anwendung hervor.
    • Anwendung: Überprüfen Sie die von einer Webanwendung verwendeten Ressourcen. Erhalten Sie eine vollständige Aufschlüsselung dessen, was verwendet wird.
    • Audits: Bietet Möglichkeiten zur Optimierung der Ladezeit und der allgemeinen Leistung einer Seite oder Anwendung.
  6. Mit dem Gerätemodus können Sie die aktive Seite in einem Simulator anzeigen, der sie fast genau so darstellt, wie sie auf einem von über einem Dutzend Geräten angezeigt wird, einschließlich mehrerer bekannter Android- und iOS-Modelle wie iPad, iPhone und Samsung Galaxy. Sie haben auch die Möglichkeit, benutzerdefinierte Bildschirmauflösungen zu emulieren, die Ihren speziellen Entwicklungs- oder Testanforderungen entsprechen.

    Um den Gerätemodus ein- und auszuschalten, wählen Sie das Mobiltelefonsymbol direkt links auf der Registerkarte Elemente .

  7. Sie können das Erscheinungsbild Ihrer Entwicklertools auch anpassen, indem Sie zunächst die Menüschaltfläche auswählen, die durch drei vertikal platzierte Punkte dargestellt wird und sich ganz rechts auf den oben genannten Registerkarten befindet.

In diesem Dropdown-Menü können Sie das Dock neu positionieren, verschiedene Tools anzeigen oder ausblenden sowie erweiterte Elemente wie einen Geräteinspektor starten. Sie werden feststellen, dass die Benutzeroberfläche der Dev Tools über die Einstellungen in diesem Abschnitt in hohem Maße anpassbar ist.

Mozilla Firefox

Der Firefox-Bereich für Webentwickler enthält Tools für Designer, Entwickler und Tester, z. B. einen Stileditor und eine Pipette mit Pixel-Targeting.

  1. Wählen Sie das Hauptmenü von Firefox aus, das 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 Web Developer . Das Web Developer-Menü sollte nun angezeigt werden und die folgenden Optionen enthalten. Sie werden feststellen, dass den meisten Menüelementen Tastaturkürzel zugeordnet sind.

  • Tools umschalten: Blendet die Entwickler-Tools-Oberfläche ein oder aus, die normalerweise am unteren Rand des Browserfensters positioniert ist. Tastaturkürzel: Mac OS X ( ALT (OPTION) + BEFEHL + I ), Windows ( STRG + UMSCHALT + I )
  • Inspector: Ermöglicht das Überprüfen und / oder Ändern von CSS- und HTML-Code auf der aktiven Seite sowie auf einem tragbaren Gerät per Remote-Debugging. Tastaturkürzel: Mac OS X ( ALT (OPTION) + BEFEHL + 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-Nachrichten und mehr. Tastaturkürzel: Mac OS X ( ALT (OPTION) + BEFEHL + K ), Windows ( STRG + UMSCHALT + K )
  • Debugger: Mit dem JavaScript-Debugger können Sie Fehler lokalisieren und beheben, indem Sie Haltepunkte festlegen, DOM-Knoten untersuchen, externe Quellen für Black Boxing verwenden und vieles mehr. Wie beim Inspector unterstützt diese Funktion auch das Remote-Debugging. Tastaturkürzel: Mac OS X ( ALT (OPTION) + BEFEHL + S ), Windows ( STRG + UMSCHALT + S )
  • Stil-Editor: Ermöglicht das Erstellen neuer Stilvorlagen und deren Einbindung in die aktive Webseite oder das Bearbeiten vorhandener Arbeitsblätter und Testen der Darstellung Ihrer Änderungen in einem Browser mit nur einem Klick. Tastaturkürzel: Mac OS X, Windows ( UMSCHALT + F7 )
  • Leistung: Bietet eine detaillierte Aufschlüsselung der Netzwerkleistung der aktiven Seite, der Frame-Rate-Daten, der Ausführungszeit und des Status von JavaScript, des Blinkens von Farben und vielem mehr. Tastaturkürzel: Mac OS X, Windows ( UMSCHALT + F5 )
  • Netzwerk: Listet jede vom Browser initiierte Netzwerkanforderung mit der entsprechenden Methode, der Ursprungsdomäne, dem Typ, der Größe und der verstrichenen Zeit auf. Tastaturkürzel: Mac OS X ( ALT (OPTION) + BEFEHL + Q ), Windows ( STRG + UMSCHALT + Q )
  • Speicherinspektor: Sehen Sie sich den Cache und die Cookies an, die von einer Website gespeichert werden. Tastaturkürzel: (UMSCHALT + F9)
  • Entwickler-Symbolleiste: Öffnet einen interaktiven Befehlszeileninterpreter. Geben Sie help in den Interpreter ein, um eine Liste aller verfügbaren Befehle und deren korrekte Syntax anzuzeigen. Tastaturkürzel: 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. Tastaturkürzel: Mac OS X, Windows ( UMSCHALT + F8 )
  • Browserkonsole: Bietet die gleiche Funktionalität wie die Webkonsole (siehe oben). Alle zurückgegebenen Daten beziehen sich jedoch auf die gesamte Firefox-Anwendung (einschließlich Erweiterungen und Funktionen auf Browserebene) und nicht nur auf die aktive Webseite. Tastaturkürzel: Mac OS X ( UMSCHALT + BEFEHL + J ), Windows ( STRG + UMSCHALT + J )
  • Responsive Design View: Ermöglicht die sofortige Anzeige einer Webseite in verschiedenen Auflösungen, Layouts und Bildschirmgrößen, um mehrere Geräte, einschließlich Tablets und Smartphones, nachzuahmen. Tastaturkürzel: Mac OS X ( ALT (OPTION) + BEFEHL + M ), Windows ( STRG + UMSCHALT + M )
  • Pipette: Zeigt den hexadezimalen Farbcode für einzeln ausgewählte Pixel an. Scratchpad: Ermöglicht das Schreiben, Bearbeiten, Integrieren und Ausführen von JavaScript-Code-Snippets in einem Firefox-Popup-Fenster.
  • Notizblock: Öffnen Sie ein interaktives JavaScript-Dokument, mit dem Sie Code schreiben und mit einer Website testen können. Tastaturkürzel: (UMSCHALT + F4)
  • Servicemitarbeiter: Debuggen Sie Servicemitarbeiter für Ihre Webanwendung. Erhalten Sie detaillierte Informationen zu deren Leistung und Fehlern.
  • Seitenquelle: Diese Option ist das ursprüngliche browserbasierte Entwicklertool und zeigt einfach den verfügbaren Quellcode für die aktive Seite an. Tastaturkürzel: Mac OS X ( BEFEHLSTASTE + U ), Windows ( STRG + U )
  • Weitere Tools herunterladen : Öffnet die Toolbox- Sammlung für Webentwickler auf der offiziellen Add-On-Website von Mozilla mit etwa einem Dutzend beliebter Erweiterungen wie Firebug und Greasemonkey.

Microsoft Edge / Internet Explorer

Im Allgemeinen als F12 Developer Tools bezeichnet , eine Hommage an die Tastenkombination, mit der die Benutzeroberfläche seit früheren Versionen von Internet Explorer gestartet wurde. Das Entwickler- Toolset in IE11 und Microsoft Edge hat seit seiner Einführung einen langen Weg zurückgelegt und bietet eine sehr praktische Gruppe von Tools Monitore, Debugger, Emulatoren und schnelle Compiler.

  1. Wählen Sie Weitere Aktionen , dargestellt durch drei Punkte in der oberen rechten Ecke des Browserfensters. Wenn das Dropdown-Menü angezeigt wird, wählen Sie die Option Entwicklertools .

  2. Die Entwicklungsoberfläche sollte jetzt angezeigt werden, normalerweise am unteren Rand des Browserfensters. Die folgenden Tools stehen zur Verfügung, auf die Sie jeweils zugreifen können, indem Sie auf die jeweilige Registerkartenüberschrift klicken oder die zugehörige Tastenkombination verwenden.

    • DOM-Explorer: Ermöglicht das Bearbeiten von Stylesheets und HTML auf der aktiven Seite, wobei die geänderten Ergebnisse jederzeit angezeigt werden. Verwendet die IntelliSense-Funktionalität, um den Code gegebenenfalls automatisch zu vervollständigen. Tastaturkürzel: ( STRG + 1 )
    • Konsole: Bietet die Möglichkeit, Debugging-Informationen wie Zähler, Zeitgeber, Ablaufverfolgungen und benutzerdefinierte Nachrichten über eine integrierte API zu senden. Außerdem können Sie Code in eine aktive Webseite einfügen und die den einzelnen Variablen zugewiesenen Werte in Echtzeit ändern. Tastaturkürzel: ( STRG + 2 )
    • Debugger: Ermöglicht das Festlegen von Haltepunkten und das Debuggen des Codes während der Ausführung, gegebenenfalls zeilenweise. Tastaturkürzel: ( STRG + 3 )
    • Netzwerk: Listet alle Netzwerkanforderungen auf, die vom Browser während des Ladens und Ausführens der Seite initiiert wurden, einschließlich Protokolldetails, Inhaltstyp, Bandbreitennutzung und vielem mehr. Tastaturkürzel: ( STRG + 4 )
    • Leistung: Details zu Frameraten, CPU-Auslastung und anderen leistungsbezogenen Metriken, um die Ladezeiten von Seiten und andere Aktivitäten zu beschleunigen. Tastaturkürzel: ( STRG + 5 )
    • Speicher: Ermöglicht das Isolieren und Korrigieren potenzieller Speicherverluste auf der aktuellen Webseite, indem eine Zeitleiste für die Speichernutzung zusammen mit Snapshots aus verschiedenen Zeitintervallen angezeigt wird. Tastaturkürzel: ( STRG + 6 )
    • Emulation: Zeigt an, wie die aktive Seite in verschiedenen Auflösungen und Bildschirmgrößen gerendert wird, um Smartphones, Tablets und andere Geräte zu emulieren. Bietet auch die Möglichkeit, den Benutzeragenten und die Seitenausrichtung zu ändern sowie verschiedene Geolokalisierungen durch Eingabe eines Breiten- und Längengrads zu simulieren. Tastaturkürzel: ( STRG + 7 )
  3. Um die Konsole in einem der anderen Tools anzuzeigen, drücken Sie die quadratische Taste mit der rechten Klammer in der oberen rechten Ecke der Oberfläche der Entwicklungstools.

  4. Wählen Sie zum Abdocken der Entwickler-Tools-Oberfläche, sodass sie zu einem separaten Fenster wird, die beiden überlappenden Rechtecke aus oder verwenden Sie die folgende Tastenkombination: STRG + P. Sie können die Werkzeuge wieder an ihrem ursprünglichen Ort platzieren, indem Sie ein zweites Mal STRG + P drücken.

Apple Safari (nur OS X)

Das vielfältige Entwickler-Toolset von Safari spiegelt die große Entwickler-Community wider, die einen Mac für ihre Design- und Programmieranforderungen verwendet. Neben einer leistungsstarken Konsole und traditionellen Protokollierungs- und Debugging-Funktionen stehen auch ein benutzerfreundlicher reaktionsschneller Entwurfsmodus und ein Tool zum Erstellen eigener Browsererweiterungen zur Verfügung.

  1. Wählen Sie Safari im Browser-Menü oben auf Ihrem Bildschirm. Wenn das Dropdown-Menü angezeigt wird, wählen Sie Einstellungen . Anstelle dieses Menüelements können Sie auch die folgende Tastenkombination verwenden: BEFEHLSTASTE + KOMMA (,)

  2. Die Benutzeroberfläche von Safari sollte nun angezeigt werden und Ihr Browserfenster überlagern. Wählen Sie das Symbol Erweitert aus , das sich ganz rechts in der Kopfzeile befindet.

  3. Die erweiterten Einstellungen sollten jetzt sichtbar sein. Am unteren Rand dieses Bildschirms befindet sich eine Option mit der Bezeichnung " Entwicklungsmenü anzeigen" in der Menüleiste und einem Kontrollkästchen. Wenn in dem Feld kein Häkchen angezeigt wird, klicken Sie einmal darauf, um es dort zu platzieren.

  4. Schließen Sie die Benutzeroberfläche " Einstellungen" , indem Sie auf das rote " x " in der oberen linken Ecke klicken.

  5. Sie sollten jetzt eine neue Option im Browser-Menü mit dem Namen " Entwickeln" zwischen " Lesezeichen" und "Fenster" bemerken. Klicken Sie auf diesen Menüpunkt. Nun 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 User Agent-Werte, einschließlich mehrerer Versionen von Chrome, Firefox und Internet Explorer, sowie die Definition einer eigenen benutzerdefinierten Zeichenfolge.
  • Responsive Design-Modus aktivieren : Rendert die aktuelle Seite so, wie sie auf verschiedenen Geräten und mit unterschiedlichen Bildschirmauflösungen angezeigt wird.
  • Web Inspector anzeigen : Startet die Hauptoberfläche für die Safari-Entwicklungstools, die normalerweise am unteren Rand des Browserbildschirms angezeigt wird und die folgenden Abschnitte enthält: Elemente, Netzwerk, Ressourcen, Zeitleisten, Debugger, Speicher, Konsole.
  • Show Error Console (Fehlerkonsole anzeigen): Startet auch die Benutzeroberfläche der Dev Tools direkt auf der Registerkarte Console (Konsole), auf der Fehler, Warnungen und andere durchsuchbare Protokolldaten angezeigt werden.
  • Seitenquelle anzeigen: Öffnet die Registerkarte Ressourcen , auf der der Quellcode für die aktive Seite angezeigt wird, die vom Dokument kategorisiert wird.
  • Seitenressourcen anzeigen: Führt dieselbe Funktion aus wie die Option Seitenquelle anzeigen.
  • Snippet-Editor anzeigen: Öffnet ein neues Fenster, in dem Sie CSS- und HTML-Code eingeben und eine schnelle Vorschau der Ausgabe anzeigen können.
  • Show Extension Builder: Bietet die Möglichkeit, Safari-Erweiterungen mit CSS, HTML und JavaScript zu erstellen oder zu bearbeiten.
  • Show Timeline Recording: Öffnet die Registerkarte Timelines und zeigt Netzwerkanforderungen, Layout- und Rendering-Informationen sowie die Ausführung von JavaScript in Echtzeit an.
  • Leere Caches: Löscht den gesamten Cache, der gerade auf Ihrer Festplatte gespeichert ist.
  • Caches deaktivieren: Verhindert das Zwischenspeichern von Safari, sodass der gesamte 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 deaktivieren: 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, die für die aktive Webseite spezifisch sind, explizit behandelt werden, werden diese Änderungen durch diese Option blockiert, sodass die Seite so geladen wird, wie es vor Einführung dieser Änderungen der Fall gewesen wäre.
  • Einschränkungen für lokale Dateien deaktivieren: Ermöglicht dem Browser den Zugriff auf Dateien auf Ihren lokalen Datenträgern. Diese Aktion ist aus Sicherheitsgründen standardmäßig eingeschränkt.
  • Herkunftsübergreifende Einschränkungen deaktivieren: Diese Einschränkungen sind standardmäßig festgelegt, um XSS und andere potenzielle Gefahren zu vermeiden. Sie müssen jedoch häufig für Entwicklungszwecke vorübergehend deaktiviert werden.
  • JavaScript aus Smart Search-Feld zulassen: Wenn diese Option aktiviert ist, können URLs mit Javascript eingegeben werden: direkt in die Adressleiste integriert.
  • SHA-1-Zertifikate als unsicher behandeln: SSL-Zertifikate, die den SHA-1-Algorithmus verwenden, gelten allgemein als veraltet und anfällig.