Como definir pontos de interrupção no Javascript embutido no Google Chrome?

210

Quando abro as Ferramentas do desenvolvedor no Google Chrome, vejo todos os tipos de recursos como Perfis, Linhas de tempo e Auditorias, mas faltam funcionalidades básicas como definir pontos de interrupção nos arquivos js e no código html e javascript! Tentei usar o console javascript, que é um bug - por exemplo, quando ele encontra um erro de JS, não consigo sair dele a menos que atualize a página inteira. Alguém pode ajudar?

javascript debugging google-chrome ás
fonte
Eu desisti do Chrome. Tentei com o Firefox e tive meu ponto de interrupção atingido em alguns segundos. Pode ser possível com o Chrome, mas certamente não é óbvio como!
Oliver P

Respostas:

126

Use a guia fontes, você pode definir pontos de interrupção no JavaScript lá. Na árvore de diretórios abaixo (com as setas para cima e para baixo), você pode selecionar o arquivo que deseja depurar. Você pode obter um erro pressionando retomar no lado direito da mesma guia.

Rian Schmits
fonte
31
Por alguma razão, vejo a lista de arquivos js incluídos, mas não consigo escolher a página de execução em si, ela não aparece na lista. Alguma ideia?
26611 ulu
67
@ulu, eu tive o mesmo problema. Verifique se o atributo type = "text / javascript" está definido no seu elemento <script>.
contactmatt
9
exceto que no HTML5 esse atributo não é mais obrigatório. Não estou alterando o código fonte apenas para depuração!
Sashok_bg
10
Eu não ver mesmo depois de adicionar type = "text / javascript"
Nitin Kumar Mishra
2
se isso não funcionar, e você tiver um código javascript embutido como: <script> your code </script>adicione um nome como: <script> your code //# sourceURL=somename.js </script> Isso é explicado melhor em uma resposta abaixo
KM.
209

Você está falando sobre código em <script>tags ou nos atributos da tag HTML, como este?

<a href="#" onclick="alert('this is inline JS');return false;">Click</a>

De qualquer forma, a debuggerpalavra - chave assim funcionará:

<a href="#" onclick="debugger; alert('this is inline JS');return false;">Click</a>

O Chrome não fará uma pausa às debuggers se as ferramentas de desenvolvimento não estiverem abertas.

Você também pode definir pontos de interrupção de propriedade em arquivos e <script>tags JS :

  1. Clique na guia Origens
  2. Clique no ícone Mostrar Navegador e selecione o arquivo
  3. Clique duas vezes no número de uma linha na margem esquerda. Uma linha correspondente é adicionada ao painel Pontos de interrupção (4).

insira a descrição da imagem aqui

Matt Ball
fonte
4
Não há guia Scripts. Eu vejo todas as outras guias que estão nesta imagem, mas nenhuma guia Scripts!
ace
5
Quero dizer, ser capaz de definir o ponto de interrupção na tag de script em html. Eu também tentei usar o depurador; palavra-chave, mas não funciona. O Chrome não interrompe isso, mas funciona no Firefox. Estou procurando uma solução de ponto de interrupção não baseada na palavra-chave do depurador, o que é inconveniente para colocar em muitos lugares no código e depois ter que excluir.
ace
2
No menu suspenso na guia Scripts, vejo apenas os arquivos JS listados, mas não os arquivos HTML que contêm a marca <script> que desejo depurar. O Firebug no FF possui um menu suspenso semelhante, mas também lista arquivos HTML que contêm tags <script>. Isso é um bug ou existe outra maneira de definir um ponto de interrupção no código JS embutido?
Wolfram Arnold
8
A guia é chamada em Sourcesvez de Scriptsagora.
precisa saber é o seguinte
1
Quando tentei depurar meus js incorporados html, recebi uma página em branco na minha área de desenvolvimento. Eu tive que atualizar enquanto olhava o arquivo de origem em branco para obtê-lo.
precisa saber é o seguinte
72

Você também pode dar um nome ao seu script:

<script> ... (your code here) //# sourceURL=somename.js </script>

ofcourse substitua "somename" por algum nome;) e você o verá no depurador do chrome em "Fontes> top> (sem domínio)> somename.js" como um script normal e você poderá depurá-lo como outros scripts

buildhome.eu
fonte
3
maneira mais fácil e perfeita de seguir. mas lembre-se de removê-lo antes de colocá-lo em produção.
Zameer Fouzan
2
Oh meu Deus, você não tem idéia do quanto isso me ajudou. Oh meu Deus, isso é brilhante. Eu tenho procurado por algo assim há séculos.
GregRos
Usei essa ideia (boa), mas não consegui ver o novo arquivo na guia fontes, apenas o arquivo html. Depois, executei o código e, no final, no console, à direita de qualquer mensagem escrita no script, você pode ver um link para o código. A melhor parte é que o link mostra o nome do arquivo que você deu ao script (por exemplo, // # sourceURL = somename.js).
Manuel Rivera
1
Eu daria a você 1000 votos se eu pudesse;) Truque muito útil
Giulio Quaresima
43

Atualize a página que contém o script enquanto as ferramentas do desenvolvedor estão abertas na guia scripts. Isso adicionará uma entrada (programa) na lista de arquivos que mostra o html da página, incluindo o script. A partir daqui, você pode adicionar pontos de interrupção.

Coelho áspero
fonte
Isso não funcionou para mim. Em vez disso, cliquei no ícone de erro de script no canto inferior direito para abrir o arquivo do programa na guia scripts.
26413 sanbikinoraion
1
Obrigado! Usando o Chrome 69, isso funcionou mesmo que eu não estivesse na guia fontes. Ter as ferramentas do desenvolvedor abertas enquanto a página carregada parece ser a chave.
Sam
Essa teria sido a resposta aceita se essa fosse a minha pergunta. Obrigado.
plumpNation
Trabalhou no Chrome 83. No meu ambiente, o nome do arquivo é baseado no URL do seu aplicativo. Por exemplo, se o URL for exemplo.com/xxx/aaa, o nome do arquivo será "aaaa".
Helix Quar 12/06
18

Outro truque simples e intuitivo para depurar especialmente scripts dentro de html retornados pelo ajax, é colocar temporariamente console.log ("test") dentro do script.

Depois de disparar o evento, abra a guia do console nas ferramentas do desenvolvedor. você verá o link do arquivo de origem mostrado no lado direito da instrução de impressão de depuração "test". basta clicar na fonte (algo como VM4xxx) e agora você pode definir o ponto de interrupção.

PS: além disso, você pode considerar colocar a instrução "debugger" se estiver usando o chrome, como o sugerido pelo @Matt Ball

ken
fonte
10

Minha situação e o que fiz para corrigi-lo:
tenho um arquivo javascript incluído em uma página HTML da seguinte maneira:
Nome da página: test.html

<!DOCTYPE html>
<html>
    <head>
        <script src="scripts/common.js"></script>
        <title>Test debugging JS in Chrome</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <div>
         <script type="text/javascript">
            document.write("something");
         </script>

        </div>
     </body>
</html>

Agora, entrando no Javascript Debugger no Chrome, clico na guia Scripts e desço a lista como mostrado acima. Posso ver claramente scripts / common.js, no entanto, NÃO pude ver a página html atual test.html no menu suspenso, portanto, não pude depurar o javascript incorporado:

<script type="text/javascript">
  document.write("something");
</script>

Isso foi desconcertante. No entanto, quando removi o tipo obsoleto = "text / javascript" do script incorporado:

<script>
  document.write("something");
</script>

..e atualizou / recarregou a página, pronto, ela apareceu na lista suspensa e tudo estava bem novamente.
Espero que isso seja útil para quem está tendo problemas para depurar o javascript incorporado em uma página html.

Aditya Singh
fonte
Bom trabalho! Testado no Chrome 20.0.1132.57 no Mac 10.7.4 Bug enviado ao projeto Chromium.
Mars Robertson
Esteja ciente de que no HTML 4 e XHTML, typeé um atributo necessário. No HTML5, é opcional.
hotshot309
2
Não tem nada a ver com o tipo. O script é coletado pela VM após a execução, a menos que o inspetor já esteja aberto neste momento. Quando você recarregou a página, ela não coletou o script.
Vsevik 08/08/12
Eu sou meu caso, faltando <div>me impediu de ver o código no depurador
ceztko
5

Adicionando debugger;no topo do meu script funcionou para mim.

JEKO
fonte
4

Eu também estava tendo o mesmo problema: como depurar JavaScript dentro de <script>tags. Mas então eu o encontrei na guia Fontes, chamada "(índice)", entre parênteses. Clique no número da linha para definir pontos de interrupção.

insira a descrição da imagem aqui

Esse é o Chrome 71.

ocarlsen
fonte
2

Se você não conseguir ver a guia "Scripts", verifique se está iniciando o Chrome com os argumentos certos. Eu tive esse problema quando eu lançado Chrome para a depuração do lado do servidor JavaScript com o argumento --remote-shell-port=9222. Não tenho problema se eu iniciar o Chrome sem argumentos.

Anjo caído
fonte
Você poderia elaborar por favor? Estou com esse problema exato - não consigo ver a guia scripts. Fiz o download da versão mais recente do Chrome para desenvolvedores.
tom Redfern
2

Me deparei com esse problema, no entanto, minha função embutida estava dentro de uma visão angularJS. Portanto, no carregamento, não pude acessar o script embutido para adicionar a depuração, pois apenas o index.html estava disponível na guia de fontes do depurador.

Isso significava que, quando eu estava abrindo a visualização específica com o meu inline (não tinha escolha), ela não estava acessível.

A única maneira que consegui atingi-lo foi colocar uma função incorreta ou chamar dentro da função JS embutida.

Minha solução incluiu: 

function doMyInline(data) {
        //Throw my undefined error here. 
        $("select.Sel").debug();

        //This is the real onclick i was passing to 
        angular.element(document.getElementById(data.id)).scope().doblablabla(data.id);
    }

Isso significa que, quando cliquei no meu botão, fui solicitado no console do chrome. 

Uncaught TypeError: undefined is not a function

O importante aqui foi a fonte disso: VM5658:6clicar nisso me permitiu percorrer a linha e manter o ponto de interrupção lá para mais tarde.

Maneira extremamente complicada de alcançá-lo. Mas funcionou e pode ser útil ao lidar com aplicativos de página única que carregam dinamicamente suas visualizações.

o VM[n] valor não tem valor significativo e o non equivale ao ID do script. Esta informação pode ser encontrada aqui: Chrome "[VM]"

Pogrindis
fonte
1

Usando o Visual Studio (2012), tive o mesmo problema e mudei para o IIS Express resolveu o problema!

A scripttagtype atributo não foi levado em consideração.

Por alguma razão, o Visual Studio Development Server não fornece tudo o que o Chrome precisa para ativar os pontos de interrupção.

escape-llc
fonte
1

Eu sei que o Q não é sobre, Firefoxmas eu não queria adicionar uma cópia desta pergunta apenas para respondê-la.

Para o Firefox, você precisa adicionar debugger;para poder fazer o que @ matt-ball sugeriu para a scripttag.

Portanto, no seu código, você adiciona debuggeracima da linha que deseja depurar e pode adicionar pontos de interrupção. Se você acabou de definir os pontos de interrupção no navegador, ele não será interrompido.

Se este não é o lugar para adicionar uma resposta do Firefox, pois a pergunta é sobre o Chrome. Não :( menos a resposta, deixe-me saber para onde devo postá-la e moverei a postagem com prazer. :)

T04435
fonte
0

Esta é uma extensão da resposta de Rian Schmits acima. No meu caso, eu tinha o código HTML incorporado no meu código JavaScript e não conseguia ver nada além do código HTML. Talvez a Depuração do Chrome tenha mudado ao longo dos anos, mas clicar com o botão direito do mouse na guia Fontes / Fontes me apresentou a pasta Adicionar à área de trabalho . Consegui adicionar todo o meu projeto, o que me deu acesso a todos os meus JavaScripts. Você pode encontrar mais detalhes neste link . Espero que isso ajude alguém.

Patricia
fonte