Come si avvia il debugger JavaScript in Google Chrome?

418

Quando utilizzo Google Chrome, voglio eseguire il debug del codice JavaScript. Come lo posso fare?

javascript  google-chrome  debugging  google-chrome-devtools 
— Kevin Driedger
fonte
— Bergi,
— Davut Gürbüz
— cssyphus

Risposte:

318

Windows: CTRL- SHIFT- JOPPURE F12

Mac: ⌥- ⌘-J

Disponibile anche tramite il menu Chiave inglese (Strumenti> Console JavaScript):

Menu console JavaScript

— John Sheehan
fonte
23
Penso che il collegamento da allora sia cambiato in CTRL-SHIFT-J.
— Martijn Laarman,
5
o Cmd-Shift-J per Mac. Dio, adoro questo <kbd>tag. Peccato non poterlo usare nei commenti.
— Anurag,
11
La scorciatoia per Mac sembra essere effettivamente Alt-Cmd-Jsull'ultima versione di Chrome.
— Mathew Byrne,
64
F12è il modo più semplice
— Juan Mendes,
guardare questa domanda mi fa capire quanto sono migliorate le mie abilità javascript da livelli principianti a standard abbastanza decenti
— Kamal Reddy,
399

Prova ad aggiungere questo alla tua fonte:

debugger;

Funziona nella maggior parte, se non in tutti i browser. Inseriscilo da qualche parte nel tuo codice e funzionerà come un punto di interruzione.

— Omer van Kloeten
fonte
È difficile trovare come si chiama questo comando se lo hai dimenticato!
— Ahmed Fasih,
4
È anche difficile cercare su Google per motivi che non sempre funzionano. Ci sono limiti a questo?
— Seanonymous
2
Per poter funzionare, devi avere gli Strumenti per sviluppatori di Chrome aperti (premi F12 su Windwos / Linux, non conosci la chiave su un Mac o controlla solo un elemento). Se hai gli Strumenti per gli sviluppatori aperti, un ulteriore tocco di meraviglia è che puoi fare clic e tenere premuto il pulsante Aggiorna per cancellare la cache.
— toon81,
2
@CallumRogers Solo se i tuoi utenti utilizzano il tuo sito con gli Strumenti di sviluppo aperti, però.
— Josh M.
3
@JoshM. Si noti che lasciare questo nel codice di produzione è molto male in quanto causa problemi in alcune versioni di IE anche per gli utenti che non hanno strumenti di sviluppo aperti.
— Omer van Kloeten, l'
57

Windows e Linux:

Ctrl+ Shift+ Ichiavi per aprire Strumenti per gli sviluppatori

Ctrl+ Shift+ Jper aprire Strumenti per gli sviluppatori e attirare l'attenzione sulla console.

Ctrl+ Shift+ Cper attivare la modalità Ispeziona elemento.

Mac:

⌥+ ⌘+ Ichiavi per aprire Strumenti per gli sviluppatori

⌥+ ⌘+ Jper aprire Strumenti per gli sviluppatori e attirare l'attenzione sulla console.

⌥+ ⌘+ Cper attivare la modalità Ispeziona elemento.

fonte

Altre scorciatoie

— user629309
fonte
3
Su Mac, la scorciatoia per attivare la modalità di ispezione dell'elemento è Maiusc ⌘ C (Maiusc - Comando - C)
— Roberto Barros,
15

Premere il F12tasto funzione nel browser Chrome per avviare il debugger JavaScript e quindi fare clic su "Script".

Scegli il file JavaScript in alto e posiziona il breakpoint nel debugger per il codice JavaScript.

— Balachandar P
fonte
3
F12 non sembra aprire il debugger sul mio sistema Windows 7 con Chrome 23.0.1246.0 dev-m.
— astletron,
+1 per F12, funziona anche con IE, FF, Edge. Non c'è bisogno di imparare Emacs come combinazioni di tasti. Tranne Mac.
— Csaba Toth,
11

Ctrl+ Shift+ Japre gli Strumenti di sviluppo.

— Senyai
fonte
6

In Chrome 8.0.552 su Mac, puoi trovarlo nel menu Visualizza / Developer / JavaScript Console ... oppure puoi usare Alt+ CMD+ J.

— Primc
fonte
2

Shift+ Control+ Iapre la finestra dello strumento sviluppatore. Dalla seconda immagine in basso a sinistra (simile alla seguente) aprirai / nasconderai la console per te:

Mostra console

— Premanshu
fonte
2

Per aprire il pannello "Console" dedicato:

  • Usa le scorciatoie da tastiera
    • Su Windows e Linux: Ctrl+ Shift+J
    • Su Mac: Cmd+ Option+J
  • Seleziona l'icona del menu Chrome, menu -> Altri strumenti -> Console JavaScript . Oppure se gli Strumenti per sviluppatori di Chrome sono già aperti, pressla scheda "Console".

Si prega di fare riferimento qui

— Venkat
fonte
1

Per gli utenti Mac, vai su Google Chrome -> menu Visualizza -> Sviluppatore -> Console JavaScript .

Immagine dello schermo

— Neo123
fonte
1

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

A tale scopo, premere F12 -> Scheda Sorgente - (lato destro) -> File system - in tale posizione selezionare la posizione del codice. e quindi 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
0

Il modo più efficiente che ho trovato per accedere al debugger javascript è eseguendo questo:

chrome://inspect

— Nestor Urquiza
fonte
0

F12 apre il pannello degli sviluppatori

CTRL + MAIUSC + C Aprirà lo strumento hover-to-inspect in cui evidenzia gli elementi mentre si passa con il mouse e si può fare clic per mostrarlo nella scheda degli elementi.

CTRL + MAIUSC + I Apre il pannello degli sviluppatori con la scheda della console

CLIC DESTRO> Ispeziona Fai clic con il pulsante destro del mouse su qualsiasi elemento e fai clic su "ispeziona" per selezionarlo nella scheda Elementi del pannello Sviluppatore.

ESC Se si fa clic con il pulsante destro del mouse e si ispeziona un elemento o simile e si finisce nella scheda "Elementi" guardando il DOM, è possibile premere ESC per attivare e disattivare la console, che può essere un buon modo per utilizzare entrambi.

— OG Sean
fonte
-5

Dalla console in Chrome, puoi farlo console.log(data_to_be_displayed).

— Anand
fonte
3
Questo non aprirà la console. Questo accederà solo alla console.
— Shaz,
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.