Die Geheimnisse der Browser-Entwicklertools

<p>1. Die Console kann viel mehr als nur `log()`<br /> - Filteroptionen<br /> - {} : Variablenwert und -name zusammen ausgeben<br /> - `warn()`/`info()`/`error()` : Log-Level<br /> - `assert()` : nur ausgeben, wenn eine bestimmte Bedingung erfüllt ist<br /> - `trace()` : wer hat es aufgerufen?<br /> - `group()` : Meldungen gruppieren und ein-/ausklappbar machen<br /> - `table()` : Informationen als Tabelle ausgeben<br /> - `$()` = `document.querySelector()`, `$$()` = `document.querySelectorAll()`<br /> &nbsp;&nbsp;`$$('a').map(a =&gt; {`<br /> &nbsp;&nbsp;&nbsp;`return {url: a.href, text: a.innerText}`<br /> &nbsp;&nbsp;`})`<br /> <br /> 2. Logs hinterlassen, ohne auf den Quellcode zuzugreifen<br /> - Live Expressions : in Echtzeit veränderte Variablenwerte prüfen<br /> - Logpoints : eine besondere Form von Breakpoints, die beim Ausführen der betreffenden Zeile Logs ausgeben. Technisch gesehen kann man damit `console.log` überall auf der Webseite hinzufügen<br /> <br /> 3. Logs außerhalb des Browsers hinterlassen<br /> - VS Code Debugger<br /> <br /> 4. Code in jede beliebige Website injizieren (Chromium-Browser: Edge, Chrome, Brave ...)<br /> - Snippets : Skripte für die aktuelle Website ausführen<br /> - Overrides : eine Kopie eines Remote-Skripts speichern, bearbeiten und dann beim Laden der Seite überschreiben lassen<br /> <br /> 5. An noch mehr Stellen Inspect &amp; Debug nutzen (Chromium-Browser)<br /> - Alle Electron-basierten Apps werden unterstützt : GitHub Desktop, VS Code, sogar die Developer Tools des Browsers selbst lassen sich mit Developer Tools debuggen<br /> - MS Edge Tools for VS Code<br /> <br /> 6. Die unschönen Geheimnisse<br /> - Die meisten Leute nutzen nur einen Teil der Entwicklertools. Vermutlich liegt das an der unzureichenden Dokumentation. Es wurde viel Zeit in Dokumentation investiert, aber das scheint keine echte Lösung zu sein<br /> - Entwicklertools werden immer komplexer, und man wird von den vielen Funktionen schnell überwältigt. Gibt es keinen Weg, das zu verbessern?<br /> &nbsp;→ Edge will dafür einen Focus Mode einführen. Statt alle Funktionen zu zeigen, werden nur die für den jeweiligen Use Case nötigen Tools angezeigt<br /> &nbsp;→ Außerdem wird an Informational Overlays gearbeitet. Das sind direkt in den Entwicklertools sichtbare Hilfen<br /> - Zwischen dem Schreiben von Code und dem Debuggen des fertigen Ergebnisses gibt es noch immer eine Lücke<br /> &nbsp;→ Wie lassen sich Änderungen aus den Browser-Entwicklertools in den Code zurückschreiben?<br /> &nbsp;→ Ein Ansatz ist, die Entwicklertools durch VS Code zu ersetzen, sodass bei der Nutzung Dateien auf der Festplatte direkt geändert werden<br /> &nbsp;→ Ein anderer Ansatz ist, dies als Teil einer VS Code-Erweiterung auswählbar zu machen, damit Änderungen über die Entwicklertools ebenfalls Dateien auf dem Datenträger ändern können<br /> <br /> 7. Du bist sowohl Zielgruppe als auch Client der Entwicklertools<br /> &nbsp;→ Feedback geben, z. B. über Report a Bug / Request a Feature </p>

[galadbran]

<p>Aus einer etwas anderen Perspektive betrachtet haben Nutzer und Entwickler dieselben Werkzeuge. Deshalb müssen Web-Apps wohl besonders darauf achten, mit trickreichen und böswilligen Nutzern umzugehen.</p>

[laeyoung]

<p>Artikel zu `console.log()`<br /> - https://javascript.plainenglish.io/stop-using-console-log-in-javascrip…;

[kleinstein]

<p>Auch wenn es gute Funktionen gibt, scheint es eine große Rolle zu spielen, ob die Dokumentation gute Beispiele enthält oder nicht.</p>