Wie starte ich den JavaScript-Debugger in Google Chrome?

418

Bei Verwendung von Google Chrome möchte ich JavaScript-Code debuggen. Wie kann ich das machen?

javascript  google-chrome  debugging  google-chrome-devtools 
— Kevin Driedger
quelle
— Bergi
— Davut Gürbüz
— cssyphus

Antworten:

318

Windows: CTRL- SHIFT- JODER F12

Mac: ⌥- ⌘-J

Auch über das Schraubenschlüsselmenü (Extras> JavaScript-Konsole) verfügbar:

JavaScript-Konsolenmenü

— John Sheehan
quelle
23
Ich denke, die Verknüpfung wurde inzwischen in STRG-UMSCHALT-J geändert.
— Martijn Laarman
5
oder Cmd-Shift-J für Macs. Gott, ich liebe diesen <kbd>Tag. Schade, dass ich es nicht in Kommentaren verwenden kann.
— Anurag
11
Die Mac-Verknüpfung scheint tatsächlich Alt-Cmd-Jauf dem neuesten Chrome-Build zu sein.
— Mathew Byrne
64
F12ist der einfachste Weg
— Juan Mendes
Wenn ich mir diese Frage ansehe, verstehe ich, wie sehr sich meine Javascript-Fähigkeiten von Anfängern auf recht anständige Standards verbessert haben
— Kamal Reddy
399

Versuchen Sie, dies Ihrer Quelle hinzuzufügen:

debugger;

Es funktioniert in den meisten, wenn nicht allen Browsern. Platzieren Sie es einfach irgendwo in Ihrem Code, und es wirkt wie ein Haltepunkt.

— Omer van Kloeten
quelle
Es ist schwer zu finden, wie dieser Befehl heißt, wenn Sie ihn vergessen haben!
— Ahmed Fasih
4
Es ist auch schwierig zu googeln, weil dies nicht immer funktioniert. Gibt es Einschränkungen dafür?
— Seanonymous
2
Damit dies funktioniert, müssen die Chrome Developer Tools geöffnet sein (drücken Sie unter Windwos / Linux F12, kennen Sie den Schlüssel auf einem Mac nicht oder überprüfen Sie einfach ein Element). Wenn Sie die Entwicklertools geöffnet haben, ist es besonders beeindruckend, dass Sie auf die Schaltfläche Aktualisieren klicken und gedrückt halten können, um den Cache zu leeren.
— Toon81
2
@CallumRogers Nur wenn Ihre Benutzer Ihre Site mit geöffneten Entwicklertools verwenden.
— Josh M.
3
@ JoshM. Bitte beachten Sie, dass es sehr schlecht ist, dies im Produktionscode zu belassen, da dies in bestimmten IE-Versionen zu Problemen führt, selbst für Benutzer, bei denen keine Entwicklertools geöffnet sind.
— Omer van Kloeten
57

Windows und Linux:

Ctrl+ Shift+ ITasten zum Öffnen der Entwicklertools

Ctrl+ Shift+ JZu öffnen Developer Tools und bringen den Fokus auf die Konsole.

Ctrl+ Shift+ Cum den Inspect Element-Modus umzuschalten.

Mac:

⌥+ ⌘+ ITasten zum Öffnen der Entwicklertools

⌥+ ⌘+ JZu öffnen Developer Tools und bringen den Fokus auf die Konsole.

⌥+ ⌘+ Cum den Inspect Element-Modus umzuschalten.

Quelle

Andere Verknüpfungen

— user629309
quelle
3
Auf dem Mac ist der Shorcut zum Umschalten des Inspect-Element-Modus Shift ⌘ C (Shift - Command - C)
— Roberto Barros
15

Drücken Sie die F12Funktionstaste im Chrome-Browser, um den JavaScript-Debugger zu starten, und klicken Sie dann auf "Skripte".

Wählen Sie die JavaScript-Datei oben aus und platzieren Sie den Haltepunkt für den JavaScript-Code im Debugger.

— Balachandar P.
quelle
3
F12 scheint den Debugger auf meinem Windows 7-System mit Chrome 23.0.1246.0 dev-m nicht zu öffnen.
— Astletron
+1 für F12, funktioniert auch für IE, FF, Edge. Sie müssen Emacs nicht wie Tastenkombinationen lernen. Außer Mac.
— Csaba Toth
6

In Chrome 8.0.552 auf einem Mac finden Sie dies unter dem Menü Ansicht / Entwickler / JavaScript-Konsole ... oder Sie können Alt+ CMD+ verwenden J.

— Primc
quelle
2

Shift+ Control+ Iöffnet das Developer Tool-Fenster. Im zweiten Bild unten links (das wie folgt aussieht) wird die Konsole für Sie geöffnet / ausgeblendet:

Konsole zeigen

— Premanshu
quelle
2

So öffnen Sie das dedizierte Konsolenfenster:

  • Verwenden Sie die Tastaturkürzel
    • Unter Windows und Linux: Ctrl+ Shift+J
    • Auf dem Mac: Cmd+ Option+J
  • Wählen Sie das Chrome-Menüsymbol, Menü -> Weitere Tools -> JavaScript-Konsole . Oder wenn die Chrome Developer Tools bereits geöffnet sind press, klicken Sie auf die Registerkarte "Konsole".

Bitte beziehen Sie sich hier

— Venkat
quelle
1

Für Mac - Anwender, gehen Sie zu Google Chrome -> Menü Ansicht -> Entwickler -> JavaScript - Konsole .

Bildschirmfoto

— Neo123
quelle
1

Jetzt hat Google Chrome eine neue Funktion eingeführt. Mit dieser Funktion können Sie Ihren Code in Chrome Browse bearbeiten. (Permanente Änderung der Codeposition)

Drücken Sie dazu F12 -> Registerkarte Quelle - (rechte Seite) -> Dateisystem - und wählen Sie dort Ihren Code-Speicherort aus. und dann werden Sie vom Chrome-Browser um Erlaubnis gebeten und danach wird der Code mit grüner Farbe versenkt. und Sie können Ihren Code ändern und er wird sich auch auf Ihren Code-Speicherort auswirken (dies bedeutet, dass er dauerhaft geändert wird).

Vielen Dank

— stackinfostack
quelle
0

Der effizienteste Weg, um zum Javascript-Debugger zu gelangen, besteht darin, Folgendes auszuführen:

chrome://inspect

— Nestor Urquiza
quelle
0

F12 öffnet das Entwicklerfenster

STRG + UMSCHALT + C Öffnet das Werkzeug zum Bewegen des Mauszeigers, in dem Elemente beim Bewegen hervorgehoben werden, und Sie können darauf klicken, um es auf der Registerkarte Elemente anzuzeigen.

STRG + UMSCHALT + I Öffnet das Entwicklerfenster mit der Registerkarte Konsole

RECHTSKLICKEN> Prüfen Klicken Sie mit der rechten Maustaste auf ein Element und klicken Sie auf " Prüfen ", um es auf der Registerkarte "Elemente" des Entwicklerfensters auszuwählen.

ESC Wenn Sie mit der rechten Maustaste auf ein Element oder ähnliches klicken und es überprüfen und auf der Registerkarte "Elemente" mit Blick auf das DOM landen, können Sie ESC drücken, um die Konsole nach oben und unten umzuschalten. Dies kann eine gute Möglichkeit sein, beide zu verwenden.

— OG Sean
quelle
-5

Über die Konsole in Chrome können Sie dies tun console.log(data_to_be_displayed).

— anand
quelle
3
Dadurch wird die Konsole nicht geöffnet. Dies wird nur an der Konsole protokolliert.
— Shaz
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.