É possível depurar JavaScript de carregamento dinâmico por algum depurador como WebKit, FireBug ou IE8 Developer Tool?

90

De minha pergunta recente , eu já criei algumas funções JavaScript para visualização parcial de carregamento dinâmico. Portanto, não posso depurar nenhum JavaScript de carregamento dinâmico. Porque todo o JavaScript carregado será avaliado pela função "eval".

No entanto, descobri uma maneira de criar um novo JavaScript usando o seguinte script para criar dinamicamente o script no cabeçalho do documento atual. Todos os scripts carregados serão exibidos em HTML DOM (que você pode usar qualquer depurador para localizá-lo).

var script = document.createElement('script')
script.setAttribute("type","text/javascript")
script.text = "alert('Test!');";

document.getElementsByTagName('head')[0].appendChild(script);

A propósito, a maioria dos depuradores (IE8 Developer Toolbar, Firebug e Google Chrome) não consegue definir o ponto de interrupção em nenhum script dinâmico. Porque o script depurável deve ser carregado na primeira vez após o carregamento da página.

Você tem uma ideia para depurar conteúdo ou arquivo de script dinâmico?

Atualização 1 - Adicionar código fonte para teste

Você pode usar o seguinte arquivo xhtml para tentar depurar o valor de someVariable.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>    
    <title>Dynamic Loading Script Testing</title>
    <script type="text/javascript">
    function page_load()
    {       
        var script = document.createElement('script')
        script.setAttribute("id", "dynamicLoadingScript");
        script.setAttribute("type","text/javascript");
        script.text =   "var someVariable = 0;\n" +
                        "someVariable = window.outerWidth;\n" +
                        "alert(someVariable);";

        document.getElementsByTagName('head')[0].appendChild(script);
    }
    </script>
</head>
<body onload="page_load();">
</body>
</html>

Da resposta, acabei de testá-lo no FireBug. O resultado deve ser exibido como as imagens abaixo.

texto alternativo http://d7cgnq.bay.livefilestore.com/y1pJGV27qEARXzZhsMMhPD5z0OxAtnkQK8eKeEXMAxuHjsuWeAq1aGl7sTISRNqVv3lw8ghyxE_GorlwSJebunTmlGaqlv0qFirqSJun-htmlGeqlv0qfql-htmlGeqlwSJun-html

Observe o script "dynamicLoadingScript" adicionado após o carregamento da página.

texto alternativo http://d7cgnq.bay.livefilestore.com/y1pz_RwqjgeVqe2mAlUZha0PalpPdP0X5AiwJcQhYahERlnbPDdZpb-_d1e96Q-14raSDMJOBsdcV9jsi4B5yCundeGhugy41

Mas não é encontrado na guia de script do FireBug

Atualização 2 - Criar ponto de interrupção de depuração no script de carregamento dinâmico

alt text http://d7cgnq.bay.livefilestore.com/y1peKdIMOztXss-pc8PlJEmaGov_0ShYnLsuDdK5OLETbCG0UpkX6Te29w0YW2pNKaD_0ANAiizh2GdGPAAp_1qebug0JWAET.png

texto alternativo http://d7cgnq.bay.livefilestore.com/y1pUeHaHoTXj0WBl74fnTrXwdr_y7s7h8jNKfslSONgshzZBpUddGHNBWA9cXRabo3HAl3QazeozrUXCABo7pNKfslSONgshzZBpUddGHNBWA9cXRabo3HAl3QazeozrUXCABo7pNKfslSONgshzZBpUddGHNBWA9cXRabo3HAl3QazeozrUXCABo7pNVQhugCromoHugbug / HGCromeCFeBug1HFeBug / HClugBug / HFGRoHugbug / HGC-AGRFGHugbug / HFGRoomBug / HFGRo-hugbug / HGCFUFGRBo-hug1-CABo7pNVQcfng1.

Ambas as imagens acima mostram a inserção de "depurador;" declaração em alguma linha de script pode disparar um ponto de interrupção no script de carregamento dinâmico. No entanto, ambos os depuradores não mostram nenhum código no ponto de interrupção. Portanto, é inútil fazer isso.

Obrigado,

javascript ajax Soul_Master
fonte
Você encontrou uma solução para isso? Estou aqui com o mesmo problema.
adamJLev
Tente carregar um arquivo separado dinamicamente, ou seja, veja aqui uma implementação queryj.com/2011/03/11/a-lightweight-script-loader - acho que os depuradores lidam com isso com muito mais facilidade.
James Westgate
@infinity, verifique minha solução
Molecular Man
3
2014 e suas imagens ainda estão mortas - você pode refazê-las?
TheGeekZn
Eu tenho uma pergunta semelhante, mas não posso dizer porque as imagens estão quebradas. Você pode atualizá-los?
Eric

Respostas:

117

Também seria possível usar cromo para o mesmo. O Chrome tem um recurso onde você pode especificar um atributo de analisador e fazer com que o pedaço de JS dinâmico apareça como um arquivo que pode então ser navegado e definido os pontos de interrupção.

o atributo que precisa ser definido é 

//# sourceURL=dynamicScript.js

onde dynamicScript.js é o nome do arquivo que deve aparecer no navegador de arquivos de script.

Mais informações aqui

Paul Irish também fala sobre isso brevemente em sua excelente palestra sobre Tooling & The Webapp Development Stack

icecubado
fonte
5
No caso de alguém estar tendo problemas com MVC3 / Razor, lembre-se de escapar do símbolo @, então algo como // @@ sourceURL = dynamicscript.js E apenas para a informação, o acima funciona no firebug também.
parsh de
1
Você também pode usar esse recurso para javascripts dinâmicos embutidos. Mas, se você tiver alguma exceção nesse script, não a verá na lista de fontes.
Roman Snitko de
4
Observe que a nova sintaxe é "// # sourceURL = dynamicScript.js" mudar de @ para #
Cekk
3
o link atualizado para a seção de ferramentas do desenvolvedor do Chrome nos mapas de origem é - developer.chrome.com/devtools/docs/…
chrismarx
3
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
21

Tente adicionar um "depurador;" declaração no javascript que você está adicionando dinamicamente. Isso deve fazer com que ele pare naquela linha, independentemente das configurações do ponto de interrupção.

Joeri Sebrechts
fonte
Tudo que posso encontrar é este: code.google.com/p/fbug/issues/detail?id=1259 . A propósito, eu uso a tag de script anexada ao cabeçalho para carregar scripts dinamicamente (mas usando um atributo src), e o código adicionado desta forma é depurável para mim em todos os navegadores, mesmo se não for carregado junto com a página inicial.
Joeri Sebrechts
Qual é o código exato que você está usando para adicionar a tag de script? Estou tendo o mesmo problema que o OP, o que torna impossível depurar arquivos JS carregados dinamicamente no Chrome. THX!
adamJLev
var loaderNode = document.createElement ("script"); loaderNode.setAttribute ("type", "text / javascript"); loaderNode.setAttribute ("src", url); document.getElementsByTagName ("head") [0] .appendChild (loaderNode);
Joeri Sebrechts
18

Sim, é (agora) possível depurar JavaScript carregado dinamicamente usando o Google Chrome!

Não há necessidade de adicionar extra debugger;ou qualquer outro atributo para o arquivo JS carregado dinamicamente. Basta seguir as etapas abaixo para depurar:

Método 1:

Meu líder de tecnologia acabou de mostrar uma maneira super fácil de depurar métodos Javascript carregados dinamicamente.

  1. Abra o console do chrome e escreva o nome do método e pressione Enter.
    No meu caso, é GetAdvancedSearchConditonRowNew
    Se o método JS foi carregado, ele mostrará a definição do método.

insira a descrição da imagem aqui

  1. Clique na definição do método e todo o arquivo JS será aberto para depuração :)

insira a descrição da imagem aqui

Método 2:

Por exemplo, estou carregando um arquivo JS quando clico em um botão usando uma ajaxchamada.

  1. Abrir networkguia nas ferramentas de desenvolvimento do google chrome
  2. Clique em um controle (ex. Botão) que carrega algum arquivo javascript e chama alguma função javascript.
  3. observe a guia de rede e procure aquela função JS (no meu caso é RetrieveAllTags?_=1451974716935)
  4. Passe o mouse sobre ele initiatere você encontrará seu arquivo JS carregado dinamicamente (com o prefixo VM*).

depurar JavaScript de carregamento dinâmico em chrome -1

  1. Clique naquele VM*arquivo para abri-lo.
  2. Coloque o depurador onde você quiser nesse arquivo: D

depurar JavaScript de carregamento dinâmico em chrome -1

Gourav
fonte
Vergonha no Google por tornar isso tão obtuso. 1 / Vergonha = Kudos (o inverso da vergonha) a você por
retirá
16

Estou usando o Google Chrome para esse fim.

No Chrome na guia de scripts, você pode habilitar 'pausar em todas as exceções'

insira a descrição da imagem aqui

E, em seguida, coloque em algum lugar na linha de código try{throw ''} catch(e){}. O Chrome irá parar a execução quando atingir esta linha.

EDIT: imagem modificada para ficar mais claro do que estou falando.

Homem Molecular
fonte
Para desenvolver no Google Chrome, você deve inserir algum texto que indique o nome do script dinâmico atual quando o jQuery ou qualquer outro script de carregamento anexar script ao DOM como eu relatei para a equipe jQuery. Mas não tenho tempo para trabalhar nisso. bugs.jquery.com/ticket/8292
Soul_Master de
@Soul_Master, mas usando meu método você não precisa inserir texto. Você insere em sua linha de script dinâmico try{throw ''} catch(e){}e ativa o modo 'pausar em todas as exceções' e o cromo interromperá a execução quando a exceção for lançada. Eu verifiquei muitas vezes. Carreguei outra imagem. Está mais claro aí do que estou falando.
Molecular Man
No Chrome, você pode usar a instrução "debugger;" para interromper uma instrução quando o painel do depurador estiver aberto. O Chrome irá simplesmente ignorar isso se o painel do depurador for fechado.
dinesh ygv
@dineshygv, você pode ... agora. Mas você não podia há 3 anos. debuggernão funcionaria em script criado dinamicamente naquela época.
Molecular Man
10

Acho que você pode precisar dar ao código avaliado um "nome" como este:

http://blog.getfirebug.com/2009/08/11/give-your-eval-a-name-with-sourceurl/

Se você fizer isso, acho que é provável que a debuggerabordagem da "atualização 2" funcione.

Kyle Simpson
fonte
Sim. Eu vejo isso. Eu já relatei esse bug para a equipe jQuery há muito tempo. bugs.jquery.com/ticket/8292
Soul_Master de
1
Aviso! a técnica descrita causa um erro no IE7, então não deixe o //@ sourceURL=blahem produção.
Jethro Larson,
é provavelmente a debuggerparte que causa problemas, não o comentário da fonte (que certamente é ignorado por JS)
Kyle Simpson
Isso pode causar problemas, por exemplo, com a compilação condicional. Por exemplo: javascriptkit.com/javatutors/conditionalcompile.shtml
Jethro Larson
5

ATUALIZAÇÃO : a sintaxe para sourceUrl foi alterada (@ é substituído por #) para evitar erros em navegadores não suportados (leia: IE). Detalhes

DJ_HOEK
fonte
2

Usando o Chrome (12.0.742.112) com o código que você forneceu mais uma instrução do depurador como esta

    script.text =   "debugger;var someVariable = 0;\n" +
    "someVariable = window.outerWidth;\n" +
    "alert(someVariable);";

chrome_debugger

funciona para mim.

Preciso modificar algum JavaScript (limitando o escopo de todo o seletor jQuery para parcial> visualização div) antes de executá-lo.

Pode ser mais tangível se você vincular a mudança do seletor a um evento em sua visão parcial, em vez de criar elementos de script no corpo html (não parece certo).

Você poderia fazer algo assim

   (function(j)(
      var limiting_selector = '';
      j(".partial_views").bind('focusin over',function(e){
         limiting_selector = j(this).attr('someattr') // or j(this).data('limiting-selector')
      }).bind('focusout out',function(e){
         limiting_selector = '';
      });
      // And then go on with
      // j(limiting_selector+' .someclass')
   ))(jQuery)

Este código sempre adicionaria um seletor de limitação para todas as operações de seleção do jQuery feitas enquanto o mouse está em um determinado elemento, dado que o HTML não deve bagunçar.

(Ainda parece hacker, pode ser que alguém tenha uma solução melhor)

Felicidades

Krichard
fonte
1

No Firebug, você deve conseguir ver esse script depois que a página for carregada e o script injetado. Ao fazer isso, você pode definir um ponto de interrupção no local apropriado e ele será preservado quando você atualizar a página.

Moishe Lettvin
fonte
Você está certo. Isso não funciona. Eu tentei com eval () e o Firebug permitirá que você defina um ponto de interrupção ao usá-lo. Existe um motivo pelo qual você não pode usar eval () e precisa definir uma tag de script? Ainda mais genericamente, há um motivo pelo qual você não pode servir este javascript dinâmico como um arquivo .js separado em seu servidor? Que problema você está tentando resolver?
Moishe Lettvin
Preciso modificar algum JavaScript (limitando o escopo de todo o seletor jQuery para o div de exibição parcial atual) antes de executá-lo. Ou você tem alguma ideia para resolver minha dúvida recente. Para obter mais informações, consulte minha pergunta recente.
Soul_Master de
1

O Javascript carregado dinamicamente ainda precisa ser analisado pelo navegador, é onde o depurador do WebKit ou FireBug fica, portanto, está sujeito ao depurador de qualquer maneira, acho que é o mesmo para as ferramentas de desenvolvedor no IE8,

Portanto, seu código está sujeito ao depurador, portanto, o local onde você obter um problema não estará naquele arquivo ou texto se não houver erro

A outra coisa é que script.text = "alert('Test!');";não é válido, então não funcionará em todos os navegadores o que você quer éscript.innerHTML = "alert('Test!');";

mesmo que seu HTML interno signifique código dentro das tags HTML não o HTML dentro apenas a maioria das pessoas usa-o para isso então fica explicado errado

EDITADO PARA ATUALIZAÇÃO DOIS

E na segunda atualização usando o Chrome eu fiz isso

vá para about: blank Abra o console e cole 

var script = document.createElement('script')
script.setAttribute("type","text/javascript")
script.innerHTML = "alert('Test!');debugger;";

document.getElementsByTagName('head')[0].appendChild(script);

então ele irá quebrar e abrir a guia do script com sobre: ​​em branco mostrado (nada para ver)

Em seguida, no lado direito, mostre a lista de pilha de chamadas, clique no segundo (função anônima) e será mostrado.

Portanto, em seu arquivo, você terá uma (função anônima) que é o código que você está executando e verá o ponto de interrupção nele. para que você saiba que está no caminho certo.

Barkermn01
fonte
0

Usando a ferramenta de desenvolvedores do Google Chrome (ou Safari ), você pode executar o JavaScript linha por linha.

Developer Tool >Scripts >Escolha qual script você deseja depurar >sinal de pausa no lado direito Ou defina pontos de interrupção clicando no número da linha

Derek 朕 會 功夫
fonte
0

Uma opção que gosto de usar adicionando uma instrução console.log ('') em meu código. Uma vez que esta declaração aparece no console, um número de linha é associado a ela. Você pode clicar nesse número para ir até o local na fonte e definir um ponto de interrupção. A desvantagem dessa abordagem é que os pontos de interrupção não são preservados nos recarregamentos de página e você precisa executar o código antes de adicionar um depurador.

IcedDante
fonte
0

Para o navegador Google Chrome atual ou outros navegadores modernos, você pode pesquisar facilmente qualquer código avaliado com a ferramenta do desenvolvedor, como as imagens a seguir.

  1. Simule algum arquivo de carregamento dinâmico.

insira a descrição da imagem aqui

  1. Pressione Ctrl + Shift + F na guia de origem e pesquise a função acima.

insira a descrição da imagem aqui

Crie algum ponto de interrupção e execute a função para testá-lo.

insira a descrição da imagem aqui

Soul_Master
fonte