Como depurar JavaScript carregado dinamicamente (com jQuery) no próprio depurador do navegador?

92

Um script adicionado dinamicamente não está aparecendo na seção de scripts do depurador do navegador.

Explicação:

Eu preciso usar e tenho usado

if( someCondition == true ){
   $.getScript("myScirpt.js", function() {
       alert('Load Complete');
       myFunction();
   });
}

para que myScript.js possa ser carregado dinamicamente ao atender a alguma condição ... E myFunction pode ser chamado somente depois de carregar todo o script ...

Mas os navegadores não estão mostrando o myScript.js carregado dinamicamente na seção de script do depurador.

Existe outra maneira de contornar para que todos os objetivos possam ser alcançados, o que tornará alguém capaz de depurar um script carregado dinamicamente no próprio navegador?

javascript debugging dynamic loaded TwiToiT
fonte
Possível duplicata de É possível depurar JavaScript de carregamento dinâmico por algum depurador como WebKit, FireBug ou IE8 Developer Tool?
Gourav
2
use debugger;para parar automaticamente no script carregado dinâmico, consulte javascript.info/debugging-chrome
yu yang Jian

Respostas:

208

Você pode dar um nome ao seu script carregado dinamicamente para que ele seja exibido no depurador de JavaScript do Chrome / Firefox. Para fazer isso, você coloca um comentário no final do script:

//# sourceURL=filename.js

Este arquivo será mostrado na guia "Fontes" como filename.js. Na minha experiência, você pode usar \ 's no nome, mas recebo um comportamento estranho se usar /' s.

Para obter mais informações, consulte: Breakpoints in Dynamic JavaScript deprecation of // @ sourceurl

Marca
fonte
19
Observe que ele foi alterado para // #, embora // @ ainda funcione no Chrome. Os scripts em arquivos .html também podem ser nomeados da mesma maneira. Seja cuidadoso! Não deixe nenhum espaço em branco antes e depois do sinal '='.
Mert Mertce,
11
Para mim, o arquivo js estava sendo exibido na lista de fontes dentro de um grupo chamado "(sem domínio)". Pode valer a pena mencionar, pois eu perdi no começo!
JMac
7
Só uma dica. O depurador do Chrome lança esses arquivos pseudo-javascript no elemento de nó "(sem domínio)" na guia Fontes, pelo menos ao depurar no localhost. Foi aí que os encontrei.
Robert Oschler
1
Outra coisa a ter em conta é o estilo do comentário. O link de "desaprovação de / / @ sourceURL" que você forneceu menciona tanto "// # sourceURL =" quanto "/ * # sourceURL =". Isso porque isso também pode ser usado para CSS, onde você deve usar comentários de bloco, já que comentários "//" de linha única não são válidos. O que me surpreendeu foi que você não pode usar "/ * sourceURL =" em javascript. É simplesmente ignorado.
Jools,
2
Afaik, a maioria dos minificadores JavaScript remove essas linhas dos estágios de produção, tornando-as inúteis para um diagnóstico de bug de produção.
Lluís Suñol de
16

Você pode usar //# sourceURL=e //# sourceMappingURL=no final de seu arquivo de script ou tag de script.

NOTA: //@ sourceURL e //@ sourceMappingURLestão obsoletos.

xRavisher
fonte
Mais informações de
suspensão de
Claro, mas afaik a maioria dos minificadores irá remover essas linhas nas fases de produção.
Lluís Suñol de
13

Eu tentei usar o "// # sourceURL = filename.js" que foi sugerido como uma solução alternativa pelo OP, mas ainda não estava aparecendo para mim no painel Fontes, a menos que já existisse em minhas guias em um momento anterior, quando produziu uma exceção.

Codificando um "depurador;" a linha o forçou a quebrar naquele local. Então, uma vez que estava em minhas guias no painel Fontes, eu poderia definir pontos de interrupção normalmente e remover o "depurador;" linha.

Kevinpo
fonte
6
Também pode aparecer na lista (sem domínio) na guia Fontes.
Splaktar
1
Eu também precisava usar debugger;, e DevTools tinha que ser aberto enquanto o script estava carregando.
Barmar de
1
um pouco de informação extra: use browsertools: // como o protocolo como em //# sourceURL=browsertools://yourdomaingoeshere.com/action-openuwws.js
dolbysurnd
6

Observe que o arquivo de origem que aparece na guia de fontes desta forma aparecerá no grupo (sem domínio) e, caso queira depurá-lo, será necessário adicionar uma debugger;linha em seu código, fazer com que essa linha seja executada (geralmente em o início da execução de seu arquivo de origem) e, em seguida, adicione seus pontos de interrupção onde desejar.

No caso de você estar depurando estágios de produção, onde provavelmente não terá debugger;linhas em seu código, você pode fazer isso acontecer fazendo um mapa local com CharlesProxy para sua "nova cópia do arquivo fonte com a linha de depuração inserida".

Lluís Suñol
fonte
2
Isso me salvou! Não importa o que eu fiz, o arquivo não apareceu até que eu coloquei um comando do depurador. Depois disso, ele persistiu em recarregamentos de página e sessões de depuração, mesmo depois de eu ter removido o comando debugger.
Mike Devenney
0

Ao tentar rastrear esse tipo de coisa no IE, abro as ferramentas de desenvolvimento (F12) e descubro onde colocar o ponto de interrupção usando a seguinte linha no console:

debugger;myFunction();

Isso muda para a guia do depurador, onde você pode entrar myFunction()e definir o ponto de interrupção.

Alan Samet
fonte