2011-09-21 12 views
51

Gli strumenti di sviluppo di Chrome consentono di modificare javascript nel browser se il javascript si trova in un file .js. Tuttavia, non sembra consentirmi di modificare javascript incorporato in una pagina HTML. vale a dire:Utilizzo di Google Chrome per eseguire il debug e modificare javascript incorporato nella pagina HTML

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

questo è un grosso problema per me come io ho un po 'di JavaScript incorporato in una certa pagina.

Simile a questa domanda: Edit JavaScript blocks of web page... live ma si tratta di Firefox, non di cromo.

Come posso modificare javascript incorporato in una pagina HTML utilizzando Google Chrome Developer Tools?

+5

È possibile utilizzare Opera. Opera consente la modifica di file JS e JS in linea. Dopo aver ricaricato la pagina, le modifiche verranno applicate. Fai clic con il pulsante destro del mouse su> Sorgente> Apporta modifiche> Applica modifiche. – XP1

+1

@ XP1 non ho mai pensato di fare +1 su una soluzione Opera. Ma eccoci qui. +1 per la modifica live in Opera. –

risposta

28

In realtà Chrome consente di farlo, scegliere i file HTML nella scheda Sorgenti nella finestra degli strumenti di sviluppo. Vedrai HTML invece di javascript e aggiungerai semplicemente i breakpoint nei tag <script>. Inoltre è possibile aggiungere il comando debugger; per scriptare ciò che si desidera eseguire il debug. Per esempio:

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

Non dimenticare di rimuovere debugger; 's quando si vuole liberare il vostro sito web.

+3

Ancora non funziona per me. Prendiamo http://www.google.co.uk/ come esempio. Naviga con Chrome e attiva gli strumenti per sviluppatori. Posso modificare il file .js nella scheda "Script", ma se provo a modificare i file "www.google.co.uk/" o "gzip.html" sotto quella scheda non succede nulla. Faccio doppio clic sul codice ma non ottengo un cursore di modifica come faccio se faccio clic sui file .js. Mi sto perdendo qualcosa??? –

+3

Bene, hai ragione, ma puoi modificarlo nella scheda 'Elementi'. – antyrat

+0

Inoltre, aggiungendo i punti di interruzione, potrai modificare il tuo script usando la console – antyrat

1

Vai alla scheda Elementi, trova il tuo script, fai clic con il pulsante destro del mouse sulla parte che ti interessa e scegli "Modifica come HTML".

Se Modifica come HTML non viene visualizzata, fare doppio clic sul nodo e dovrebbe essere evidenziato e modificabile.

+11

Se modificate il codice JS in "modifica come HTML" mentre siete in pausa su un punto di interruzione JS, non modificherà il codice JS nella scheda fonti. – Jez

+0

non funzionerà !! – JerryGoyal

29

Ho avuto difficoltà a individuare il file con il mio javascript incorporato/incorporato. Per gli altri che hanno lo stesso problema, questo può o non può essere utile ...

Utilizzando Chrome 21.0.1180.89 m per Windows

enter image description here

Tutti i file sono visualizzabili i link che molto discretamente posizionato pulsante. Vedi:

enter image description here

Ora si può iniziare il debug ...

enter image description here

+18

+1 per la faccina sorridente. –

+0

Quello smile ha bisogno del naso della NSA. –

+0

A volte mentre fai clic su cose Google Chrome ti porterà via dalla scheda __Elements__ anche se hai iniziato lì. Quindi se non riesci a modificare le cose, ricontrolla la scheda __Elements__. – Seanny123

14

Nessuna di queste risposte hanno lavorato per me.

Ciò che funziona per me è se ho il mio javascript sulla pagina già caricata, posso copiare quel javascript, modificarlo, quindi incollarlo nella console e ridefinirà qualsiasi funzione o qualsiasi altra cosa abbia bisogno di essere ridefinita.

per esempio, se la pagina ha:

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

posso prendere il contenuto tra lo script, modificarlo, quindi immetterlo nel debugger come:

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

e funzionerà per me.

O se avete come,

function foo() { 
    doAThing(); 
} 

È possibile inserire solamente

function foo() { 
    doSomethingElse(); 
} 

e foo sarà ridefinito.

Probabilmente non è la soluzione migliore, ma funziona.

+4

Grazie mille per questa risposta! Questo è stato l'unico che ha funzionato anche per me ... – bobo

+2

grazie mille per questo! non quello che sto cercando, ma è l'unico che funziona! –

+0

Questa pagina si apriva in un browser in cui non ero connesso allo stackoverflow ... loggato solo così potevo votare questa risposta. Grazie mille per questa soluzione! – RizJa

Problemi correlati