Outil de développement Chrome: le script html est vide (dans la source) Tutoriel de débogage

90

Je fais le tutoriel de débogage C hrome , en utilisant NetBeans et Google Chrome. Tout, y compris les extensions, semble fonctionner correctement, mais quand j'arrive à la section Use the Debugger, je ne peux pas voir le code html pour insérer un point d'arrêt.

Après avoir sélectionné inspecter popup sur le navigateur, il s'ouvre dans la console, ne montrant rien, Elements affiche popup.html avec des images ajoutées. Lorsque je vais à Sources, le fichier popup.html peut être ouvert, mais la seule ligne, Ligne 1, est vide. Si j'ouvre le fichier js, le fichier js est là et peut être édité (rupture pointée).

Je suis désolé - probablement quelque chose de basique, mais je ne suis pas très expérimenté avec cela. J'ai essayé de tout recharger et de tout rafraîchir.

SUIVI: En entrant location.reload(true)dans l'invite de la console, le fichier popup.html est devenu visible en tant que Source! Pourquoi? Aucune idée.

J'espère que cela sauvera quelqu'un de toute la journée que j'ai passée à trébucher.

DrWhat
la source
5
location.reload (true) a fonctionné pour moi.
WillB3
Oui, mais cela recharge la page et perd toute interaction que vous auriez pu avoir sur la page avant d'ouvrir le débogueur.
Peter Brand
où devrais-je écrire "location.reload (true)"
sidhewsar
2
Toujours confronté au problème en 2019!
Aamir Rizwan
Cela se produit dans la dernière version de Chrome, octobre 2019, mais l'astuce location.reload (true) n'a rien chargé. Incidemment, la fenêtre source n'affiche que le numéro de ligne 1, mais rien d'autre.
Howard Brown

Réponses:

53

Cela semble être un problème connu avec Chromium DevTools. Fondamentalement, le contenu HTML et autre contenu non script est déjà vidé avant l'ouverture de DevTools et il n'y a aucun moyen fiable de le récupérer. L'actualisation de la page avec l'ouverture de DevTools "corrige" le problème.

Eric
la source
4
D'accord - J'ai le problème et ce correctif est soit obsolète (pour un problème antérieur identique), soit ne fonctionne pas.
Dan Nissenbaum
3
J'ai aussi le même problème. L'actualisation de la page ne résout pas le problème.
MH
17
vous pouvez le faire fonctionner en fermant les outils de développement et en les rouvrant à nouveau à l'aide de l'option inspect element. Ça marche pour moi.
Vishal
7
Toujours en décembre 2017!
Peter Brand
7
Le bogue est toujours présent - mai 2019
Chris Rogers
48

dans mon cas, la commande a aidé était

  1. ferme l'onglet vide dans les sources
  2. fermer les outils de développement
  3. ouvrir les outils de développement
  4. ouvrez l'onglet dans les sources (il est toujours vide)
  5. rafraîchir la page
Andrey Zausaylov
la source
1
Qui sait si ce sera une solution fiable, mais cela a fonctionné cette fois! 😁
James Hill
1
Mec, j'ai toujours cherché ce "correctif"
Jordec
cela a fonctionné pour moi
Smith
cela a fonctionné pour moi aussi
AVH
24

J'ai eu ce problème, et je viens de constater que la désactivation de "Activer les cartes sources Javascript" dans la fenêtre des paramètres de l'inspecteur (F1) l'a résolu

J'ai recréé mon js.map, réactivé le paramètre et la source était toujours disponible.

Donc, je pense que mon problème était que je servais des js non réduits (paramètres de développement), mais la carte (conçue pour les paramètres de production) était toujours là et obsolète.

Paul
la source
4
fermez chrome et rouvrez après avoir changé le réglage aussi!
Nateous
17

Dans mon cas, je n'ai pas pu accéder à la console car son onglet affichait également une page vierge. Ma solution est d'utiliser la combinaison CTRL + SHIFT + I avec l'écran de débogage vide en focus, puis tapez parent.location.reload(true)dans la console du débogueur popup.

Ikenna Anthony Okafor
la source
2
Comme dans le commentaire de WillB ci-dessus, cela recharge la page et perd toute interaction que vous auriez pu avoir sur la page avant d'ouvrir le débogueur.
Peter Brand
Impressionnant! Cela a fonctionné pour moi après 2 heures de lutte.
Zeeshan Adil
Je ne sais pas ce qu'implique le parent.location.reload mais il a résolu mon problème après plusieurs redémarrages de chrome / rafraîchissement dur / vidage des données du cache de chrome! Merci!
beluga
Heureux d'avoir pu aider. Il recharge la fenêtre parente (la fenêtre vide dans laquelle vous avez tapé CTRL + MAJ + I) à partir de la fenêtre enfant.
Ikenna Anthony Oka pour le
5

Dans mon cas, il y avait une extension dans chrome qui faisait que le débogueur donnait la page d'index vierge sous une section «sans domaine» du débogueur. Après avoir désactivé toutes les extensions non essentielles dans Chrome, le débogueur a de nouveau montré la source correcte.

Brett Drake
la source
4
Cela aurait été formidable si vous aviez pris note de l'extension causant le problème. De nombreuses extensions peuvent être non essentielles pour vous et essentielles pour moi. Cela rend la réponse sans valeur.
Imad
5
Je ne serais pas d'accord avec «sans valeur». Au moins, vous savez vérifier les plugins.
Brett Drake
C'était mon problème - dans mon cas, j'avais installé l'extension VPN UltraSurf Unblock. L'ouverture de la page de débogage locale dans une fenêtre de navigation privée l'a fait apparaître instantanément. Un petit moment "durrrr" que je dois admettre :( haha!
IfElseTryCatch
L'utilisation de la navigation privée a résolu le problème pour moi.
Petah
4

Outils de développement (F12) -> Fenêtre des paramètres de l'inspecteur (F1) -> Restaurer les paramètres par défaut et recharger [bouton en bas] fonctionne pour moi!

Sylwia M
la source
2

J'ai remarqué que certains problèmes javascript sérieux causaient des problèmes comme celui-ci. Dans mon cas, j'ai écrasé par erreur tout mon document en raison d'une faute de frappe.

Si vous obtenez une page HTML vierge dans le débogueur Chromium WebTools, examinez attentivement votre javascript pour vous assurer qu'il ne fait rien d'étrange.

AWT
la source
1
Cela semble être ce qui a également causé le problème pour moi. Dans mon cas, j'avais une mauvaise référence jquery. $ ('inputid') par opposition à $ ('# inputid').
Vincent le
2

J'ai résolu mon problème en utilisant une toute nouvelle session avec l'argument de ligne de commande "--user-data-dir" et en désactivant "Enable Javascript Source Maps". Mon code apparaît bien dans le débogueur Firefox, il semble donc être causé par un bogue de Chrome.

Simon
la source
1

J'ai eu le même problème. Même une actualisation de la page n'a pas fonctionné.

L' chrome://helpactualisation du navigateur + redémarrage a fonctionné pour moi.

Vous pouvez également mettre à jour Chrome via le menu:

entrez la description de l'image ici

Charles
la source
0

dans mon cas, cela s'est produit soudainement, après avoir été infecté par un logiciel malveillant et réinitialisé mon navigateur - cache / données d'application supprimés.

Solution: supprimer l'extension qui peut affecter Js dans mon cas

J'ai supprimé / désactivé l'extension ci-dessous et j'ai travaillé https://chrome.google.com/webstore/detail/quick-javascript-switcher/geddoclleiomckbhadiaipdggiiccfje?hl=en

étrange car avant d'avoir cet addon sans problème, je pense que c'est comme la RCR à cœur. :)

shareef
la source
0

Dans mon cas, j'ai avalé la synchronisation des navigateurs pendant quelques jours. J'ai rebondi gulp et résolu mon problème.

dman
la source
0

J'avais aussi ce problème quand j'avais un énorme fichier java-script, j'avais cette ligne

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

dans un cycle for et il comptait 3000 éléments, donc le fichier grossissait dans le script et le fichier était vide dans les sources chrome. (Je pense que j'ai atteint une certaine limitation)

Après avoir réduit le fichier en supprimant 100 éléments, cela a très bien fonctionné.

Dongolo Jeno
la source