Chrome Dev Tools: modifica javascript e ricarica

196

È possibile modificare il JavaScript di una pagina e quindi ricaricare la pagina senza ricaricare il file JavaScript modificato (e quindi perdere le modifiche)?

javascript google-chrome-devtools

— CDT
fonte

220

Questo è un po 'una soluzione, ma un modo per ottenerlo è l'aggiunta di un punto di interruzione all'inizio del file javascript o del blocco che si desidera manipolare.

Quindi, quando si ricarica, il debugger si interromperà su quel punto di interruzione e sarà possibile apportare tutte le modifiche desiderate all'origine, salvare il file e quindi eseguire il debugger attraverso il codice modificato.

Ma come tutti hanno detto, il prossimo ricaricamento delle modifiche sparirà - almeno ti consentirà di eseguire un lato client JS leggermente modificato.

— Ashley Schroder
fonte

10

Si è scoperto che questa era la risposta che stavo cercando. Posiziona un breakpoint sulla prima riga del codice javascript. Quindi quando si verifica l'interruzione, incolla il codice modificato. Pausa e funziona!

— Nicholas Blasgen,

come si modifica o si incolla il codice lì dentro? Sicuramente non vedo quella funzionalità nella console di Chrome. Posso modificare JS / HTML dalla sezione Elements, ma ciò non si ricarica automaticamente. Ma nel luogo in cui sono impostati i punti di interruzione, sembra essere di sola lettura

— Josh Sutterfield

Purtroppo questa non è ancora un'ottima soluzione. Qualsiasi codice aggiunto non è disponibile nella console. Ad esempio, l'aggiunta var foo = 'bar'di uno script non viene esposta fooalla console.

— AgmLauncher,

che succede con gli script esterni? i punti di interruzione sembrano scomparire da loro.

— OlehZiniak,

Funziona finché si desidera modificare gli script caricati esternamente, né Chrome né gli strumenti di debug di FireFox non consentiranno di modificare il javascript incorporato, anche se la sua esecuzione viene interrotta da un punto di interruzione.

— Marek,

150

Grandi notizie, la correzione arriverà a marzo 2018, vedi questo link: https://developers.google.com/web/updates/2018/01/devtools

"Le sostituzioni locali consentono di apportare modifiche in DevTools e mantengono tali modifiche durante il caricamento della pagina. In precedenza, tutte le modifiche apportate in DevTools andrebbero perse quando si ricaricava la pagina. Le sostituzioni locali funzionano per la maggior parte dei tipi di file

Come funziona:

Si specifica una directory in cui DevTools dovrebbe salvare le modifiche. Quando si apportano modifiche in DevTools, DevTools salva una copia del file modificato nella propria directory.
Quando si ricarica la pagina, DevTools serve il file locale modificato, anziché la risorsa di rete.

Per impostare le sostituzioni locali:

Apri il pannello Sorgenti.
Apri la scheda Sostituzioni.
Fai clic su Sostituisci impostazioni.
Seleziona la directory in cui desideri salvare le modifiche.
Nella parte superiore della finestra, fare clic su Consenti per dare a DevTools l'accesso in lettura e scrittura alla directory.
Apporta le tue modifiche ".

AGGIORNAMENTO (19 marzo 2018): è live, spiegazioni dettagliate qui: https://developers.google.com/web/updates/2018/01/devtools#overrides

— nico
fonte

12

Con il rilascio di Chrome 65, questa dovrebbe essere la nuova risposta accettata. (La funzionalità era già disponibile in Chrome Canary)

— Micros

1

Ho un file "a.js? Ver = 1.2". Viene salvato nella cartella override come "a.js" e non caricato come override. Non funziona quando ci sono parametri? C'è una soluzione?

— Ralf,

Funziona come previsto, ma è necessario occuparsi di una cosa. Devi cancellare le configurazioni di override o eliminare i file modificati localmente (salvati nella cartella che specifichi durante la configurazione degli override) quando vuoi caricare i tuoi js originali.

— Muhammad Murad Haider,

61

L' estensione Sostituzione risorse consente di fare esattamente questo:

creare una regola di file per l'URL che si desidera sostituire
modifica js / css / etc nell'estensione
ricaricare tutte le volte che vuoi :)

— laktak
fonte

1

Il trucco mi ha ringraziato. Prima usavo Fiddler per Windows prima di quella estensione. In questo momento posso eseguire il debug dei file remoti su qualsiasi piattaforma.

— Ahmad Alfy,

Non capisco il software, qualcuno può spiegare come devo installarlo esattamente?

— Nero

0

So che non è la risposta alla domanda precisa (Strumenti per gli sviluppatori di Chrome) ma sto usando questa soluzione alternativa con successo: http://www.telerik.com/fiddler

(abbastanza sicuro che alcuni sviluppatori web conoscano già questo strumento)

Salva il file localmente
Modifica come richiesto
Profitto!

Documenti completi: http://docs.telerik.com/fiddler/KnowledgeBase/AutoResponder

PS. Preferirei che fosse implementato in Chrome come una bandiera preserve after reload, non posso farlo ora, forum e gruppi di discussione bloccati sulla rete aziendale :)

— Mars Robertson
fonte

-8

Sì, basta aprire la scheda "Sorgente" negli strumenti di sviluppo e passare allo script che si desidera modificare. Apporta le modifiche direttamente nella finestra degli strumenti di sviluppo e quindi premi ctrl + s per salvare lo script - sappi che i nuovi j verranno utilizzati fino a quando non aggiorni l'intera pagina.

— jacksbox
fonte

Quale versione di Chrome? Sì, puoi "modificare" il contenuto di uno script (ma non gli script sulla pagina stessa), ma le modifiche non hanno alcun effetto e ctrl-s / save poiché ti consente di salvare lo script localmente (come ctrl-come in la finestra principale).

— davidkonrad,

Uso la versione 34: quando modifico uno script, ad esempio aggiungo console.log a un evento click (già associato) e lo salvo, la console emette il seguente messaggio: "Ricompilazione e aggiornamento riusciti". - dopo di che. quando innesco l'evento click ottengo l'output del log nella console.

— jacksbox

Quando si ricarica la pagina sembra non utilizzare il file modificato localmente.

— Jake Wilson,

32

mi avevi al "si" ... ma poi mi hai perso al "fino a quando non aggiorni l'intera pagina" ....

— Cool Blue