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

Question

Chrome developer tools vous permet de modifier le javascript dans le navigateur si le javascript est dans une .fichier js. Cependant, il ne semble pas me permettre de modifier le javascript 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 page.

Semblable à cette question: Modifier les blocs JavaScript d'une page web... vivre , mais c'est à propos de firefox, pas de chrome.

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

Answer 1

En réalité, chrome permet cela, choisissez des fichiers HTML dans l'onglet Scripts de la fenêtre des outils de développement. Vous verrez HTML au lieu de javascript et vous ajouterez simplement des points d'arrêt dans les balises <script> . Vous pouvez également ajouter la commande debugger; à un script de 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; lorsque vous souhaitez publier votre site Web.

Answer 2

J'ai eu un moment difficile la localisation d'un fichier qui avait mon inline/javascript intégré. Pour les autres qui ont le même problème, cela peut ou peut ne pas être utile...

À l'aide de Chrome 21.0.1180.89 m pour Windows

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

Vous pouvez maintenant commencer le débogage...

Answer 3

Accédez à l'onglet Éléments, recherchez votre script, cliquez avec le bouton droit de la souris sur la pièce requise et choisissez "Modifier en tant que HTML".

Si Modifier en tant que HTML n'apparaît pas, double-cliquez sur le nœud pour le mettre en surbrillance et le modifier.