2009-05-21 12 views
36

Diese Frage wurde in ähnlicher Weise gestellt before, aber ich kann nicht scheinen, Javascript in Google Chrome zu debuggen.Google Chrome Javascript Debugger und Inhaltsskripte

Wenn ich zur Seite> Entwickler der "Debug Javascript" (Ctrl +Umschalt +L) ist deaktiviert. Alt + ` funktioniert nicht.

Ich entwickle eine 'Inhaltsskript' Erweiterung, also starte ich Chrome mit --enable-extensions.

Was ich im Idealfall tun möchte, ist Breakpoints setzen und Schritt/Durchlauf durch mein Skript, wie es ausgeführt wird. Ich bin ein bisschen über den Kopf, wenn es um JavaScript geht, daher wird jede Anleitung geschätzt.

Ich kann auf die "JavaScript Console" zugreifen, finde aber nicht die Inhaltsskripts darin. Ich bin mir auch nicht sicher, wie sich das vom "JavaScript Debugger" unterscheidet.

Ich verwende die neueste Entwicklerversion von Chrome (2.0.181.1) unter Windows XP.

+0

Sie können die Version der Windows, die Sie verwenden,: XP, Vista, 7RC ... Ich weiß, Chrome und Windows 7 nicht besonders gut auskommen. – Joel

Antwort

34

Diese Antworten scheinen alle veraltet zu sein, und da dies in Google hochrangig ist, hier ist die aktuelle Antwort:

In Chrome Presse CTRL+SHIFT+i, um die Entwickler-Tools zu bringen.

Auswählen 'Quellen'

Klicken Sie auf den kleinen Pfeil, die Sie von den Skripten enter image description here

Wählen Sie dann 'Content-Skripte' auswählen können

enter image description here

Sie werden dann brauchen Die ID Ihrer Erweiterung kennenlernen (verfügbar auf der Chrome-Seite für die Erweiterung von Erweiterungen), um zu Ihren Skripts zu gelangen und sie wie gewohnt zu debuggen.

+0

Wow, Explosion aus der Vergangenheit. Ich erinnere mich wirklich nicht an irgendetwas über diese Frage/Entwicklung von Chrome-Erweiterungen, aber das scheint eine solide Antwort zu sein. Danke für das Einspielen. –

+0

Du brauchst die Erweiterungs-ID nicht mehr zu kennen. re wird jetzt mit dem Namen aufgelistet – Teepeemm

+0

Auch wenn Sie den Content_Scripts-Abschnitt Ihres Manifests vermasseln, sehen Sie einfach y nicht unser Inhaltsskript wurde aufgelistet und im Hintergrund stört. Zum Beispiel, wenn Sie einen für Facebook laden wollten und nur https://www.facebook.com/ in content_scripts setzen, würden Sie am Ende nicht laden, wenn Sie nicht auf der Homepage waren (kein Sternchen) oder waren auf Links, die die mobile Domain (m.facebook.com), etc –

7

Klicken Sie mit der rechten Maustaste und wählen Sie Element prüfen, dort finden Sie unter anderem den Debugger JS. Der JS-Debugger sollte Ihnen ermöglichen, Breakpoints usw. zu setzen.

+0

Nun, das ist die JavaScript-Konsole, nicht der Debugger. Es scheint einen Unterschied zu geben. Ich bin wahrscheinlich hier dicht, aber ich finde keine Möglichkeit, Breakpoints in das Skript einzufügen. Wie kann ich eine Inhaltsskriptfunktion sehen, die ich einem bestimmten Objekt als Ereignis-Listener hinzugefügt habe? z.B. Ich möchte in der Lage sein, 'myFuncHere()' in this.addEventListener zu debuggen ('click', myFuncHere, true); –

+2

Wenn Sie oben im Inspektorfenster auf die Schaltfläche "Skripts" klicken, sollte dies der Debugger sein. Sie können eine bestimmte Skriptquelle aus einem Dropdown-Menü auswählen und dann auf die Zeilennummer klicken, um einen Haltepunkt festzulegen. – Scott

+0

Danke für den Tipp, Scott, aber ich sehe dort keine meiner Benutzer-Skripte, nur die von der eigentlichen Website. Fehle ich etwas? –

3

Was Sie tun müssen, ist Ihre Erweiterung aktivieren, dann in Chrome klicken Sie auf "Developer" -> "Javascript Console". Klicken Sie dann auf die Registerkarte "Skripts". Danach sollte eine Liste aller geladenen Skripte angezeigt werden. Sie sehen Skripte für die aktuelle Seite sowie alle Skripte für alle Erweiterungen, die Sie installiert haben. (Wenn nach dem Öffnen der Konsole keine Skripts angezeigt werden, müssen Sie möglicherweise eine Aktualisierung durchführen.)

Es scheint, dass allen Chrome-Erweiterungen eine eindeutige ID zugewiesen wird. Sie können Ihre ID herausfinden, indem Sie die Seite "Chrome-Erweiterungen" im Entwicklermodus aufrufen.

Dann ist es nur eine Frage der Skripts in der Dropdown-Liste für Ihr Skript zu durchsuchen. Wählen Sie ein Skript und Sie können Haltepunkte usw.

Es gibt viel mehr Informationen über die Chrome Dev-Tools hier: http://www.chromium.org/devtools

44

Setzen Sie den folgenden Befehl in das Skript:

debugger; 

Das startet der Javascript Debugger, wenn es zu diesem Punkt kommt

+0

Unterstützt Firebug diese Möglichkeit? –

+1

Ich denke, das funktioniert in Firebug.Warum nicht versuchen Sie es und antworten Sie hier, wenn es funktioniert? :) – Rory

+3

Dies ist der beste Tag meines Lebens, danke ! – Hassek