Wie setze ich Haltepunkte in Inline-Javascript in Google Chrome?

210

Wenn ich Entwicklertools in Google Chrome öffne, werden alle Arten von Funktionen wie Profile, Zeitleisten und Audits angezeigt, aber grundlegende Funktionen wie das Festlegen von Haltepunkten sowohl in JS-Dateien als auch in HTML- und Javascript-Code fehlen! Ich habe versucht, die Javascript-Konsole zu verwenden, die selbst fehlerhaft ist. Wenn beispielsweise ein JS-Fehler auftritt, kann ich sie nur verlassen, wenn ich die gesamte Seite aktualisiere. Kann jemand helfen?

javascript debugging google-chrome As
quelle
Ich habe mit Chrome aufgegeben. Versuchte es mit Firefox und hatte meinen Haltepunkt innerhalb weniger Sekunden erreicht. Es mag mit Chrome möglich sein, aber es ist sicherlich nicht offensichtlich, wie!
Oliver P

Antworten:

126

Über die Registerkarte Quellen können Sie dort Haltepunkte in JavaScript setzen. In der Verzeichnisstruktur darunter (mit dem Aufwärts- und Abwärtspfeil) können Sie die Datei auswählen, die Sie debuggen möchten. Sie können einen Fehler beheben, indem Sie auf der rechten Seite derselben Registerkarte auf Fortsetzen klicken.

Rian Schmits
quelle
31
Aus irgendeinem Grund wird die Liste der enthaltenen JS-Dateien angezeigt, aber ich kann die ausführende Seite selbst nicht auswählen. Sie wird nicht in der Liste angezeigt. Irgendwelche Ideen?
ulu
67
@ulu, ich hatte das gleiche Problem. Stellen Sie sicher, dass Ihr type = "text / javascript" -Attribut für Ihr <script> -Element festgelegt ist.
Kontaktmatt
9
außer dass dieses Attribut in HTML5 nicht mehr obligatorisch ist. Ich ändere den Quellcode nicht nur zum Debuggen!
sashok_bg
10
Ich sehe nicht einmal nach dem Hinzufügen von type = "text / javascript"
Nitin Kumar Mishra
2
Wenn dies nicht funktioniert und Sie Inline-Javascript-Code haben wie: <script> your code </script>Fügen Sie einen Namen hinzu wie: <script> your code //# sourceURL=somename.js </script> Dies wird in einer Antwort unten besser erklärt
KM.
209

Sprechen Sie über Code in <script>Tags oder in solchen HTML-Tag-Attributen?

<a href="#" onclick="alert('this is inline JS');return false;">Click</a>

In beiden Fällen funktioniert das folgende debuggerSchlüsselwort :

<a href="#" onclick="debugger; alert('this is inline JS');return false;">Click</a>

NB Chrome pausiert nicht bei debuggers, wenn die Entwicklertools nicht geöffnet sind.

Sie können auch Eigenschafts-Haltepunkte in JS-Dateien und <script>-Tags festlegen :

  1. Klicken Sie auf die Registerkarte Quellen
  2. Klicken Sie auf das Symbol Navigator anzeigen und wählen Sie eine Datei aus
  3. Doppelklicken Sie auf die Zeilennummer a am linken Rand. Eine entsprechende Zeile wird dem Bedienfeld Haltepunkte (4) hinzugefügt .

Geben Sie hier die Bildbeschreibung ein

Matt Ball
quelle
4
Es gibt keine Registerkarte "Skripte". Ich sehe alle anderen Registerkarten in diesem Bild, aber keine Registerkarte "Skripte"!
Ass
5
Ich meine, in der Lage zu sein, einen Haltepunkt innerhalb des Scrip-Tags in HTML zu setzen. Ich habe auch versucht, den Debugger zu verwenden. Schlüsselwort, aber es funktioniert nicht. Chrome macht darauf keinen Haltepunkt, funktioniert aber in Firefox. Ich suche nach einer Haltepunktlösung, die nicht auf dem Debugger-Schlüsselwort basiert, was unpraktisch ist, viele Stellen im Code einzufügen und dann zu löschen.
Ass
2
In der Dropdown-Liste unter der Registerkarte "Skripte" werden nur JS-Dateien aufgelistet, nicht jedoch HTML-Dateien, die das <script> -Tag enthalten, das ich debuggen möchte. Firebug on FF hat ein ähnliches Dropdown-Menü, listet jedoch auch HTML-Dateien auf, die <script> -Tags enthalten. Ist dies ein Fehler oder gibt es eine andere Möglichkeit, einen Haltepunkt in Inline-JS-Code festzulegen?
Wolfram Arnold
8
Die Registerkarte wird Sourcesstatt Scriptsjetzt aufgerufen .
CoderDennis
1
Als ich versuchte, meine eingebetteten HTML-JS zu debuggen, bekam ich eine leere Seite in meinem Entwicklungsbereich. Ich musste mich aktualisieren, während ich mir die leere Quelldatei ansah, damit sie gefüllt wurde.
HappyCoder86
72

Sie können Ihrem Skript auch einen Namen geben:

<script> ... (your code here) //# sourceURL=somename.js </script>

Natürlich ersetzen Sie "somename" durch einen Namen;) und dann sehen Sie es im Chrome-Debugger unter "Sources> top> (keine Domain)> somename.js" als normales Skript und können es wie andere Skripte debuggen

buildhome.eu
quelle
3
einfachster und perfekter Weg. Beachten Sie jedoch, dass Sie es für andere entfernen müssen, bevor Sie es in die Produktion bringen.
Zameer Fouzan
2
Oh mein Gott, du hast keine Ahnung, wie sehr mir das geholfen hat. Oh mein Gott, das ist großartig. Ich habe seit Ewigkeiten nach so etwas gesucht.
GregRos
Ich habe diese (gute) Idee verwendet, konnte aber die neue Datei auf der Registerkarte "Quellen" nicht sehen, nur die HTML-Datei. Dann habe ich den Code ausgeführt und am Ende, in der Konsole, rechts neben der Nachricht, die aus dem Skript geschrieben wurde, sehen Sie einen Link zum Code. Das Beste daran ist, dass der Link den Dateinamen anzeigt, den Sie dem Skript gegeben haben (dh // # sourceURL = somename.js).
Manuel Rivera
1
Ich würde dir 1000 Upvotes geben, wenn ich könnte;) Sehr nützlicher Trick
Giulio Quaresima
43

Aktualisieren Sie die Seite mit dem Skript, während die Entwicklertools auf der Registerkarte "Skripte" geöffnet sind. Dadurch wird ein (Programm-) Eintrag in die Dateiliste eingefügt, der den HTML-Code der Seite einschließlich des Skripts anzeigt. Von hier aus können Sie Haltepunkte hinzufügen.

Gruff Bunny
quelle
Das hat bei mir nicht funktioniert. Stattdessen habe ich unten rechts auf ein Skriptfehlersymbol geklickt, um die Programmdatei auf der Registerkarte "Skripte" zu öffnen.
Sanbikinoraion
1
Vielen Dank! Mit Chrome 69 funktionierte dies auch dann, wenn ich nicht auf der Registerkarte "Quellen" war. Das Öffnen der Entwicklertools während des Ladens der Seite scheint der Schlüssel zu sein.
Sam
Dies wäre die akzeptierte Antwort gewesen, wenn dies meine Frage gewesen wäre. Danke dir.
plumpNation
Arbeitete in Chrome 83. In meiner Umgebung basiert der Dateiname auf der URL Ihrer App. Wenn die URL beispielsweise example.com/xxx/yyy lautet, lautet der Dateiname "yyy".
Helix Quar
18

Ein weiterer intuitiver einfacher Trick zum Debuggen von Skripten in HTML, die von Ajax zurückgegeben werden, besteht darin, console.log ("test") vorübergehend in das Skript einzufügen.

Öffnen Sie nach dem Auslösen des Ereignisses die Registerkarte "Konsole" in den Entwicklertools. Der Link zur Quelldatei wird rechts neben der Debug-Druckanweisung "test" angezeigt. Klicken Sie einfach auf die Quelle (so etwas wie VM4xxx) und Sie können jetzt den Haltepunkt festlegen.

PS: Außerdem können Sie in Betracht ziehen, eine "Debugger" -Anweisung zu setzen, wenn Sie Chrome verwenden, wie dies von @Matt Ball vorgeschlagen wird

Ken
quelle
10

Meine Situation und was ich getan habe, um das Problem zu beheben:
Ich habe eine Javascript-Datei auf einer HTML-Seite wie folgt
: Seitenname: test.html

<!DOCTYPE html>
<html>
    <head>
        <script src="scripts/common.js"></script>
        <title>Test debugging JS in Chrome</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <div>
         <script type="text/javascript">
            document.write("something");
         </script>

        </div>
     </body>
</html>

Wenn ich jetzt den Javascript-Debugger in Chrome eingebe, klicke ich auf die Registerkarte "Skripte" und lasse die Liste wie oben gezeigt fallen. Ich kann deutlich sehen , scripts / common.js jedoch konnte ich nicht die aktuelle HTML - Seite test.html im Drop - down, also konnte ich nicht das eingebettete Javascript debuggen:

<script type="text/javascript">
  document.write("something");
</script>

Das war verwirrend. Als ich jedoch den veralteten Typ = "text / javascript" aus dem eingebetteten Skript entfernte:

<script>
  document.write("something");
</script>

..und die Seite aktualisiert / neu geladen, voila, sie erschien in der Dropdown-Liste und alles war wieder in Ordnung.
Ich hoffe, dies ist hilfreich für alle, die Probleme beim Debuggen von eingebettetem Javascript auf einer HTML-Seite haben.

Aditya Singh
quelle
Gut gemacht! Getestet in Chrome 20.0.1132.57 auf Mac 10.7.4 Fehler an Chromium-Projekt gesendet.
Mars Robertson
Beachten Sie, dass in HTML 4 und XHTML typeein Attribut erforderlich ist. In HTML5 ist dies optional.
hotshot309
2
Es hat nichts mit Typ zu tun. Das Skript wird nach der Ausführung von VM erfasst, es sei denn, der Inspektor ist zu diesem Zeitpunkt bereits geöffnet. Beim erneuten Laden der Seite wurde das Skript nicht erfasst.
Vsevik
Ich bin mein Fall, vermisst hat <div>mich daran gehindert, den Code im Debugger zu sehen
ceztko
5

Das Hinzufügen debugger;zu meinem Skript hat bei mir funktioniert.

JEKO
quelle
4

Ich hatte auch das gleiche Problem, wie man JavaScript debuggt, das sich in <script>Tags befindet. Aber dann fand ich es unter der Registerkarte Quellen, genannt "(Index)", in Klammern. Klicken Sie auf die Zeilennummer, um Haltepunkte festzulegen.

Geben Sie hier die Bildbeschreibung ein

Dies ist Chrome 71.

ocarlsen
quelle
2

Wenn die Registerkarte "Skripte" nicht angezeigt wird, stellen Sie sicher, dass Sie Chrome mit den richtigen Argumenten starten. Ich hatte dieses Problem, als ich Chrome zum Debuggen von serverseitigem JavaScript mit dem Argument startete --remote-shell-port=9222. Ich habe kein Problem, wenn ich Chrome ohne Argument starte.

Gefallener Engel
quelle
Könnten Sie bitte näher darauf eingehen? Ich habe genau dieses Problem - kann die Registerkarte "Skripte" überhaupt nicht sehen. Ich habe den neuesten Entwickler-Build von Chrome heruntergeladen.
Tom Redfern
2

Ich bin auf dieses Problem gestoßen, aber meine Inline-Funktion hatte eine eckige JS-Ansicht. Daher konnte ich beim Laden nicht auf das Inline-Skript zugreifen, um das Debug hinzuzufügen, da nur die index.html auf der Registerkarte "Quellen" des Debuggers verfügbar war.

Dies bedeutete, dass ich beim Öffnen der jeweiligen Ansicht mit meiner Inline (hatte keine Wahl) darauf nicht zugreifen konnte.

Die einzige Möglichkeit, die ich treffen konnte, bestand darin, eine fehlerhafte Funktion oder einen Aufruf in die Inline-JS-Funktion einzufügen.

Meine Lösung beinhaltete: 

function doMyInline(data) {
        //Throw my undefined error here. 
        $("select.Sel").debug();

        //This is the real onclick i was passing to 
        angular.element(document.getElementById(data.id)).scope().doblablabla(data.id);
    }

Das heißt, als ich auf meine Schaltfläche klickte, wurde ich in der Chrome-Konsole aufgefordert. 

Uncaught TypeError: undefined is not a function

Das Wichtigste hier war die Quelle dafür: VM5658:6Wenn ich darauf klickte, konnte ich durch die Inline gehen und den Haltepunkt für später dort halten.

Extrem komplizierter Weg, um es zu erreichen. Aber es hat funktioniert und könnte sich als nützlich erweisen, wenn es um Apps mit einer Seite geht, die Ihre Ansichten dynamisch laden.

Das VM[n]hat keinen signifikanten Wert und das non entspricht der Skript-ID. Diese Informationen finden Sie hier: Chrome "[VM]"

Pogrindis
quelle
1

Mit Visual Studio (2012) hatte ich das gleiche Problem und der Wechsel zu IIS Express löste das Problem!

Das Attribut des scriptTags wurde typenicht berücksichtigt.

Aus irgendeinem Grund bietet der Visual Studio Development Server nicht alles, was Chrome zum Aktivieren der Haltepunkte benötigt.

Flucht-llc
quelle
1

Ich weiß, dass es beim Q nicht darum geht, Firefoxaber ich wollte keine Kopie dieser Frage hinzufügen, um sie einfach selbst zu beantworten.

Für Firefox müssen Sie hinzufügen debugger;, um das tun zu können, was @ matt-ball für das scriptTag vorgeschlagen hat.

Sie fügen also in Ihrem Code debuggerüber der Zeile hinzu, die Sie debuggen möchten, und können dann Haltepunkte hinzufügen. Wenn Sie nur die Haltepunkte im Browser festlegen, wird dies nicht gestoppt.

Wenn dies nicht der richtige Ort ist, um eine Firefox-Antwort hinzuzufügen, da es sich bei der Frage um Chrome handelt. Nicht :( abzüglich der Antwort lass mich einfach wissen, wo ich es posten soll und ich werde den Beitrag gerne verschieben. :)

T04435
quelle
0

Dies ist eine Erweiterung der obigen Antwort von Rian Schmits . In meinem Fall hatte ich HTML-Code in meinen JavaScript-Code eingebettet und konnte nichts anderes als den HTML-Code sehen. Möglicherweise hat sich das Chrome-Debugging im Laufe der Jahre geändert, aber durch Klicken mit der rechten Maustaste auf die Registerkarte Quellen / Quellen wurde mir der Ordner zum Arbeitsbereich hinzufügen angezeigt . Ich konnte mein gesamtes Projekt hinzufügen, wodurch ich auf alle meine JavaScripts zugreifen konnte. Weitere Details finden Sie unter diesem Link . Ich hoffe das hilft jemandem.

Patricia
quelle