web-dev-qa-db-fra.com

Utilisation de Google Chrome pour déboguer et modifier le javascript intégré à la page HTML

Les outils de développement Chrome vous permettent de modifier javascript dans le navigateur si le javascript est dans un fichier .js. Cependant, il ne semble pas me permettre de modifier le javascript qui est intégré dans une page HTML. c'est à dire:

<script type="text/javascript> 
// code here that I want to debug/edit
</script>

C'est un gros problème pour moi car j'ai un peu de javascript intégré dans une certaine page.

Similaire à cette question: Modifier les blocs JavaScript de la page Web ... en direct mais il s'agit de Firefox, pas de Chrome.

Comment puis-je modifier le javascript intégré dans une page HTML à l'aide de Google Chrome Developer Tools?

javascriptdebugginggoogle-chrome
56
Mark Robinson

En fait chrome permet de le faire, choisissez les fichiers HTML dans l'onglet Sources dans la fenêtre des outils de développement. Vous verrez HTML au lieu de javascript et ajoutez simplement des points d'arrêt dans le <script> Mots clés. Vous pouvez également ajouter debugger; commande pour écrire ce que vous voulez déboguer. Par exemple:

<script>
 // some code
 debugger; // This is your breakpoint
 // other code you will able to debugg
</script>

N'oubliez pas de supprimer debugger; est lorsque vous souhaitez libérer votre site Web.

29
antyrat

J'ai eu du mal à localiser le fichier contenant mon javascript intégré/intégré. Pour d'autres ayant le même problème, cela peut être utile ou non ...

Utilisation de Chrome 21.0.1180.89 m pour Windows

enter image description here

Tous les fichiers sont affichés après avoir cliqué sur ce bouton placé très discrètement. Voir:

enter image description here

Vous pouvez maintenant commencer le débogage ...

enter image description here

30
Theo

Aucune de ces réponses n'a fonctionné pour moi.

Ce qui fonctionne pour moi, c'est que si mon javascript sur la page est déjà chargé, je peux copier ce javascript, le modifier, puis le coller dans la console et il redéfinira toutes les fonctions ou tout ce dont j'ai besoin pour être redéfini.

par exemple, si la page a:

<script>
var foo = function() { console.log("Hi"); }
</script>

Je peux prendre le contenu entre le script, le modifier, puis le saisir dans le débogueur comme:

foo = function() { console.log("DO SOMETHING DIFFERENT"); }

et ça marchera pour moi.

Ou si vous en avez envie,

function foo() {
    doAThing();
}

Vous pouvez simplement entrer

function foo() {
    doSomethingElse();
}

et foo sera redéfini.

Probablement pas la meilleure solution de contournement, mais cela fonctionne.

18
byronaltice

Allez dans l'onglet Éléments, trouvez votre script, faites un clic droit sur la partie dont vous avez besoin et choisissez "Modifier en HTML".

Si Modifier au format HTML n'apparaît pas, double-cliquez sur le nœud et il devrait être mis en surbrillance et modifiable.

1
brimble2010