Modifica nel debugger di Chrome

247

Come faccio a modificare "dinamicamente" il codice JavaScript nel debugger di Chrome? Non è per me, quindi non ho accesso al file di origine. Voglio modificare il codice e vedere quali effetti hanno sulla pagina, in questo caso impedendo a un'animazione di fare la fila un sacco di volte.

javascript  google-chrome  debugging 
— Tom
fonte
5
Potresti usare Opera. Opera consente la modifica di file JS. Dopo aver ricaricato la pagina, le modifiche verranno applicate. Fare clic con il tasto destro> Sorgente> Apporta modifiche> Applica modifiche.
— XP1,
Questo è un fantastico tutorial per il debugger di Chrome. Mostra i passaggi molto semplici per apportare modifiche in-debugger agli script.
— SaganRitual
1
Puoi anche "iniettare" il codice tramite breakpoint condizionale . Nell'esempio fornito utilizzare num = 5, console.log(arguments[0], num), falseper aggiornare e registrare il valore all'interno della foofunzione.
— mems
Si prega di trovare questo stackoverflow.com/questions/66420/...
— stackinfostack

Risposte:

80

Puoi utilizzare il debugger JavaScript incorporato in Strumenti per gli sviluppatori di Chrome nella scheda "Script" (nelle versioni successive è la scheda "Sorgenti"), ma le modifiche applicate al codice vengono espresse solo nel momento in cui l'esecuzione passa attraverso di esse. Ciò significa che le modifiche al codice che non è in esecuzione dopo il caricamento della pagina non avranno effetto. A differenza, ad esempio, delle modifiche al codice che risiedono nei gestori del mouseover , che è possibile testare al volo.

C'è un video dell'evento I / O di Google 2010 che introduce altre funzionalità degli Strumenti per sviluppatori di Chrome.

— Adamo
fonte
26
Nelle versioni successive di Chrome le icone delle schede sono scomparse e la scheda "Script" è stata rinominata in "Fonti", quindi potrebbe non essere ovvio trovare il debugger javascript. Alcune ulteriori informazioni qui stackoverflow.com/questions/12113769/...~~V~~singular~~3rd
— chrisjleu
9
Non esiste un tale metodo. Inoltre, non riesco a modificare il codice nella scheda Sorgenti.
— Melab,
17
Il debugger di Chrome non consente la modifica locale di javascript. Falso.
— omike
1
@oMiKeY Cosa è falso? Chrome certamente consente di modificare lo script nel debugger.
— JLRishe,
6
@oMiKeY puoi modificare se lo script non è
— preimpostato
283

Mi sono imbattuto in questo oggi, mentre stavo giocando con il sito Web di qualcun altro.

Mi sono reso conto che avrei potuto collegare un punto di interruzione nel debugger a qualche riga di codice prima di quello che volevo modificare dinamicamente. E poiché i punti di interruzione rimangono anche dopo un ricaricamento della pagina , sono stato in grado di modificare le modifiche desiderate mentre ero in pausa al punto di interruzione e quindi ho continuato a caricare la pagina.

Quindi, come soluzione rapida e se funziona con la tua situazione:

  1. Aggiungi un punto di interruzione in un punto precedente dello script
  2. Ricarica la pagina
  3. Modifica le tue modifiche nel codice
  4. CTRL+ s(salva modifiche)
  5. Riattiva il debugger
— sjacob
fonte
1
Grazie! Ho trovato che ha funzionato quando è necessario apportare modifiche in una funzione anonima auto-eseguita chiamata proprio vicino al caricamento della pagina.
— Peter,
1
Argh, perché ci avevo provato prima e non funzionava e sebbene oh uomo, come mi sono perso. Ma sì, non funziona per me.
— Jamie Hutber,
8
Fondamentale per me era sapere che le modifiche devono essere salvate (passaggio 4). Grazie!
— Sergey Goliney,
3
Non funziona su JavaScript all'interno di file HTML per me. Inoltre, se hai aggiunto una cartella allo spazio di lavoro, seleziona il file js locale , fai clic con il pulsante destro del mouse e mappa quel file sulla rete dito.
— oo,
1
Quindi non c'è modo di modificare gli script nei file HTML?
— Guerriero,
13

Questo e ciò che stai cercando:

1.- Vai alla scheda Sorgente e apri il file javascript

2.- Modifica il file, fai clic con il pulsante destro del mouse e verrà visualizzato un menu: fai clic su Salva e salvalo localmente.

Per visualizzare il diff o ripristinare le modifiche, fai clic con il pulsante destro del mouse e seleziona l'opzione Modifiche locali ... dal menu. Vedrai le tue modifiche differire rispetto al file originale se espandi il timestamp mostrato.

Informazioni più dettagliate qui: http://www.sitepoint.com/edit-source-files-in-chrome/

— artemisian
fonte
5

Abbastanza facile, vai alla scheda "script". E seleziona il file di origine desiderato e fai doppio clic su qualsiasi riga per modificarlo.

— gnur
fonte
4
Sarebbe fantastico se potessi salvare le modifiche su disco nel caso del file: // URLs
— Jim Blackler
3
È stato esattamente quello che ho fatto, ma le modifiche non si sono riflesse sulla pagina, come ci si aspetterebbe. Devo cambiare $ (selettore) .fadeIn () ... in $ (selettore) .stop (vero, vero) .fadeIn () ... Sai? E voglio essere in grado di vedere che succede sulla pagina.
— Tom,
1
Oh dannazione, hai ragione. Ora mi chiedo perché Chrome ci consenta di modificare qualsiasi cosa se non ha alcun effetto ..
— Gnur,
"Salva come ..." salva solo il file sul tuo computer. Non applica le modifiche dopo il ricaricamento della pagina. Se si desidera applicare le modifiche ai file JS per il debug, è possibile utilizzare Opera.
— XP1,
1
e questo chiamato tincr: chrome.google.com/webstore/detail/…
— JustGoscha
3

Poiché questa è una domanda piuttosto popolare che si occupa di live-editing di JS, voglio sottolineare un'altra utile opzione. Come descritto da svjacob nella sua risposta:

Mi sono reso conto che avrei potuto collegare un punto di interruzione nel debugger a qualche riga di codice prima di quello che volevo modificare dinamicamente. E poiché i punti di interruzione rimangono anche dopo un ricaricamento della pagina, sono stato in grado di modificare le modifiche che desideravo mentre ero in pausa al punto di interruzione e quindi ho continuato a caricare la pagina.

La soluzione di cui sopra non ha funzionato per me per JS abbastanza grande (bundle webpack - versione minimizzata 3,21 MB, 130k righe di codice in versione preimpostata) - Chrome si è arrestato in modo anomalo e ha chiesto il ricaricamento della pagina che ha ripristinato eventuali modifiche salvate. La strada da percorrere in questo caso è stata Fiddler, in cui è possibile impostare l'opzione AutoRespond per sostituire qualsiasi risorsa remota con qualsiasi file locale dal proprio computer - vedere questa domanda SO per i dettagli .

Nel mio caso ho anche dovuto aggiungere le intestazioni CORS al violinista per deridere con successo la risposta.

— dominik
fonte
2

Se il suo javascript che gira su un pulsante fa clic , è sufficiente apportare la modifica in Sorgenti> Sorgenti (negli strumenti di sviluppo in Chrome) e premendo Ctrl + S per salvare . Lo faccio sempre.

Se aggiorni la pagina, le modifiche a javascript scompariranno, ma Chrome ricorderà comunque i tuoi punti di interruzione.

— developer747
fonte
2

Ora Google Chrome ha introdotto una nuova funzionalità. Usando questa funzione È possibile modificare il codice in Chrome Brows. (Modifica permanente sulla posizione del codice)

Per questo, premi F12 -> Scheda Sorgente - (lato destro) -> File system - in quel caso seleziona la tua posizione del codice. e poi il browser Chrome ti chiederà il permesso e dopo quel codice sarà affondato di colore verde. e puoi modificare il tuo codice e si rifletterà anche sulla posizione del tuo codice (significa che cambierà in modo permanente)

Grazie

— stackinfostack
fonte
2

Proprio come la risposta di @mark, possiamo creare uno snippet in Chrome DevTools, al overrideJavaScript predefinito. Infine, possiamo vedere quali effetti hanno sulla pagina.

Immagine

— vino kami
fonte
1

ecco una dolce introduzione al debugger js in Chrome che ho scritto. Forse aiuterà gli altri a cercare informazioni su questo: http://meeech.amihod.com/getting-started-with-javascript-debugging-in-chrome/

— meeech
fonte
1
Questo è un buon commento. Sfortunatamente, non dice nulla sulla modifica di JS nel debugger, che è l'attività in questione.
— Bruno Bronosky,
Disaccordo. Vedete alla fine, faccio un esempio specifico di come "" dinamicamente "modificare il codice JavaScript nel debugger di Chrome" che fa parte della domanda.
— meeech,
1
Meeech, a meno che io non fraintenda il tuo post, dimostri come valutare JS sulla console. Ciò è diverso dalla modifica di una funzione in modo tale che quando la funzione viene chiamata in futuro, si comporta diversamente.
— Bruno Bronosky,
Giusto. Ho capito che modifica significava cambiamento intorno ai valori della pagina live e ho pensato che la scrittura avrebbe aiutato, dato che una volta che lo hai nella console, puoi giocare con i valori e qualsiasi altra cosa nel contesto dell'esecuzione.
— Meeech,
1
sì, meeech, ho fatto esattamente quello che descrivi per molti anni. Alla fine mi sono frustrato di non riuscire a ottenere un buon circuito di feedback per modificare i gestori di eventi. Soprattutto quelli che si attivano durante il caricamento della pagina. Come abbiamo discusso da AaronLS nei commenti della risposta di gnur, a volte la modifica in DevTools> Fonti> Fonti funziona e altre volte no. Ma quando funziona, è piuttosto dolce!
— Bruno Bronosky,
1

puoi modificare i file javascrpit dinamicamente nel debugger di Chrome, nella scheda Sorgenti , tuttavia le modifiche andranno perse se aggiorni la pagina, per mettere in pausa il caricamento della pagina prima di apportare le modifiche, dovrai impostare un punto di interruzione e ricaricare la pagina e modifica le modifiche e infine riattiva il debugger per rendere effettive le modifiche. Debugger di Chrome

— Seif Tamallah
fonte
devi tenere aperta la console in modo che Chrome si fermi nei punti di interruzione, altrimenti Chrome ignorerà i punti di interruzione
— Seif Tamallah,
non funziona. Ricarica usando F5 e si interrompe, cambio il file, quindi continuo a correre e ottengo lo stesso errore che ho appena risolto. È un file js accanto alla pagina principale.,
— darkgaze
1

Stavo cercando un modo per cambiare la sceneggiatura ed eseguire il debug di quella nuova sceneggiatura. Il modo in cui sono riuscito a farlo è:

  1. Impostare il punto di interruzione nella prima riga dello script che si desidera modificare ed eseguire il debug.

  2. Ricarica la pagina in modo che il punto di interruzione venga colpito

  3. Incolla il tuo nuovo script e imposta i punti di interruzione desiderati in esso

  4. Ctrl + s, e la pagina si aggiorna facendo colpire quel punto di interruzione nella prima riga.

  5. F8 per continuare, e ora lo script appena incollato sostituisce quello originale purché non vengano effettuati reindirizzamenti e ricariche.

— 100r
fonte
0

Puoi utilizzare "Sostituzioni" in Chrome per mantenere le modifiche javascript tra i caricamenti di pagina, anche dove non stai ospitando la fonte originale.

  1. Crea una cartella in Strumenti per gli sviluppatori> Sorgenti> Sostituzioni
  2. Chrome chiederà l'autorizzazione per la cartella, fai clic su Consenti
  3. Modifica il file in Sorgenti> Pagina, quindi salva (ctrl-s). Un punto viola indica che il file è stato salvato localmente.

La sottoscheda Sostituisci in Strumenti per sviluppatori di Chrome

— Mark Foreman
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.