Kleine Hacks mit den Entwicklertools von Chrome und Firefox

Inhaltsverzeichnis

Mit F12 öffnet man im Browser einen riesigen Werkzeugkasten, der eigentlich für Web-Programmierer gedacht ist. Entwickler können damit etwa Fehler in ihren JavaScript-Skripten aufspüren oder untersuchen, welche Performance-Probleme die zügige Darstellung ihrer Anwendungen ausbremsen.

Es lohnt sich aber auch für normale Surfer, die Entwicklertools auszuprobieren. Dieser Beitrag präsentiert einige Tricks, die Sie damit verwirklichen können: etwa Webseiten nach Gutdünken aufhübschen oder ihre Inhalte austauschen, sich Vorteile bei seinen Lieblings-Browserspielen verschaffen oder Multimedia-Dateien herunterladen.

Ganz nebenbei lernt man beim Umgang mit den Entwickler-Werkzeugen etwas über den Aufbau und die Funktionsweise von Webseiten, den Ablauf von JavaScript-Programmen – und die Arbeit mit den Entwicklertools selbst. Alle Beispiele haben wir mit Firefox und Chrome getestet. Sie sollten auch mit den Chromium-Geschwistern funktionieren, also etwa mit Opera und Vivaldi. Eine vollständige Anleitung für die Programmierwerkzeuge kann dieser Artikel indes nicht ersetzen. Sie finden diese auf den Homepages von Chrome und Firefox.

Wo finden sich die Entwicklerwerkzeuge im Browser?

Bei beiden Browsern lassen sich die Entwicklerwerkzeuge über das Menü starten. Bei Chrome (Download) findet sich der Menüeintrag unter Weitere Tools/Entwicklertools, bei Firefox (Download) unter Web-Entwickler/Werkzeuge ein-/ausblenden. Schneller geht es mit der F12-Taste, die man auch zum Ausblenden benutzt.

Wenn Sie die Entwicklungshelfer zum ersten Ma startenl, stehen Sie wahrscheinlich zunächst einmal wie der Ochs vorm Berg da: Ein Fenster nimmt plötzlich einen Größenteil der Bildschirmfläche ein. Es beherbergt viele kryptisch anmutende Menüeinträge: "Elements", "Console", "Sources" et cetera bei Chrome, "Inspektor", "Konsole", "Debugger" bei Firefox.

Richten Sie sich erst einmal häuslich ein: Bei beiden Browsern legen Sie mit dem Drei-Punkte-Menü (zu finden rechts oben in der Menüleiste der Entwicklerwerkzeuge) fest, wo sich die Entwicklerfunktionen ans normale Browserfenster andocken sollen – rechts, links oder unten. Alternativ können Sie die Tools auch in einem eigenen Fenster über dem Browserfenster schweben lassen.

Webseitenstrukturen aufschlüsseln

Die Entwicklertools geben einen tiefen Blick in den Maschinenraum des Browsers. Ihre wahrscheinlich meistbenutzte Funktion nennt sich Elements (Chrome) beziehungsweise Inspektor (Firefox). Diese schlüsselt die innere Struktur einer Webseite auf, das sogenannte Document Object Model, kurz: DOM. Dabei handelt es sich um einen hierarchischen Baum, dessen Äste einzelnen HTML-Tags entsprechen.

Die Browser stellen diesen DOM-Baum mit seinem HTML-Quelltext so dar, dass man die Teilbäume nach Belieben auf- und zuklappen kann. Klicken Sie auf einen Teilbaum – sprich: ein Tag –, hebt der Browser im "normalen" Browser-Fenster denjenigen Bereich hervor, der dem Tag entspricht. Probieren Sie das aus und entdecken Sie, welche HTML-Tags zu welchen Bereichen einer Seite gehören!

Der Abgleich zwischen der gerenderten Webseite und dem DOM-Baum lässt sich auch andersherum bewerkstelligen, und zwar mit dem Werkzeug, das bei den Entwicklertools beider Browser wie ein Mauscursor aussieht und sich in der Menüleiste oben links befindet. Klicken Sie dazu mit der Maus in der Webseite herum – der Browser hebt den Teil des Codes, der dem mit der Maus überfahrenen Teil der Seite entspricht, in den Entwicklerwerkzeugen hervor oder klappt ihn aus.

Entwickler nehmen mit diesem Hilfsmittel direkt im Browser Veränderungen am Code vor, um zu sehen, wie sich das auf die Website auswirkt. Diese Funktion können Sie ebenso nutzen. Rufen Sie Ihre Lieblingssite auf und wählen Sie eine Schlagzeile aus. Im Quelltext lässt sie sich nun ändern.

Die Zuordnung zwischen Webseiten-Text und Quellcode ist nicht immer eindeutig. Spiegel-Online-Schlagzeilen etwa tauchen nicht nur in der eigentlichen Schlagzeile <span class="headline"> … </span> auf, sondern auch im zugehörenden Link, der mit <a href="…" title="…"> ausgezeichnet ist. Spielen Sie ein wenig mit dem Quelltext herum und probieren Sie aus, welche Änderungen sich wo bemerkbar machen.

Ihre Änderungen wirken sich natürlich nicht auf dem Server aus, sondern nur lokal in Ihrem Browser. Wenn Sie Lust haben, tauschen Sie auch die Bilder aus und gestalten Sie die gesamte Website nach Ihren Vorstellungen um: Eine Hochzeitszeitung im Layout von sueddeutsche.de – kein Problem. Beachten Sie aber, dass Änderungen nur bis zum nächsten Reload erhalten bleiben: Für größere Umgestaltungsprojekte arbeiten Sie besser mit einer lokalen Kopie der Webseite.

Die Entwicklertools lassen sich auch nutzen, um störende Elemente aus der Website zu entfernen: Der Website-Betreiber nervt mit einem Overlay ("Die Website wurde aktualisiert"), das die Hochzeitszeitung verunstalten würde? Identifizieren Sie es per Maus und löschen Sie es aus dem Quelltext!

Sofern man nicht auf einer lokalen Kopie einer Seite arbeitet, weist nichts darauf hin, dass man Veränderungen vorgenommen hat: Im Browser-Fenster sieht die Seite so aus, als stamme sie so vom Server, und auch beim Ausdruck wird die Original-URL mit angegeben. Behalten Sie also im Hinterkopf, dass man kein Profi sein muss, um Webseiten zu fälschen, wenn Ihnen das nächste Mal ein Screenshot als Beweis vorliegt.

Webansicht simulieren

Für Web-Entwickler, die ihre Seiten auf verschiedenen Gerätetypen testen wollen, bieten die Developer-Tools diverse Möglichkeiten, Smartphones und Tablets zu simulieren. So kann man sich anzeigen lassen, wie eine Web-Seite etwa auf einem iPhone X aussehen würde. Die Browser senden dazu nicht nur den passenden User-Agent an den Server, sondern sie bilden auch die charakteristische Ein- und Ausgabeumgebung nach.

Das ändert die Bildschirmgröße und auch der Mauszeiger verwandelt sich in einen kleinen Kreis, mit dem man die typischen Tap- und Wischgesten durchführt. Auch ein Rotieren des Geräts ist vorgesehen. In den Optionen der Funktion passt man die Verbindungsqualität auf langsames 3G an, um das Laden der Seite aus Sicht eines mobilen Nutzers nachzustellen.

Das von den Browsern simulierte Smartphone kommt gerade recht, wenn etwa ein Website-Betreiber manche Inhalte nur für bestimmte Geräte bereitstellt. Phishige Web-Seiten etwa fordern manchmal dazu auf, einen Link doch bitte sehr in seinem Smartphone zu öffnen. Wer sich das nicht traut, etwa weil er Böses vermutet, kann spicken, was die Seite da bereithält.

Dazu klicken Sie in Chrome links oben auf das Symbol mit dem stilisierten Handy+Tablet-Icon. Bei Firefox drücken Sie Strg+Umsch+M und wählen in der erscheinenden Dachzeile der Webseite das gewünschte Device aus. Anschließend präsentiert der Browser diese im Tablet- oder Smartphone-Outfit.

Auf einer etwas merkwürdig erscheinenden Seite wurde uns etwa eine .mobileconfig-Datei zum Download angeboten. Mit einem echten iPhone hätten wir nur die Wahl zwischen Ablehnen oder Installieren des Profils gehabt. Mit Chrome konnten wir die Datei speichern und entdeckten, ohne ein Risiko einzugehen, dass diese unter anderem ein Entwickler-Zertifikat auf dem Gerät installieren wollte – mit dem Angreifer hätten Unfug anstellen können.

Dateitypen im Browser identifizieren

Aus wie vielen Dateien besteht eigentlich eine Webseite? Das erschließt sich mit der Funktion Network (Chrome) beziehungsweise Netzwerkanalyse (Firefox). Rufen Sie eine neue Seite auf, listen die Browser hier detailliert, welche Dateien sie laden. Dabei zeigen sie neben dem Dateinamen und dem Typ auch die Größe an.

Die Ansicht lässt sich bei beiden Browsern auf bestimmte Dateitypen einschränken, bei Chrome ist zudem die Wasserfall-Ansicht aufschlussreich. Sie zeigt an, in welcher Reihenfolge der Browser alle für die Seite benötigten Ressourcen lädt. Dabei erschließt sich auf einen Blick, welche Dateien lange laden – etwa weil sie von einem langsamen Server stammen oder besonders groß sind.

Die Netzwerkansichten lassen sich nutzen, um ganz ohne Add-ons Mediendateien aus Websites herauszuprokeln, etwa Videos. Das ist nicht immer trivial, gerade wenn es sich um Videos handelt, die die Webseite durch einen eigenen Player zur Laufzeit einbindet und abspielt.

Da reicht eine einfache Suche nach der URL im HTML-Quelltext nicht mehr – aber mit der Netzwerkansicht kommt man oft weiter. Die größte Herausforderung besteht darin, dort das richtige Element zu lokalisieren. Bei Videos können Sie sich an der Größe der Datei beziehungsweise bei Chrome auch recht einfach an der Länge des Ladebalkens im "Waterfall" orientieren.

Dann klicken Sie den Eintrag mit der rechten Maustaste an und wählen "Copy/Copy as cURL" (Chrome) oder "Kopieren\Als cURL-Adresse kopieren" (Firefox). Damit legen Sie einen kompletten curl-String im Zwischenspeicher, den Sie via Shift-Strg-V (Linux) oder Strg-V (Windows) in ein Kommandozeilenfenster einfügen können.

Das Schicke an dem Web-Entwickler-Befehl ist, dass er nicht nur die korrekte URL, sondern auch gleich alle wichtigen Parameter enthält. Dazu gehören insbesondere User-Agent, Referer und Authentifizierungs-Token.

Mit curl Videos downloaden

curl ist ein sehr flexibles Download-Tool, das ursprünglich für die Linux-Kommandozeile entwickelt wurde. Es gibt auch eine Windows-Version und in Windows 10 ist curl sogar eingebaut – allerdings in der veralteten Version 7.55.1. Sie nutzt die libcurl-Version mit derselben Versionsnummer, die mit komprimierten Verbindungen nicht klarkommt. Sie sollten daher die aktuelle curl-Version 7.61.1 herunterladen und verwenden.

Mit den vom Browser übergebenen Parametern ist der curl-Download für den Server quasi ununterscheidbar von einem Abruf durch den Browser. In manchen Fällen findet sich in der URL noch ein bestimmter Startzeitpunkt (Offset) oder ein bestimmter Zeitabschnitt (Range) des Videos im Anforderungsstring als Parameter angegeben. So etwas schneiden Sie am besten heraus.

Normalerweise schreibt curl seine Ausgabe nach Standard-Out – also direkt ins Terminalfenster. Das leitet man besser in eine Datei um, etwa indem man > output.mp4 anhängt. Den korrekten Dateityp entnehmen Sie der URL.

Das Verfahren funktioniert auf vielen Web-Seiten. Nervig wird es allerdings, wenn das Video aus vielen kleinen Downloads besteht, die der Player nacheinander abspielt. Das macht etwa die von Heise verwendete Content Distribution Plattform. Da muss man dann alle Blöcke herunterladen und selbst "zusammenkleben". An seine Grenzen stößt der Hack, wenn etwa wie bei Netflix noch Kopierschutz-Mechanismen zum Einsatz kommen, bei denen ein spezielles "Content Decryption Module" den Inhalt vor der Anzeige noch entschlüsselt.

Die Entwicklertools ermöglichen auch die Fehlersuche in JavaScript-Programmen. Das betreffende Werkzeug nennt sich Debugger bei Firefox, mit Chrome benutzen Sie am besten die Sources-Ansicht.

Universal Paperclips manipulieren

Diese Hilfsmittel verschaffen Ihnen auch ein paar Vorteile beim Spiel Universal Paperclips. Falls Sie es noch nicht kennen: Es ist ein sogenanntes Klickspiel, oder neudeutsch Cookie Clicker. Der Spieler hat zu Beginn ein wenig Draht, aus dem er Büroklammern herstellt – eine Büroklammer pro Mauslick. So erwirtschaftet er Geld, mit dem er sich Maschinen für die automatische Produktion kauft. Nach und nach muss er sich um immer mehr Ressourcen kümmern, etwa schnellere Maschinen, zusätzliche Computerleistung und Marketing-Expertise. Obwohl oder vielleicht auch weil das Spiel so einfach gestrickt ist – ein Browser-Fenster und ein paar Schaltflächen müssen als Bedienoberfläche genügen – birgt es reichlich Suchtgefahr.

Firefox zeigt die zum Spiel gehörenden JavaScript-Daten unter dem Tab "Quellen" an, Chrome stellt sie im Baum links unter "top/www.decisionproblem.com/paperclips" dar. Für diesen Artikel ist nur die Datei main.js relevant.

Der Entwickler benutzt sprechende Variablennamen, etwa "clips" für die Anzahl der produzierten Drahteinheiten. Sie haben erst 5000 Clips produziert und hätten gerne 200.000? Kein Problem: Gehen Sie einfach in die Konsole. Falls diese nicht sichtbar ist, können Sie sie über das Drei-Punkte-Menü einblenden. Sobald Sie dort

clips = 200000

eingegeben haben, haben Sie einen neuen Spielstand. Hausaufgabe: Erhöhen Sie Ihre Geldmittel.

Ein wenig kniffeliger ist die Situation bei den Drahtvorräten (wire). Theoretisch könnte man sich auch hier einen riesigen Vorrat anlegen. Aber Autoclicker, die die Produktion im Hintergrund erledigen, bauen den Berg nach und nach ab. Und dann ruht die Produktion – ärgerlich, wenn das Spiel in einem Hintergrund-Tab läuft und man die Stagnation nicht bemerkt. Daher muss man ein wenig im Code tricksen.

Mit F3 durchsuchen Sie den Quellcode im Volltext. Fahnden Sie nach "wire", findet Firefox 68 Treffer. Chrome liefert mehr als 500 Treffer, weil es standardmäßig auch nach Teilwörtern fahndet. Erst wenn Sie hier mit der Option "reguläre Ausdrücke" nach "\bwire\b" suchen, erhalten Sie auch hier die wesentlich besser handhabbaren 68 Treffer.

Die Fundstellen 10 und 11 entsprechen der Zeile 2339:

wire = wire - number;

Sie liegt in der Funktion clipClick(), die offenbar für die automatischen Klicks zuständig ist, und ist die einzige Stelle im Code, bei der die wire-Anzahl verringert wird.

Hier ist also ein guter Punkt, um einzugreifen. Das lässt sich mit einem Breakpoint erreichen. Klicken Sie auf die Zeile 2340 und legen Sie per Kontextmenü einen "Bedingten Haltepunkt" (Firefox) beziehungsweise "Add conditional breakpoint" hinzu.

Breakpoints sind eigentlich Werkzeuge, mit dem Entwickler die Ausführung von Programmen an bestimmten Stellen im Code unterbrechen können, um etwa die Belegung bestimmter Variablen zu überprüfen. Bei bedingten Breakpoints muss zusätzlich eine Bedingung erfüllt sein.

Setzen Sie nun

(wire = 1000) * 0

als Bedingung ein. Das führt zu zweierlei: Die Variable wire erhält bei jedem Durchlauf von clipClick() den Wert 1000 zugewiesen. Durch die Multiplikation mit 0 ergibt sich als Wert der Bedingung zudem immer false. Das Programm unterbricht also nie, und Ihre Büroklammer-Produktion hat permanent genügend Drahtvorräte.

Auf diese Weise kann man das Programm noch auf viele andere Weise modifizieren. Zweite Hausaufgabe: Erhöhen Sie den Output der Funktion clipClick() auf das Doppelte. Vielleicht haben Sie ja mit unseren kleinen Tricks Lust auf mehr bekommen. Wir würden uns auf jeden Fall über Rückmeldung Ihrer Lieblingshacks mit den Browser-Tools freuen. (jo)