So verwenden Sie Webbrowser-Entwicklerwerkzeuge

Integrierte Toolsets für Webdesigner, Entwickler und Tester

Neben den meisten Browserherstellern, die sich auf den täglichen Benutzer konzentrieren, der im Internet surfen möchte, richten sie sich auch an Webentwickler, Designer und Qualitätssicherungsexperten, die beim Aufbau der Anwendungen und Websites helfen, auf die diese Benutzer zugreifen, indem sie leistungsstarke Tools direkt in die Browser selbst integrieren.

Vorbei sind die Zeiten, in denen die einzigen Programmier- und Testwerkzeuge, die in einem Browser zu finden sind, es Ihnen ermöglichten, den Quellcode einer Seite anzuzeigen und nicht mehr. Heutige Browser ermöglichen es Ihnen, einen viel tieferen Einblick zu erhalten, indem Sie Dinge wie das Ausführen und Debuggen von JavaScript-Schnipseln, das Inspizieren und Bearbeiten von DOM-Elementen, das Überwachen des Echtzeit-Netzwerkverkehrs, während Ihre App oder Seite geladen wird, um Engpässe zu identifizieren, das Analysieren der CSS-Leistung, das Sicherstellen, dass Ihr Code nicht zu viel Speicher oder zu viele CPU-Zyklen verwendet, und vieles mehr.

Aus Testperspektive können Sie durch die Magie des reaktionsschnellen Designs und der integrierten Simulatoren reproduzieren, wie eine App oder Webseite in verschiedenen Browsern sowie auf verschiedenen Geräten und Plattformen dargestellt 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 Entwicklerwerkzeuge in mehreren gängigen Webbrowsern.

Google Chrome

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

Klicken Sie auf die Hauptmenü-Taste von Chrome, die mit drei horizontalen Linien markiert ist und sich in der oberen rechten Ecke des Browsers befindet.

Wenn das Dropdown-Menü angezeigt wird, fahren Sie mit dem Mauszeiger über die Option Weitere Werkzeuge.

Es sollte nun ein Untermenü erscheinen. Wählen Sie die Option mit der Bezeichnung Developer tools. Sie können anstelle dieses Menüpunktes auch die folgende Tastenkombination verwenden: Chrome OS/Windows (STRG+Umschalt+I), Mac OS X (ALT(OPTION)+COMMAND+I)

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

Elemente: Bietet die Möglichkeit, CSS- und HTML-Code zu inspizieren sowie CSS on-the-fly zu bearbeiten und die Auswirkungen Ihrer Änderungen in Echtzeit zu sehen.

Konsole: Die JavaScript-Konsole von Chrome ermöglicht die direkte Befehlseingabe sowie das Diagnose-Debugging.

Quellen: Ermöglicht es Ihnen, JavaScript-Code über eine leistungsstarke grafische Oberfläche zu debuggen.

Netzwerk: Kategorisiert und zeigt detaillierte Informationen über jeden zugehörigen Vorgang auf der aktiven Anwendung oder Seite an, einschließlich vollständiger Anfrage- und Antwortköpfe sowie erweiterter Timing-Metriken.

Zeitachse:

Ermöglicht eine detaillierte Analyse jeder Aktivität, die im Browser stattfindet, sobald eine Ladeaufforderung für Seiten oder Anwendungen eingeleitet wird.

Zusätzlich zu diesen Abschnitten können Sie auch auf die folgenden Werkzeuge über das Symbol >> zugreifen, das sich rechts neben der Registerkarte Timeline befindet.

Profil: Unterteilt in die Abschnitte CPU-Profiler und Heap-Profiler, bietet es eine umfassende Speichernutzung und die gesamte Ausführungszeit der aktiven Anwendung oder Seite.

Sicherheit: Hervorhebung von Zertifikatsproblemen und anderen sicherheitsrelevanten Problemen mit der aktiven Seite oder Anwendung.

Ressourcen: Hier können Sie Cookies, lokale Speicher, App-Cache und andere lokale Datenquellen einsehen, 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.

Der 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 erscheint, darunter mehrere bekannte Android- und iOS-Modelle wie das 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 Handy-Symbol direkt links von der Registerkarte Elemente.

Sie können das Aussehen Ihrer Entwicklerwerkzeuge auch anpassen, indem Sie zunächst auf die Menüschaltfläche klicken, 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 Werkzeuge ein- oder ausblenden sowie erweiterte Elemente wie z. B. einen Geräteinspektor starten. Sie werden feststellen, dass die Oberfläche der Entwicklungswerkzeuge selbst über die Einstellungen in diesem Abschnitt sehr anpassbar ist.

So blockieren Sie Pop-Up-Werbung in Ihrem Webbrowser

Das Betrachten oder Hören von Werbung ist manchmal unvermeidlich, wenn man im Internet surft. Dies gilt insbesondere, wenn Sie Websites besuchen, die Inhalte oder Dienste kostenlos zur Verfügung stellen. Nichts Lohnenswertes kann völlig kostenlos sein, daher ist die Begegnung mit Anzeigen oft Teil des Kompromisses. Befolgen Sie die folgenden Schritte, um Anzeigen in Ihrem Browser zu blockieren, und Sie können vermeiden, dass sie vorwärts gehen.

Die meisten modernen Browser-Anbieter verfügen über einen integrierten Popup-Blocker, mit dem Sie einige oder alle dieser potenziellen Ablenkungen vom Öffnen ausschließen können. Obwohl das Gesamtkonzept durchgängig ähnlich ist, behandelt jeder Browser die Popup-Steuerung unterschiedlich.

Blockade von Anzeigen in Google Chrome

Chrome OS, Linux, Mac OS X, macOS Sierra und Windows

Geben Sie den folgenden Befehl in die Adressleiste von Chrome (auch bekannt als die Omnibox) ein: chrome://settings/content und drücken Sie die Enter-Taste.

Die Inhalts-Einstellungsoberfläche von Chrome sollte nun angezeigt werden, die Ihr Hauptfenster überlagert. Scrollen Sie nach unten, bis Sie den Abschnitt mit der Bezeichnung Pop-ups finden, der die folgenden beiden Optionen enthält, die von Auswahlknöpfen begleitet werden.

Erlauben Sie allen Seiten, Popups anzuzeigen: Ermöglicht es jeder Website, Popups in Chrome anzuzeigen.

Lassen Sie nicht zu, dass eine Website Popups anzeigt: Die Standardeinstellung verhindert, dass alle Popup-Fenster angezeigt werden.

Ebenfalls im Abschnitt Popups finden Sie eine Schaltfläche mit der Bezeichnung Ausnahmen verwalten. Wenn Sie auf diese Schaltfläche klicken, werden bestimmte Domänen angezeigt, in denen Sie Popups in Chrome zugelassen oder blockiert haben. Alle Einstellungen innerhalb dieser Schnittstelle überschreiben die oben beschriebenen Auswahlknöpfe. Um ein Element aus der Ausnahmeliste zu entfernen, klicken Sie auf das’X‘ ganz rechts in der jeweiligen Zeile. Um das Verhalten für eine bestimmte Domäne vom Zulassen zum Blockieren oder umgekehrt zu ändern, treffen Sie die entsprechende Auswahl aus dem zugehörigen Dropdown-Menü. Sie können eine neue Domäne auch manuell zur Liste hinzufügen, indem Sie ihre Adresssyntax in der Spalte Hostname Muster eingeben.

Wenn Sie mit Ihren Popup-Blocker-Einstellungen zufrieden sind, klicken Sie auf die Schaltfläche Fertig, um zur Hauptbrowseroberfläche zurückzukehren.

Alternativ können Sie auch in die Chrome-Einstellungsoberfläche gehen.

(Klicken Sie auf die drei Punkte in der oberen rechten Ecke und dann auf Einstellungen im Dropdown-Menü.

Scrollen Sie nach unten und klicken Sie auf Erweitert.
Klicken Sie auf Inhaltseinstellungen.
Klicken Sie auf Popups und Weiterleitungen.
Schalten Sie den Schieberegler/Schalter für Blockiert ein.
Fügen Sie alle ausgeschlossenen Websites unter Zulassen hinzu.
Du bist fertig.

Android und iOS (iPad, iPhone, iPod touch)

Wählen Sie die Hauptmenü-Schaltfläche von Chrome, die durch drei vertikal platzierte Punkte dargestellt wird und sich in der oberen rechten Ecke des Browserfensters befindet.
Wenn das Dropdown-Menü angezeigt wird, tippen Sie auf Einstellungen.

Die Einstellungsoberfläche von Chrome sollte nun sichtbar sein. Wählen Sie die Option Inhaltseinstellungen unter iOS oder die Option Standorteinstellungen unter Android, beide im Abschnitt Erweitert.

iOS-Benutzer: Die erste Option in diesem Abschnitt, Block Pop-ups genannt, steuert, ob der Popup-Blocker aktiviert ist oder nicht. Wählen Sie diese Option. Eine weitere Option mit der Bezeichnung Block Pop-ups sollte erscheinen, diesmal begleitet von einer Schaltfläche. Um den Popup-Blocker von Chrome ein- und auszuschalten, tippen Sie einfach auf diese Schaltfläche. Wählen Sie den Link Fertig, um zu Ihrer Browsersitzung zurückzukehren.

Android-Benutzer: Der Bildschirm mit den Standorteinstellungen sollte nun sichtbar sein und über ein Dutzend konfigurierbare standortspezifische Optionen auflisten. Scrollen Sie bei Bedarf nach unten und wählen Sie Pop-ups. Die Option Pop-ups ist nun sichtbar, begleitet von einer Ein/Aus-Taste. Tippen Sie auf diese Schaltfläche, um die Popup-Blockierfunktion von Chrome umzuschalten.

Chrome für Android ermöglicht es Ihnen auch, die Popup-Blockierung für einzelne Websites zu ändern. Wählen Sie dazu zunächst die Option Alle Standorte auf dem Bildschirm Standorteinstellungen. Wählen Sie anschließend die Website aus, die Sie ändern möchten. Wiederholen Sie schließlich die obigen Schritte, um Popups für diese spezielle Website zu aktivieren oder zu deaktivieren.

Blockieren von Anzeigen in Microsoft Edge (nur Windows)

Klicken Sie auf die Schaltfläche Hauptmenü, die sich in der oberen rechten Ecke befindet und durch drei horizontal ausgerichtete Punkte dargestellt wird.

Wenn das Dropdown-Menü angezeigt wird, scrollen Sie nach unten und klicken Sie auf Einstellungen.
Die Einstellungsoberfläche von Edge sollte nun sichtbar sein und einen Teil des Hauptfensters Ihres Browsers überlagern.

Klicken Sie auf das Symbol für die Datenschutz- und Sicherheitseinstellungen (sieht aus wie ein Vorhängeschloss).

Scrollen Sie nach unten zum Abschnitt Sicherheit.

Es gibt eine Option mit der Bezeichnung Block-Popups, die von einer On/Off-Taste begleitet wird. Wählen Sie diese Schaltfläche, um die Popup-Blockierfunktion im Edge-Browser zu aktivieren oder zu deaktivieren.

Blockieren von Anzeigen in Internet Explorer 11 (nur Windows)

Klicken Sie auf das Zahnradsymbol, auch bekannt als das Aktionsmenü, das sich in der oberen rechten Ecke des IE11-Hauptfensters befindet.

Wenn das Dropdown-Menü angezeigt wird, klicken Sie auf Internetoptionen.

Der Dialog Internetoptionen sollte nun sichtbar sein und Ihr Browserfenster überlagern. Klicken Sie auf die Registerkarte Datenschutz.