Wikipedia:Technik/Browser/Entwicklerwerkzeuge

Entwicklerwerkzeuge im Browser

Diese Projektseite beschreibt Entwicklerwerkzeuge in Webbrowsern, die bei der Fehlersuche in vom Wiki-Server generierten HTML-Seiten, dem enthaltenen CSS und der Programmierung mit JavaScript unterstützen. Heutzutage sind in allen Browsern (zumindest für den Desktop) mehr oder weniger umfangreiche Werkzeuge standardmäßig vorhanden; notfalls weitere per Add-On zusätzlich aktivierbar.

HTML und CSS

Etwas wie ein „HTML-Inspektor“ bereitet den HTML-Quelltext, den der Wiki-Server ausgeliefert hatte und der möglicherweise noch beim Leser dynamisch umgestaltet wurde, optisch ansprechend auf und formatiert die HTML-Syntax.

Ganze Elemente lassen sich im Inspektor ein- und ausklappen, wodurch die Baumstruktur übersichtlich wird.
Die Attribute innerhalb von Elementen lassen sich ändern, auch die Basis-Textfragmente, und ganze Elemente lassen sich neu einfügen oder löschen. Die Auswirkung auf die dargestellte Seite kann simultan beobachtet werden.
Das gilt sowohl für die HTML-Elemente wie auch für die darauf wirksamen CSS-Deklarationen.

Aus der aktuell dargestellten Seite im Browser kann etwa mittels eines Menüs der rechten Maustaste genau derjenige Zweig der Baumstruktur im Inspektor geöffnet werden, der an eben dieser Stelle für die Darstellung verantwortlich ist.

Nachstehend ein typischer HTML-Baum für den Beginn des Einleitungsabschnitts für einen Artikel.

<html>
  <head></head>
  <body class="mediawiki ltr skin-vector action-view">
    <div id="content" class="mw-body" role="main">
      <a id="top"></a>
      <div id="siteNotice" class="mw-body-content"></div>
      <div class="mw-indicators mw-body-content"></div>
      <h1 id="firstHeading" class="firstHeading" lang="de"></h1>
      <div id="bodyContent" class="mw-body-content">
        <div id="siteSub" class="noprint"></div>
        <div id="contentSub"></div>
        <div id="jump-to-nav"></div>
        <a class="mw-jump-link" href="#mw-head"></a>
        <a class="mw-jump-link" href="#p-search"></a>
        <div id="mw-content-text" class="mw-content-ltr" lang="de">
          <div class="mw-parser-output">
            <div class="thumb tright"></div>
            <p>
            Das
            <b></b>
            (
            <span style="font-style:normal;font-weight:normal"></span>
            <span lang="ga-Latn" style="font-style:italic"></span>
            ,
            </p>
            ...
            ...
            ...
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

JavaScript

Abkürzung:
WP:JS/WZ

Fehlermeldungen

Je nach Browser und auch Add-Ons gibt es Möglichkeiten zur Fehlerdiagnostik; etwa die „Fehlerkonsole“ (Browser-Konsole) beim Firefox. Hier werden bei der Ausführung Syntaxfehler angezeigt; es empfiehlt sich daher, zur Entwicklung derartige Anzeigefenster geöffnet zu halten.

Diese Informationen sind auch wichtig, wenn du einem Entwickler über ein Problem mit dessen Skript berichtest.

Chrome: Fehlerkonsole öffnen: Strg+Umschalt+J oder [Tools]→[JavaScript-Konsole]
Firefox:
- Browser-Konsole (bis FF23: „Fehlerkonsole“) öffnen: [Extras]→[Web-Entwickler]→[Browser-Konsole] oder Strg+Umschalt+J
- ab FF4 zusätzlich: Neue Konsole Strg+Umschalt+K (inzwischen zusammengelegt mit der „Browser-Konsole“)
Internet Explorer: In der Statusleiste erscheint ein gelbes Warndreieck mit Ausrufezeichen; Text „Fehler auf der Seite“. Dieses anklicken, es erscheint ein Meldungsfenster. Dort „Details“ oder „Fehlerdetails kopieren“. – Es kann auch ein Häkchen gesetzt werden bei „Diese Meldung immer für Webseitenfehler anzeigen“. Letzteres gewöhnt man sich aber schnell wieder ab.
Opera (bis Version 12; seither auf Chromium basierend): Fehlerkonsole öffnen: Menüleiste→[Extras]→[Weiteres]→[Fehlerkonsole] oder Strg+Umschalt+O

Fehler finden (Debugging)

Debugger sind komfortable Browser-Werkzeuge, mit denen sich unter anderem zeilenweise der Ablauf des Skriptes und die momentanen Werte von Variablen verfolgen lassen. Üblicherweise haben sie auch einen DOM-Betrachter integriert und lassen sich daher über Kontextmenü (Rechtsklick in die Seite)→[Element untersuchen] (o. Ä.) öffnen. Für Vielbenutzer lassen sich die Tools oft auch als Schaltfläche in die Fenster-Paneele integrieren.

Chrome: Standardmäßig vorhanden; [Tools]→[Entwicklertools] oder F12 oder Strg+Umschalt+I
- „Erweiterungen“ → Firebug lite
Firefox:
- Eingebaut: [Extras]→[Web-Entwickler]→[Inspector] oder Strg+Umschalt+I
- Firefox Developer Edition
- Add-On installieren
  - Firebug - veraltet, ersetzt durch die Firefox Developer Edition
  - Venkman – veraltet, Weiterentwicklung ungeklärt
Internet Explorer: Standardmäßig vorhanden; [Extras]→[Entwicklertools] oder F12
Opera (bis Version 12; seither auf Chromium basierend): Standardmäßig vorhanden; [Opera]→[Seite]→[Entwicklerwerkzeuge]→[Opera Dragonfly] bzw. Menüleiste→[Extras]→[Weiteres]→[Opera Dragonfly] oder Strg+Umschalt+I; außerdem FirebugLite verfügbar

Gelegentlich wird es sinnvoll sein, den Debug-Modus zu aktivieren, um den JS-Quelltext lesen zu können.

Syntax-Analyse

Ebenfalls nützlich ist JSHint, das den Quelltext nach gängigen Fehlern und stilistischen Unschönheiten durchsucht.^[1] Spezielle Analysen liefert auch dessen Vorgänger JSLint; dieser ist jedoch gewöhnungsbedürftig. Beim CodeEditor wird automatisch JSHint mit jedem Seitenaufbau durch Vorschau oder Diffpage ausgeführt.

JavaScript eigenständig ausführen

Neben dem automatischen Ablauf durch Einbindung in eine Wiki-Seite gibt es Möglichkeiten, zu Testzwecken JS-Code auszuführen oder unabhängig zu entwickeln.

Durch Öffnen einer Benutzer-Unterseite, deren Name auf .js endet, lässt sich per Vorschau (oder Änderungen) eine Ausführung bewirken; siehe Testen vor dem Speichern. – Für einen Syntaxtest reicht das; die Auswirkungen auf eine reale Wiki-Seite lassen sich in diesem Moment nicht beobachten.
In der URL-Adresszeile einer Seite lässt sich mit dem Pseudo-Protokoll (Schema) javascript: Code ausführen, der auf die aktuelle Seite wirkt.^[2]^[3]
Durch Ausführen im Betriebssystem lassen sich Syntaxtest und Entwicklung von Bibliotheksfunktionen vornehmen; Browser-spezifische Objekte wie window oder MediaWiki-Funktionen sind dabei naturgemäß nicht bekannt.
- In Windows ist der Datei-Endung .js die Sprache JScript zugeordnet, die syntaktisch dem JavaScript entspricht. Anklicken einer entsprechenden Datei genügt.
Mit Werkzeugen der Browser lässt sich JS so ausführen, dass es Variablen der aktuellen Wiki-Seite verwendet und diese verändert werden können, wie die Ausführung des JS auch Wirkung auf die sichtbare Gestaltung haben kann.
- Firefox
  - Eine einzelne Zeile kann in der Browser-Konsole (Fehlerkonsole) ausgeführt werden; mehrere Statements können ja durch Semikolon getrennt werden. Sie haben aber inzwischen keinen Bezug mehr zum aktuellen Fenster.
  - Die URL-Adresszeile ist seit FF 6 für JS deaktiviert.^[2] Weiterhin möglich ist es aber, in den Bookmarks Code mit dem Pseudo-Protokoll javascript: abzulegen und danach zu starten.
  - Scratchpad^[4]
    [Extras]→[Web-Entwickler]→[JavaScript-Umgebung].
    Bezieht sich auf das Browser-Fenster, das gerade im Vordergrund steht. Das gleiche Scratchpad kann nacheinander auf verschiedene Browser-Fenster angewendet werden.
  - Der Name Scratchpad untertreibt; er bedeutet schlicht „Notizblock“. Tatsächlich ist es ein JS-Interpreter und bietet Syntax-Hervorhebung.
  - In der untersten Zeile des Firebug-Fensters lässt sich eine Eingabemöglichkeit für ausführbaren Code bezogen auf das aktuelle Fenster aktivieren.
- Internet Explorer
  - Unter [Extras]→[Entwicklertools] oder F12 auf dem Reiter [Skript] gibt es ein zweigeteiltes Fenster, dessen rechte Seite als [Konsole] unten die Möglichkeit zum Ausführen von JS-Code bietet. Zunächst ist es nur eine einzelne Zeile; mit [Mehrzeiliger Modus] bietet sich ein Editierbereich.
- Opera (bis Version 12; seither auf Chromium basierend)
  - Mit dem Werkzeug „Dragonfly“ wird eine Konsole angeboten, innerhalb der sich Skripte mit Bezug auf die aktuelle Seite ausführen lassen: Menüleiste→[Extras]→[Weiteres]→[Opera Dragonfly]→[Konsole] oder Strg+Umschalt+I, Esc

Netzwerk

Der zeitliche Ablauf des Kontakts mit dem Wiki-Server, die einzelnen angesprochenen URL, die erforderliche Zeit dafür sowie Erfolg oder Misserfolg lassen sich verfolgen.

Anmerkungen

↑ Standardvorgaben unter Mediawiki: .jshintrc
↑ ^a ^b Seit Firefox 6 ist die Eingabe von JS-Code in der URL-Adresszeile komplett deaktiviert. Auch die Option browser.urlbar.filter.javascript bleibt wirkungslos.
↑ Vom NoScript-AddOn für Firefox wird dies aus Sicherheitsgründen standardmäßig blockiert; die Einstellung noscript.allowURLBarJS muss mittels about:config auf true gesetzt werden.
↑ developer.mozilla.org (englisch)

[1] Standardvorgaben unter Mediawiki: .jshintrc

[FF.urlbar-2] Seit Firefox 6 ist die Eingabe von JS-Code in der URL-Adresszeile komplett deaktiviert. Auch die Option browser.urlbar.filter.javascript bleibt wirkungslos.

[noscript.allowURLBarJS-3] Vom NoScript-AddOn für Firefox wird dies aus Sicherheitsgründen standardmäßig blockiert; die Einstellung noscript.allowURLBarJS muss mittels about:config auf true gesetzt werden.

[4] veloper.mozilla.org (englisch)

[1]

[2]

[3]

[4]