Modifier Javascript à l'aide des outils de développement Chrome

94

J'essaie de modifier javascript sur un site à l'aide des outils de développement de Chrome. J'ai lu environ 30 comptes rendus sur la façon de procéder et j'ai regardé quelques vidéos. Le fait est que lorsque je vais dans l'onglet sources et que j'ouvre le fichier que je souhaite modifier, je ne peux rien y faire. Y a-t-il une étape qui me manque?

Je peux créer des points d'arrêt, passer en revue, etc. Je ne peux tout simplement pas modifier. Cette fonctionnalité a-t-elle été supprimée récemment?

javascript google-chrome web-developer-toolbar

— cooperia
source

1

Je peux très bien passer des appels dans la console. Je ne peux tout simplement pas modifier des choses.

— cooperia

1

Vous pouvez remplacer les fonctions et les variables locales, mais il n'y a aucun moyen d'enregistrer les modifications apportées à un fichier à partir des outils de développement. Vous avez toujours besoin d'un éditeur externe pour cela.

— Geuis

1

En fait, je peux éditer des fichiers css mais je ne peux pas éditer un script incorporé dans un fichier php. >.>

— cooperia

1

Eh bien, je peux faire ce que je veux avec Opera. Problème en quelque sorte résolu.

— cooperia

1

@cooperia met votre code js dans un fichier * .js, puis vous pourrez l'éditer et l'exécuter en temps réel dans Chrome.

— Mahn du

102

Je sais que cette question est périmée, mais j'ai juste eu un problème similaire et j'ai trouvé la solution.

Si vous avez joliment le fichier, Chrome n'autorisera pas les modifications. Je l'ai désactivé et j'ai pu modifier. Prêt à parier que c'est / était votre problème.

— raddevon
source

4

oui, cela a aidé, merci @raddevon, je peux les modifier maintenant mais aucun effet n'arrive à la page

— Bolas

2

Pour les autres qui recherchent ce sujet: j'avais mis prettify sur OFF mais je ne pouvais toujours pas modifier. L'activer et le désactiver à nouveau aidé. (Merci à IT Crowd pour ce conseil;))

— Drkawashima

3

Suite: Non. Il s'avère que j'ai le même problème que @raddevon. Peut-être un bogue dans Chrome. Vous pouvez modifier et enregistrer le script, et vous pouvez atteindre des points d'arrêt lors du débogage. Mais le script en cours d'exécution est toujours la version originale non modifiée. Exemple: j'ai édité le script, commenté chaque ligne, mais je pouvais toujours exécuter le script, atteindre des points d'arrêt sur les lignes, etc. Donc la version modifiée n'est même pas en cours d'exécution, elle est juste affichée ... Bien sûr, je relance le script de toutes sortes de manières différentes sans aucun effet

— Drkawashima

4

En guise de note latérale, si vous joliment, puis copiez et collez dans le fichier d'origine, ce sera un fichier original prétendu qui est modifiable.

— Eoin

2

@Eoin Wonderful! Cela a totalement fait l'affaire. Et avec la fonctionnalité "Local Overrides", cela fonctionne parfaitement. Merci pour l'indice :-)

— Xan-Kun Clark-Davis

52

Vous pouvez éditer javascript dans les outils de développement sur l'onglet "Sources", MAIS il ne vous permettra d'éditer javascript que dans son propre fichier. Le script intégré dans un fichier HTML (ou PHP) restera en lecture seule.

— salut
source

4

J'utilise chrome sur Linux et je ne suis toujours pas en mesure de modifier le javascript même s'il s'agit d'un seul fichier .js.

— roopunk

2

Note légèrement intéressante: activer / désactiver Pretty Print (l'icône "{}") permettra de modifier les js intégrés, mais les changements ne prendront pas effet, donc ce n'est toujours pas ce que nous recherchons. (Chrome 29)

— Patrick

C'est ce que j'avais besoin de savoir. Je vous remercie.

— geeves

29

Il a quelques limites:

doit être un fichier JS. ne peut pas être intégré des balises dans une page html
il ne peut pas être embelli.

— gcb
source

Si, après avoir suivi les instructions ci-dessus et que les modifications dans l'onglet Sources ne prennent tout simplement pas effet, essayez de cliquer avec le bouton droit sur le fichier édité dans l'arborescence de gauche et sélectionnez "Enregistrer". Une boîte de dialogue peut apparaître vous demandant d'enregistrer un fichier local, mais vous pouvez simplement annuler. Ce n'est qu'à ce moment-là que l'historique des modifications de Chrome montre enfin que la modification est bloquée.

— Erhhung

Je devenais fou parce que ce nouveau fichier avait incorporé js mais je ne pouvais pas éditer..je ne comprenais pas pourquoi..merci #gcb et #welah

— carinlynchin

Est-il possible de désinscrire un fichier JS de la liste sous l' Sourcesonglet des outils de développement?

— techie_28

@ techie_28 pas sûr, ouvrez une autre question. Mais j'écrirais une extension rapide pour cela.

— gcb

13

Je ne sais pas si vous en avez besoin pour enregistrer de manière permanente, mais si vous devez simplement modifier temporairement les js:

Je peux copier ce javascript que je veux modifier dans un éditeur de texte, le modifier, puis le coller dans la console et il redéfinira toutes les fonctions ou tout ce que j'ai besoin d'ê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 cela fonctionnera pour moi.

Ou si vous avez comme,

function foo() {
    doAThing();
}

Vous pouvez simplement entrer

function foo() {
    doSomethingElse();
}

et foo sera redéfini.

Ce n'est probablement pas la meilleure solution de contournement, mais cela fonctionne. Durera jusqu'à ce que vous rechargiez la page.

— byronaltice
source

4

J'ai fait une recherche "Chrome dev tool edit javascript". Cette page est le premier résultat de la recherche. Mais c'est trop dépassé, ça ne m'aide pas.

J'utilise Chrome 73, cette version de Chrome a l'option "Activer les remplacements locaux". En utilisant la fonction, je pourrais éditer un javascript et pourrais exécuter et déboguer.

— wafe
source