Como você inicia o depurador JavaScript no Google Chrome?

418

Ao usar o Google Chrome, desejo depurar algum código JavaScript. Como eu posso fazer isso?

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

Respostas:

318

Windows: CTRL- SHIFT- JOU F12

Mac: ⌥- ⌘-J

Também disponível no menu de ferramentas (Ferramentas> Console JavaScript):

Menu Console do JavaScript

— John Sheehan
fonte
23
Acho que o atalho mudou para CTRL-SHIFT-J.
— Martijn Laarman 12/10/2009
5
ou Cmd-Shift-J para Macs. Deus, eu amo essa <kbd>tag. Pena que não posso usá-lo nos comentários.
— Anurag
11
O atalho do Mac parece estar Alt-Cmd-Jna versão mais recente do Chrome.
— Mathew Byrne
64
F12é a maneira mais simples
— Juan Mendes
olhando para esta pergunta me faz entender o quanto minhas habilidades javascript melhorou em relação aos níveis de principiante para os padrões bastante decentes
— Kamal Reddy
399

Tente adicionar isso à sua fonte:

debugger;

Funciona na maioria, se não em todos os navegadores. Basta colocá-lo em algum lugar do seu código e ele funcionará como um ponto de interrupção.

— Omer van Kloeten
fonte
É difícil encontrar como esse comando é chamado se você o esqueceu!
— Ahmed Fasih
4
Também é difícil pesquisar no Google por razões pelas quais isso nem sempre funciona. Existem limitações nisso?
— 213 Seanonymous
2
Você precisa ter as Ferramentas do desenvolvedor do Chrome abertas para que isso funcione (pressione F12 no Windwos / Linux, não saiba a chave no Mac ou apenas inspecione um elemento). Se você tiver as Ferramentas do desenvolvedor abertas, um pouco mais impressionante é que você pode clicar e segurar o botão Atualizar para limpar o cache.
— toon81
2
@CallumRogers Apenas se os usuários usarem o site com as Ferramentas do Desenvolvedor abertas, no entanto.
— Josh M.
3
@JoshM. Observe que deixar isso no código de produção é muito ruim, pois causa problemas em certas versões do IE, mesmo para usuários que não possuem ferramentas de desenvolvimento abertas.
— Omer van Kloeten
57

Windows e Linux:

CtrlTeclas + Shift+ Ipara abrir as Ferramentas do desenvolvedor

Ctrl+ Shift+ Jpara abrir as Ferramentas do desenvolvedor e focar o console.

Ctrl+ Shift+ Cpara alternar para o modo Inspecionar elementos.

Mac:

⌥Teclas + ⌘+ Ipara abrir as Ferramentas do desenvolvedor

⌥+ ⌘+ Jpara abrir as Ferramentas do desenvolvedor e focar o console.

⌥+ ⌘+ Cpara alternar para o modo Inspecionar elementos.

Fonte

Outros atalhos

— user629309
fonte
3
No Mac, o shorcut a alternância inspeccionar modo elemento é mudança ⌘ C (Shift - Comando - C)
— Roberto Barros
15

Pressione a F12tecla de função no navegador Chrome para iniciar o depurador JavaScript e clique em "Scripts".

Escolha o arquivo JavaScript na parte superior e coloque o ponto de interrupção no depurador para o código JavaScript.

— Balachandar P
fonte
3
O F12 parece não abrir o depurador no meu sistema Windows 7 com o Chrome 23.0.1246.0 dev-m.
— Astletron
+1 para F12, também funciona para IE, FF, Edge. Não há necessidade de aprender Emacs como combinações de teclas. Exceto para Mac.
— precisa
11

Ctrl+ Shift+ Jabre as Ferramentas do desenvolvedor.

— Senyai
fonte
6

No Chrome 8.0.552 em um Mac, você pode encontrá-lo no menu Exibir / Desenvolvedor / Console JavaScript ... ou pode usar Alt+ CMD+ J.

— Primc
fonte
2

Shift+ Control+ Iabre a janela da ferramenta Desenvolvedor. Na segunda imagem inferior esquerda (que se parece com o seguinte) abrirá / ocultará o console para você:

Mostrar console

— Premanshu
fonte
2

Para abrir o painel 'Console' dedicado, ou:

  • Use os atalhos de teclado
    • No Windows e Linux: Ctrl+ Shift+J
    • No Mac: Cmd+ Option+J
  • Selecione o ícone do Chrome Menu, menu -> Mais Ferramentas -> Console JavaScript . Ou, se as Ferramentas do desenvolvedor do Chrome já estiverem abertas, pressna guia "Console".

Consulte aqui

— Venkat
fonte
1

Para usuários de Mac, acesse Google Chrome -> menu Exibir -> Desenvolvedor -> console JavaScript .

Captura de tela

— Neo123
fonte
1

Agora, o google chrome introduziu um novo recurso. Usando este recurso Você pode editar seu código na navegação pelo Chrome. (Alteração permanente na localização do código)

Para isso, pressione F12 -> Guia Origem - (lado direito) -> Sistema de arquivos -, por favor selecione sua localização de código. e, em seguida, o navegador Chrome solicitará sua permissão e depois esse código será afundado na cor verde. e você pode modificar seu código e ele também refletirá na sua localização de código (significa que mudará permanentemente)

obrigado

— stackinfostack
fonte
0

A maneira mais eficiente que encontrei para acessar o depurador javascript é executando o seguinte:

chrome://inspect

— Nestor Urquiza
fonte
0

F12 abre o painel do desenvolvedor

CTRL + SHIFT + C Abre a ferramenta Passe o mouse para inspecionar, onde destaca os elementos à medida que você passa o mouse e você pode clicar para mostrá-lo na guia Elementos.

CTRL + SHIFT + I Abre o painel do desenvolvedor com a guia do console

Clique com o botão direito do mouse > Inspecionar Clique com o botão direito do mouse em qualquer elemento e clique em "inspecionar" para selecioná-lo na guia Elementos do painel Desenvolvedor.

ESC Se você clicar com o botão direito do mouse e inspecionar um elemento ou similar e acabar na guia "Elementos", olhando para o DOM, poderá pressionar ESC para alternar o console para cima e para baixo, o que pode ser uma boa maneira de usar os dois.

— OG Sean
fonte
-5

No console do Chrome, você pode fazer console.log(data_to_be_displayed).

— anand
fonte
3
Isso não abrirá o console. Isso fará logon apenas no console.
— Shaz
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.