Chrome Developer Tool: Das HTML-Skript ist ein leeres Debugging-Tutorial (in der Quelle)

88

Ich mache das C hrome-Debugging-Tutorial mit NetBeans und Google Chrome. Alles, einschließlich der Erweiterungen, scheint korrekt zu funktionieren, aber wenn ich zum Abschnitt komme Use the Debugger, kann ich den HTML-Code zum Einfügen eines Haltepunkts nicht sehen.

Nach Auswahl von Inspect Popup im Browser wird es in der Konsole geöffnet und zeigt nichts an. Elements zeigt popup.html mit hinzugefügten Bildern an. Wenn ich zu Quellen gehe, kann die Datei popup.html geöffnet werden, aber die einzige Zeile, Zeile 1, ist leer. Wenn ich die js-Datei öffne, ist die js-Datei dort und kann bearbeitet werden (Unterbrechungspunkt).

Es tut mir leid - wahrscheinlich etwas Grundlegendes, aber ich bin nicht sehr erfahren damit. Ich habe versucht, alles neu zu laden und zu aktualisieren.

FOLLOW-UP: Durch Eingabe location.reload(true)der Konsolen-Eingabeaufforderung wurde die Datei popup.html als Quelle sichtbar! Warum? Keine Ahnung.

Ich hoffe, das erspart jemandem den ganzen Tag, an dem ich herumgestolpert bin.

DrWas
quelle
5
location.reload (true) hat bei mir funktioniert.
WillB3
Ja, aber das lädt die Seite neu und verliert jegliche Interaktion, die Sie möglicherweise auf der Seite hatten, bevor Sie den Debugger öffnen.
Peter Brand
wo soll ich schreiben "location.reload (true)"
Sidhewsar
2
Noch vor dem Problem im Jahr 2019!
Aamir Rizwan
Dies ist in der neuesten Version von Chrome, Oktober 2019, der Fall, aber der Trick location.reload (true) hat nichts geladen. Im Quellfenster wird übrigens nur die Zeilennummer 1 angezeigt, sonst nichts.
Howard Brown

Antworten:

48

Dies scheint ein bekanntes Problem mit Chromium DevTools zu sein. Grundsätzlich werden HTML- und andere Nicht-Skript-Inhalte bereits vor dem Öffnen von DevTools gelöscht, und es gibt keine zuverlässige Möglichkeit, sie wiederherzustellen. Durch das Aktualisieren der Seite mit geöffneten DevTools wird das Problem "behoben".

Eric
quelle
4
Einverstanden - Ich habe das Problem und dieses Update ist entweder veraltet (für ein vorheriges identisches Problem) oder funktioniert nicht.
Dan Nissenbaum
2
Ich habe auch das gleiche Problem. Durch das Aktualisieren der Seite wird das Problem nicht umgangen.
MH
16
Sie können es zum Laufen bringen, indem Sie die Entwicklertools schließen und sie mit der Option inspect element erneut öffnen. Für mich geht das.
Vishal
7
Noch im Dezember 2017!
Peter Brand
6
Bug ist noch vorhanden - Mai 2019
Chris Rogers
41

in meinem Fall hat die Bestellung geholfen

  1. Schließen Sie die leere Registerkarte in Quellen
  2. Entwicklerwerkzeuge schließen
  3. Öffnen DevTools
  4. Öffnen Sie die Registerkarte in Quellen (sie ist immer noch leer).
  5. Seite neu laden
Andrey Zausaylov
quelle
Wer weiß, ob dies eine zuverlässige Lösung ist, aber diesmal hat es funktioniert! 😁
James Hill
Immer noch das einzige, was für mich funktioniert
Kilkfoe
Mann, ich habe schon immer nach diesem "Fix"
gesucht
24

Ich hatte dieses Problem und habe gerade festgestellt, dass das Deaktivieren von "Javascript Source Maps aktivieren" im Inspector-Einstellungsfenster (F1) das Problem behoben hat

Ich habe meine js.map neu erstellt, die Einstellung wieder aktiviert und die Quelle war noch verfügbar.

Ich glaube, mein Problem war, dass ich nicht minimierte JS (Dev-Einstellungen) bediente, aber die Map (für Prod-Einstellungen erstellt) war immer noch da und veraltet.

paul
quelle
4
Chrom schließen und nach Änderung der Einstellung wieder öffnen!
Nateous
16

In meinem Fall konnte ich nicht auf die Konsole zugreifen, da auf der Registerkarte auch eine leere Seite angezeigt wurde. Meine Lösung besteht darin, die Kombination STRG + UMSCHALT + I mit dem leeren Debugger-Bildschirm im Fokus zu verwenden und dann parent.location.reload(true)die Konsole des Popup-Debuggers einzugeben.

Ikenna Anthony Okafor
quelle
2
Wie im obigen Kommentar von WillB wird die Seite neu geladen und jede Interaktion, die Sie möglicherweise auf der Seite hatten, vor dem Öffnen des Debuggers verloren.
Peter Brand
Genial! Dies funktionierte für mich nach 2 Stunden Kampf.
Zeeshan Adil
Ich weiß nicht, was die parent.location.reload impliziert, aber es hat mein Problem nach mehreren Chrome-Neustarts / Hard-Refresh / Leeren der Chrome-Cache-Daten gelöst! Vielen Dank!
Beluga
Froh, dass ich helfen konnte. Das übergeordnete Fenster (das leere Fenster, in das Sie STRG + UMSCHALT + I eingegeben haben) wird aus dem untergeordneten Fenster neu geladen.
Ikenna Anthony Okafor
5

In meinem Fall gab es eine Erweiterung in Chrome, die dazu führte, dass der Debugger die leere Indexseite unter einem Abschnitt "Keine Domäne" des Debuggers angab. Nach dem Deaktivieren aller nicht wesentlichen Erweiterungen in Chrome zeigte der Debugger erneut die richtige Quelle an.

Brett Drake
quelle
4
Wäre toll gewesen, wenn Sie sich eine Erweiterung notiert hätten, die ein Problem verursacht. Viele Erweiterungen sind für Sie möglicherweise nicht unbedingt erforderlich und für mich nicht unbedingt erforderlich. Dies macht die Antwort wertlos.
Imad
5
Ich würde "wertlos" nicht zustimmen. Zumindest wissen Sie, die Plugins zu überprüfen.
Brett Drake
Dies war mein Problem - in meinem Fall hatte ich die UltraSurf Unblock VPN-Erweiterung installiert. Durch Öffnen der lokalen Debug-Seite in einem Inkognito-Fenster wurde sie sofort aufgerufen. Ein bisschen "durrrr" Moment muss ich zugeben :( haha!
IfElseTryCatch
Mit Inkognito wurde es für mich behoben.
Petah
2

Ich habe festgestellt, dass einige schwerwiegende Probleme mit Javascript solche Probleme verursachen. In meinem Fall habe ich aufgrund eines Tippfehlers fälschlicherweise mein gesamtes Dokument überschrieben.

Wenn Sie im Chromium WebTools-Debugger eine leere HTML-Seite erhalten, schauen Sie sich Ihr Javascript genau an, um sicherzustellen, dass es nichts Seltsames bewirkt.

AWT
quelle
1
Dies scheint das Problem auch für mich verursacht zu haben. In meinem Fall hatte ich eine schlechte jquery Referenz. $ ('inputid') im Gegensatz zu $ ​​('# inputid').
Vincent
2

Ich habe mein Problem behoben, indem ich eine brandneue Sitzung mit dem Befehlszeilenargument "--user-data-dir" verwendet und "Javascript Source Maps aktivieren" deaktiviert habe. Mein Code wird im Firefox-Debugger einwandfrei angezeigt und scheint also durch einen Chrome-Fehler verursacht worden zu sein.

Simon
quelle
2

Dev Tools (F12) -> Inspector-Einstellungsfenster (F1) -> Standardeinstellungen wiederherstellen und neu laden [Schaltfläche unten] funktioniert bei mir!

Sylwia M.
quelle
1

Ich hatte das gleiche Problem. Selbst eine Aktualisierung der Seite hat nicht funktioniert.

Gehen chrome://helpund Aktualisieren des Browsers + Neustart für mich gearbeitet.

Sie können Chrome auch über das Menü aktualisieren:

Geben Sie hier die Bildbeschreibung ein

Charles
quelle
0

In meinem Fall passierte es plötzlich, nachdem ich mich mit Malware infiziert und meinen Browser zurückgesetzt hatte - gelöschter Cache / Appdata.

Lösung: Entfernen Sie die Erweiterung, die sich in meinem Fall auf Js auswirken kann

Ich habe die folgende Erweiterung entfernt / deaktiviert und https://chrome.google.com/webstore/detail/quick-javascript-switcher/geddoclleiomckbhadiaipdggiiccfje?hl=de bearbeitet

seltsam, denn bevor ich dieses Addon ohne Probleme wasche, denke ich, dass es wie CPR im Herzen ist. :) :)

shareef
quelle
0

In meinem Fall hatte ich ein paar Tage lang Schluck mit Browsersync. Ich hüpfte und schluckte mein Problem.

dman
quelle
0

Ich hatte auch dieses Problem, als ich eine riesige Java-Skript-Datei hatte, ich hatte diese Zeile

                points.push({
                    location: new google.maps.LatLng(46.5376919, 4.5425704),
                    date : "5/8/2017 5:11:00 PM",
                    free : true
                });

In einem for-Zyklus wurden 3000 Elemente gezählt, sodass die Datei im Skript groß wurde und die Datei in Chrome-Quellen leer war. (Ich glaube, ich habe eine Einschränkung getroffen)

Nachdem die Datei durch Entfernen auf 100 Elemente verkleinert wurde, funktionierte sie einwandfrei.

Dongolo Jeno
quelle