Code ist fehleranfällig. Sie werden höchstwahrscheinlich Fehler machen ... Oh, wovon rede ich? Sie werden absolut Fehler machen, zumindest wenn Sie ein Mensch und kein Roboter sind.
Im Browser sehen Benutzer jedoch standardmäßig keine Fehler. Wenn also im Skript etwas schief geht, sehen wir nicht, was kaputt ist, und können es nicht reparieren.
Um Fehler anzuzeigen und viele andere nützliche Informationen zu Skripten zu erhalten, wurden „Entwicklertools“ in Browser eingebettet.
Die meisten Entwickler greifen bei der Entwicklung auf Chrome oder Firefox zurück, da diese Browser über die besten Entwicklertools verfügen. Andere Browser stellen ebenfalls Entwicklertools bereit, manchmal mit besonderen Funktionen, müssen aber in der Regel Chrome oder Firefox aufholen. Daher haben die meisten Entwickler einen „Lieblingsbrowser“ und wechseln zu anderen, wenn ein Problem browserspezifisch ist.
Entwicklertools sind leistungsstark; Sie haben viele Funktionen. Zunächst lernen wir, wie man sie öffnet, Fehler untersucht und JavaScript-Befehle ausführt.
Öffnen Sie die Seite bug.html.
Es liegt ein Fehler im JavaScript-Code vor. Es bleibt den Augen eines normalen Besuchers verborgen, also öffnen wir die Entwicklertools, um es zu sehen.
Drücken Sie F12 oder, wenn Sie einen Mac verwenden, dann Cmd + Opt + J .
Die Entwicklertools werden standardmäßig auf der Registerkarte „Konsole“ geöffnet.
Es sieht ungefähr so aus:
Das genaue Aussehen der Entwicklertools hängt von Ihrer Chrome-Version ab. Es ändert sich von Zeit zu Zeit, sollte aber ähnlich sein.
Hier sehen wir die rot gefärbte Fehlermeldung. In diesem Fall enthält das Skript einen unbekannten „lalala“-Befehl.
Auf der rechten Seite befindet sich ein anklickbarer Link zur Quelle bug.html:12 mit der Zeilennummer, in der der Fehler aufgetreten ist.
Unterhalb der Fehlermeldung befindet sich ein blaues > -Symbol. Es markiert eine „Befehlszeile“, in der wir JavaScript-Befehle eingeben können. Drücken Sie die Eingabetaste, um sie auszuführen.
Jetzt können wir Fehler sehen, und das reicht für den Anfang. Wir werden später auf die Entwicklertools zurückkommen und das Debuggen im Kapitel Debuggen im Browser ausführlicher behandeln.
Mehrzeilige Eingabe
Wenn wir eine Codezeile in die Konsole eingeben und dann die Eingabetaste drücken, wird sie normalerweise ausgeführt.
Um mehrere Zeilen einzufügen, drücken Sie Umschalt + Eingabetaste . Auf diese Weise können lange Fragmente von JavaScript-Code eingegeben werden.
Die meisten anderen Browser verwenden F12 , um Entwicklertools zu öffnen.
Ihr Aussehen und ihre Haptik sind ziemlich ähnlich. Sobald Sie wissen, wie Sie eines dieser Tools verwenden (Sie können mit Chrome beginnen), können Sie problemlos zu einem anderen wechseln.
Safari (Mac-Browser, nicht von Windows/Linux unterstützt) ist hier etwas Besonderes. Wir müssen zuerst das „Entwicklungsmenü“ aktivieren.
Öffnen Sie die Einstellungen und gehen Sie zum Bereich „Erweitert“. Unten befindet sich ein Kontrollkästchen:
Jetzt kann Cmd + Opt + C die Konsole umschalten. Beachten Sie außerdem, dass der neue Hauptmenüpunkt „Entwickeln“ erschienen ist. Es verfügt über viele Befehle und Optionen.
Entwicklertools ermöglichen es uns, Fehler zu erkennen, Befehle auszuführen, Variablen zu untersuchen und vieles mehr.
Sie können für die meisten Browser unter Windows mit F12 geöffnet werden. Chrome für Mac benötigt Cmd + Opt + J , Safari: Cmd + Opt + C (muss zuerst aktiviert werden).
Jetzt haben wir die Umgebung bereit. Im nächsten Abschnitt beschäftigen wir uns mit JavaScript.