So verwenden Sie Webbrowser-Entwicklertools

2024 Autor: Abigail Brown | [email protected]. Zuletzt bearbeitet: 2024-01-07 19:02

Zusätzlich zu 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 Qualitätssicherungsexperten, die beim Erstellen der Apps und Websites helfen, auf die diese Benutzer zugreifen, indem sie leistungsstarke integrieren Tools direkt in die Browser selbst.

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

Aus Testperspektive können Sie reproduzieren, wie eine App oder Webseite in verschiedenen Browsern sowie auf verschiedenen Geräten und Plattformen durch die Magie von responsivem Design und integrierten Simulatoren gerendert wird. Das Beste daran ist, dass Sie all dies tun können, ohne Ihren Browser verlassen zu müssen!

Die folgenden Tutorials führen Sie durch den Zugriff auf diese Entwicklertools in mehreren gängigen Webbrowsern.

Google Chrome

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

1. Wählen Sie das Hauptmenü von Chrome aus, das mit drei horizontalen Linien gekennzeichnet 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. Jetzt sollte ein Untermenü erscheinen. Wählen Sie die Option mit der Bezeichnung Entwicklertools. Anstelle dieses Menüpunkts können Sie auch die folgende Tastenkombination verwenden: Chrome OS/Windows (CTRL+SHIFT+I), Mac OS X (ALT(OPTION) +BEFEHL+I)

   

4. Die Benutzeroberfläche der Chrome Developer Tools sollte nun angezeigt werden, wie in diesem Beispiel-Screenshot gezeigt. Abhängig von Ihrer Chrome-Version kann das anfängliche Layout, das Sie sehen, leicht von dem hier dargestellten abweichen. Der Hauptknotenpunkt der Entwicklertools, der sich normalerweise entweder unten oder rechts auf dem Bildschirm befindet, enthält die folgenden Registerkarten.

5. Zusätzlich zu diesen Abschnitten können Sie auch über das Symbol >> auf die folgenden Tools zugreifen, das sich rechts neben der Leistung befindet tab.

   • Memory: Speichernutzung auf einer Webseite überwachen und aufzeichnen. Sie können sehen, wie umfangreich das JavaScript auf Ihrer Website ist.
   • Sicherheit: Hebt Zertifikatsprobleme und andere sicherheitsbezogene Probleme mit der aktiven Seite oder Anwendung hervor.
   • Application: Überprüfen Sie die Ressourcen, die von einer Webanwendung verwendet werden. Erh alten Sie eine vollständige Aufschlüsselung dessen, was verwendet wird.
   • Audits: Bietet Möglichkeiten, die Ladezeit einer Seite oder Anwendung und die allgemeine Leistung zu optimieren.

   

6. Gerätemodus ermöglicht es Ihnen, die aktive Seite in einem Simulator anzuzeigen, der sie fast genau so darstellt, wie sie auf einem von über einem Dutzend Geräten erscheinen würde, darunter mehrere bekannte Android-Geräte und iOS-Modelle wie iPad, iPhone und Samsung Galaxy. Sie haben auch die Möglichkeit, benutzerdefinierte Bildschirmauflösungen zu emulieren, um sie an Ihre speziellen Entwicklungs- oder Testanforderungen anzupassen.

   Um den Gerätemodus ein- und auszusch alten, wählen Sie das Mobiltelefonsymbol direkt links neben dem Elemente tab.

   

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

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

   

Mozilla Firefox

Der Abschnitt für Webentwickler von Firefox enthält Tools für Designer, Entwickler und Tester, wie z.

1. Wählen Sie das Hauptmenü von Firefox, das durch drei horizontale Linien dargestellt wird und sich in der oberen rechten Ecke des Browserfensters befindet.

2. Wenn das Dropdown-Menü erscheint, wählen Sie Web Developer.

   

3. Das Webentwickler-Menü sollte nun angezeigt werden und die folgenden Optionen enth alten. Sie werden feststellen, dass den meisten Menüpunkten Tastenkombinationen zugeordnet sind.

   • Toggle Tools: Blendet die Benutzeroberfläche der Entwicklertools ein oder aus, die sich normalerweise am unteren Rand des Browserfensters befindet. Tastaturkürzel: Mac OS X (ALT(OPTION)+COMMAND+I), Windows (CTRL+SHIFT+I)
   • Inspector: Ermöglicht es Ihnen, CSS- und HTML-Code auf der aktiven Seite sowie auf einem tragbaren Gerät per Remote-Debugging zu inspizieren und/oder zu optimieren. Tastaturkürzel: Mac OS X (ALT(OPTION)+COMMAND+C), Windows (CTRL+SHIFT+C)
   • Webkonsole: Ermöglicht Ihnen, JavaScript-Ausdrücke innerhalb der aktiven Seite auszuführen sowie verschiedene protokollierte Daten zu überprüfen, darunter Sicherheitswarnungen, Netzwerkanfragen, CSS-Meldungen und mehr. Tastaturkürzel: Mac OS X (ALT(OPTION)+COMMAND+K), Windows (CTRL+SHIFT+K)
   • Debugger: Mit dem JavaScript-Debugger können Sie Fehler lokalisieren und beheben, indem Sie Breakpoints setzen, DOM-Knoten untersuchen, externe Quellen ausschließen und vieles mehr. Wie beim Inspector unterstützt auch diese Funktion das Remote-Debugging. Tastaturkürzel: Mac OS X (ALT(OPTION)+COMMAND+S), Windows (CTRL+SHIFT+S)
   • Stil-Editor: Ermöglicht es Ihnen, mit nur einem Klick neue Stylesheets zu erstellen und sie in die aktive Webseite einzubinden oder vorhandene Sheets zu bearbeiten und zu testen, wie Ihre Änderungen in einem Browser dargestellt werden. Tastaturkürzel: Mac OS X, Windows (SHIFT+F7)
   • Leistung: Liefert eine detaillierte Aufschlüsselung der Netzwerkleistung der aktiven Seite, Bildratendaten, JavaScript-Ausführungszeit und -Status, Paint Flashing und vieles mehr. Tastaturkürzel: Mac OS X, Windows (SHIFT+F5)
   • Network: Listet jede vom Browser initiierte Netzwerkanfrage zusammen mit der entsprechenden Methode, Ursprungsdomäne, Typ, Größe und verstrichener Zeit auf. Tastaturkürzel: Mac OS X (ALT(OPTION)+COMMAND+Q), Windows (CTRL+SHIFT+Q)
   • Storage Inspector: Sehen Sie sich den Cache und die Cookies an, die von einer Website gespeichert werden. Tastaturkürzel: (UMSCHALT+F9)
   • Developer Toolbar: Öffnet einen interaktiven Befehlszeileninterpreter. Geben Sie help in den Interpreter ein, um eine Liste aller verfügbaren Befehle und ihrer korrekten Syntax zu erh alten. Tastaturkürzel: Mac OS X, Windows (SHIFT+F2)
   • WebIDE: Bietet die Möglichkeit, Web-Apps über ein tatsächliches Gerät mit Firefox OS oder über den Firefox OS Simulator zu erstellen und auszuführen. Tastaturkürzel: Mac OS X, Windows (SHIFT+F8)
   • Browser-Konsole: Bietet dieselbe Funktionalität wie die Web-Konsole (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 (SHIFT+COMMAND+J), Windows (CTRL+SHIFT+J)
   • Responsive Design View: Ermöglicht es Ihnen, eine Webseite sofort in verschiedenen Auflösungen, Layouts und Bildschirmgrößen anzuzeigen, um mehrere Geräte einschließlich Tablets und Smartphones nachzuahmen. Tastaturkürzel: Mac OS X (ALT(OPTION)+COMMAND+M), Windows (CTRL+SHIFT+M)
   • Pipette: Zeigt den Hex-Farbcode für einzeln ausgewählte Pixel an.
   • Scratchpad: Mit Scratchpad können Sie JavaScript-Codeschnipsel aus einem Popup-Fenster von Firefox heraus schreiben, bearbeiten, integrieren und ausführen. Öffnen Sie ein interaktives JavaScript-Dokument, in das Sie Code schreiben und mit einer Website testen können. Tastaturkürzel: (UMSCHALT+F4)
   • Service Workers: Debuggen Sie Service Worker in Ihrer Webanwendung. Erh alten Sie detaillierte Informationen über ihre Leistung und Fehler.
   • Seitenquelle: Das ursprüngliche browserbasierte Entwicklertool, diese Option zeigt einfach den verfügbaren Quellcode für die aktive Seite an. Tastaturkürzel: Mac OS X (COMMAND+U), Windows (CTRL+U)
   • Get More Tools: Öffnet die Web Developer's Toolbox-Sammlung auf Mozillas offizieller Add-On-Site, die etwa ein Dutzend beliebter Erweiterungen wie z als Firebug und Greasemonkey.

   

Microsoft Edge/Internet Explorer

Allgemein als F12-Entwicklertools bezeichnet, eine Hommage an die Tastenkombination, die die Benutzeroberfläche seit früheren Versionen von Internet Explorer, dem Entwickler-Toolset in IE11 und Microsoft Edge, gestartet hat hat seit seiner Gründung einen langen Weg zurückgelegt, indem es eine sehr praktische Gruppe von Monitoren, Debuggern, Emulatoren und On-the-Fly-Compilern anbietet.

Microsoft unterstützt Internet Explorer nicht mehr und empfiehlt, auf den neueren Edge-Browser zu aktualisieren. Besuchen Sie ihre Website, um die neueste Version herunterzuladen.

1. Wählen Sie Weitere Aktionen, dargestellt durch drei Punkte und befindet sich in der oberen rechten Ecke des Browserfensters.

   

2. Wenn das Dropdown-Menü angezeigt wird, wählen Sie die Option mit der Bezeichnung Entwicklertools.

   

3. Die Entwicklungsoberfläche sollte nun angezeigt werden, normalerweise am unteren Rand des Browserfensters. Die folgenden Tools sind verfügbar, 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 es Ihnen, Stylesheets und HTML auf der aktiven Seite zu bearbeiten, wobei die geänderten Ergebnisse während des Vorgangs wiedergegeben werden. Verwendet die IntelliSense-Funktionalität zur automatischen Vervollständigung von Code, sofern zutreffend. Tastaturkürzel: (CTRL+1)
   • Console: Bietet die Möglichkeit, Debugging-Informationen wie Zähler, Timer, Ablaufverfolgungen und benutzerdefinierte Nachrichten über eine integrierte API zu übermitteln. Außerdem können Sie Code in eine aktive Webseite einfügen und die den einzelnen Variablen zugewiesenen Werte in Echtzeit ändern. Tastaturkürzel: (CTRL+2)
   • Debugger: Ermöglicht das Setzen von H altepunkten und das Debuggen Ihres Codes während der Ausführung, Zeile für Zeile, falls erforderlich. Tastaturkürzel: (CTRL+3)
   • Netzwerk: Listet jede Netzwerkanfrage auf, die vom Browser während des Ladens und der Ausführung der Seite initiiert wurde, einschließlich Protokolldetails, Inh altstyp, Bandbreitennutzung und vielem mehr. Tastaturkürzel: (CTRL+4)
   • Leistung: Details zu Bildraten, CPU-Auslastung und anderen leistungsbezogenen Metriken, mit denen Sie die Ladezeiten von Seiten und andere Aktivitäten beschleunigen können. Tastaturkürzel: (CTRL+5)
   • Memory: Hilft Ihnen, potenzielle Speicherlecks auf der aktuellen Webseite zu isolieren und zu korrigieren, indem eine Zeitachse der Speichernutzung zusammen mit Schnappschüssen aus verschiedenen Zeitintervallen angezeigt wird. Tastaturkürzel: (CTRL+6)
   • Emulation: Zeigt Ihnen, wie die aktive Seite in verschiedenen Auflösungen und Bildschirmgrößen dargestellt wird, wobei Smartphones, Tablets und andere Geräte emuliert werden. Es bietet auch die Möglichkeit, den Benutzeragenten und die Seitenausrichtung zu ändern sowie verschiedene geografische Standorte zu simulieren, indem Sie einen Breiten- und Längengrad eingeben. Tastaturkürzel: (CTRL+7)

4. Um die Konsole anzuzeigen, während Sie sich in einem der anderen Tools befinden, drücken Sie die quadratische Taste mit einer rechten Klammer darin, die sich in befindet in der oberen rechten Ecke der Benutzeroberfläche der Entwicklungstools.

   

5. Um die Benutzeroberfläche der Entwicklertools abzudocken, sodass sie ein separates Fenster wird, wählen Sie die zwei kaskadierenden Rechtecke aus oder verwenden Sie die folgende Tastenkombination: STRG+P. Sie können die Werkzeuge wieder an ihrem ursprünglichen Ort platzieren, indem Sie STRG+P ein zweites Mal drücken.

   

Apple Safari (nur Mac)

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

1. Wählen Sie Safari im Browsermenü, das sich oben auf Ihrem Bildschirm befindet. Wenn das Dropdown-Menü erscheint, wählen Sie Preferences. Anstelle dieses Menüpunkts können Sie auch folgende Tastenkombination verwenden: COMMAND+COMMA(,)

   

2. Safari's Preferences Oberfläche sollte jetzt angezeigt werden und Ihr Browserfenster überlagern. Wählen Sie das Symbol Erweitert ganz rechts in der Kopfzeile.

   

3. Die Erweitert Einstellungen sollten jetzt sichtbar sein. Am unteren Rand dieses Bildschirms befindet sich eine Option mit der Bezeichnung Entwicklermenü anzeigen in der Menüleiste, begleitet von einem Kontrollkästchen. Wenn im Kästchen kein Häkchen angezeigt wird, klicken Sie einmal darauf, um dort eines zu platzieren.

   

4. Oberfläche Einstellungen schließen.

5. Sie sollten nun eine neue Option im Browser-Menü namens Entwickeln bemerken, die sich zwischen Lesezeichen und Fenster befindet. Klicken Sie auf diesen Menüpunkt. Nun sollte ein Dropdown-Menü angezeigt werden, das die folgenden Optionen enthält.

   • Seite öffnen mit: Ermöglicht es Ihnen, die aktive Webseite in einem der anderen derzeit auf Ihrem Mac installierten Browser zu öffnen.
   • User Agent: Hier können Sie aus über einem Dutzend vordefinierter User-Agent-Werte auswählen, darunter mehrere Versionen von Chrome, Firefox und Internet Explorer, sowie Ihre eigenen benutzerdefinierten definieren Zeichenkette.
   • Enter Responsive Design Mode: Stellt die aktuelle Seite so dar, wie sie auf verschiedenen Geräten und mit unterschiedlichen Bildschirmauflösungen erscheinen würde.
   • Show Web Inspector: Startet die Hauptschnittstelle für Safaris Entwicklungstools, die normalerweise am unteren Rand Ihres Browserbildschirms platziert wird und die folgenden Abschnitte enthält: Elemente, Netzwerk, Ressourcen, Zeitachsen, Debugger, Speicher, Konsole.
   • Fehlerkonsole anzeigen: Startet auch die Dev-Tools-Oberfläche, direkt zur Konsolenregisterkarte, die Fehler, Warnungen und andere durchsuchbare Informationen anzeigt Protokolldaten.
   • Seitenquelle anzeigen: Öffnet die Registerkarte Ressourcen, die den Quellcode für die aktive Seite kategorisiert nach dem Dokument anzeigt.
   • Seitenressourcen anzeigen: Führt dieselbe Funktion aus wie die Option Seitenquelle anzeigen.
   • Snippet-Editor anzeigen: Öffnet ein neues Fenster, in das Sie CSS- und HTML-Code eingeben können, und zeigt die Ausgabe direkt in der Vorschau an.
   • Show Extension Builder: Bietet die Möglichkeit, Safari-Erweiterungen mit CSS, HTML und JavaScript zu erstellen oder zu bearbeiten.
   • Timeline-Aufzeichnung anzeigen: Öffnet die Registerkarte Timelines und beginnt mit der Anzeige von Netzwerkanfragen, Layout- und Rendering-Informationen sowie der JavaScript-Ausführung in Echtzeit.
   • Leere Caches: Löscht den gesamten Cache, der derzeit auf Ihrer Festplatte gespeichert ist.
   • Caches deaktivieren: Verhindert das Caching von Safari, sodass alle Inh alte bei jedem Laden der Seite vom Server abgerufen werden.
   • Bilder deaktivieren: Verhindert, dass Bilder auf allen Webseiten dargestellt werden.
   • Stile deaktivieren: Ignoriert CSS-Eigenschaften, wenn eine Seite geladen wird.
   • JavaScript deaktivieren: Schränkt die Ausführung von JavaScript auf allen Seiten ein.
   • Erweiterungen deaktivieren: Verbietet die Ausführung aller installierten Erweiterungen im Browser.
   • Site-spezifische Hacks deaktivieren: Wenn Safari so modifiziert wurde, dass es explizit Probleme behandelt, die für die aktive Webseite spezifisch sind, blockiert diese Option diese Änderungen, sodass die Seite Lasten wie vor der Einführung dieser Änderungen.
   • Lokale Dateibeschränkungen deaktivieren: Ermöglicht dem Browser den Zugriff auf Dateien auf Ihren lokalen Festplatten, eine Aktion, die aus Sicherheitsgründen standardmäßig eingeschränkt ist.
   • Cross-Origin-Einschränkungen deaktivieren: Diese Einschränkungen werden standardmäßig eingerichtet, um XSS und andere potenzielle Gefahren zu verhindern. Sie müssen jedoch häufig zu Entwicklungszwecken vorübergehend deaktiviert werden.
   • JavaScript aus intelligentem Suchfeld zulassen: Wenn aktiviert, ermöglicht es die Eingabe von URLs mit Javascript: direkt in die Adressleiste integriert.
   • SHA-1-Zertifikate als unsicher behandeln: SSL-Zertifikate, die den SHA-1-Algorithmus verwenden, gelten allgemein als ver altet und anfällig.