Ferramenta de desenvolvimento do Chrome: arquivo [VM] de javascript

139

Adicionei um ponto de interrupção no meu arquivo javascript (jaydata.js) e estava pressionando "Avançar para a próxima chamada de função". Quando chegou a uma linha que era:

},

outro arquivo intitulado "[VM] (8312)" apareceu. Continuei clicando em "Passar para a próxima chamada de função" e agora minha tela é:

insira a descrição da imagem aqui

Quais são esses scripts estranhos e misteriosos intitulados "[VM] (XXXX" e de onde eles vêm?

debugging google-chrome-devtools

— AllieCat
fonte

1

Esses arquivos da VM também aparecem quando você está editando arquivos que estão depurando ao mesmo tempo. O Chrome perde a sincronização e quando um ponto de interrupção é colocado no arquivo, ele interrompe o código em outra posição do arquivo na memória em algum lugar. por exemplo, test.html permitirá um ponto de interrupção, mas quando o Chrome para, o faz em VM99: test.html em outra posição. A solução é fechar o Chrome, renomear os arquivos, por exemplo, test2.html e iniciar novamente. (Limpar histórico, cache etc. não funciona e o Chrome continuará carregando o VM99: test.html se você tentar isso.

— QuentinUK

112

[VM] (scriptId)não tem significado especial. É um nome falso para nos ajudar a distinguir código que não está diretamente vinculado a um nome de arquivo, como código criado usando evale amigos.

No passado, todos esses scripts eram apenas rotulados (program).

Se você estiver interessado, basta procurar "[VM]"no código-fonte do Chromium e descobrirá que esses números não têm significado significativo fora das ferramentas do desenvolvedor.

atualização 2015-06-25

[VM] (scriptId)foi renomeado para VMscriptId um tempo atrás e aqui está o link direto para o resultado da pesquisa , caso o valor mude novamente.

— Rob W
fonte

1

O Chrome acessaria o arquivo [VM] em vez do arquivo js ativo? Se sim, por quê?

— Matt

@ Matt O que você quer dizer com "Bata no arquivo [VM] em vez do arquivo js ao vivo"?

— Rob W

@RobW desrespeito; meu navegador estava armazenando em cache o arquivo js (apesar de ter atualizado meu buster de cache).

— Matt

1

[VM] (scriptId)foi renomeado para VMscriptId um tempo atrás , mas mantive a resposta no estado atual para não invalidar a pergunta. O link mais recente de pesquisa de código é: cs.chromium.org/%22VM%5C%22%20+%22 (link direto para o resultado da pesquisa caso o valor mude novamente: chromium.googlesource.com/chromium/blink/+/… )

— Rob W

Recentemente, encontrei esse problema sem qualquer avaliação - parece estar relacionado ao uso de iFrames. Minha evidência disso é que, quando defino um ponto de interrupção no código em um iFrame, recebo o problema [VM], mas quando abro o iFrame em sua própria janela, sou atingido muito bem no ponto de interrupção. Certifique-se de que isso se qualifique como um dos "amigos" de eval, conforme descrito na resposta.

— Danger

42

Sempre que você carrega conteúdo HTML por meio do AJAX, e esse conteúdo contém <script>tags, o script será avaliado usando eval () e reconhecido pela visualização Fontes do Chrome como um novo arquivo começando com 'VM'. Você sempre pode ir para a guia Rede, encontrar a solicitação AJAX e visualizar a resposta HTML na íntegra, incluindo seu script.

— Sam Kauffman
fonte

3

Isso é péssimo para depuração embora. Se eu usar uma tag de script src=/test.jse causar um erro que remonta ao test.js, o traceback conterá o nome de arquivo correto, mas, a partir de então, o stacktraces conterá a mágica da VM. Isso torna impossível obter o código-fonte [da mesma origem] para os arquivos no rastreamento de pilha mais de uma vez, e você não pode armazená-los em cache, pois não sabe qual arquivo é o que nos futuros rastreamentos de pilha. Isso foi corrigido no Dev Tools, mas não nos webapps.

— Carl Smith

Esse é provavelmente o motivo mais comum em aplicativos da Web modernos e outro bom exemplo de por que devemos separar o código do conteúdo.

— alexw 29/06

37

Ao usar eval, o javascript é lançado nas VMs do Chrome Debugger. Para visualizar os js criados com eval em Fontes do depurador do Chrome, defina este atributo no final (graças ao Splaktar) dos js:

//@ sourceURL=dynamicScript.js

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

— Manchar
fonte

9

A sintaxe mudou, agora é: // # sourceURL = dynamicScript.js

— ThiagoPonte

1

Também deve estar no final do JavaScript, não no início.

— Splaktar 19/08/19

Estive procurando por algo assim. Obrigado

— David Kierans

Obrigado! É tão útil!

— Eve juan

4

Nas ferramentas de depuração do Firefox, dizUsing //@ to indicate sourceURL pragmas is deprecated. Use //# instead

— Nighto 17/03/16

6

Se você deseja depurar injetado programaticamente arquivos JS em cromo você pode usar a debugger;declaração, isto é mais rápido do que encontrar onde seu script é e também mais rápido do que gerar um arquivo com sourceUrl .

Ele funciona como um ponto de interrupção e identifica automaticamente seu código na guia de origem do chrome, onde quer que você use a debugger;instrução.

Observe que a fonte do script é um arquivo VMXXX.

— Rodrirokr
fonte

Isso não parece responder à pergunta.

— Grant Miller

Meu mal, eu me deixei ir pelas outras respostas a esta pergunta.

— Rodrirokr

1

Super! Era exatamente isso que eu estava procurando. Não há necessidade de descobrir em qual VM seu código foi inserido pelo mecanismo JS.

— Oleg Bolden

qual é a conexão entre esta resposta e a pergunta?

— Ravindra Thorat 9/10/19

Com a debugger;afirmação, ele pode desmistificar de onde vêm os misteriosos 'scripts estranhos e misteriosos intitulados "[VM] (XXXX"', se assim o desejar. #

— Rodrirokr 10/10/1919

4

Descobri que a VM é gerada a partir de algumas extensões do Chrome - elas inserem CSS / JS na página e o Chrome usa os arquivos da VM para executá-la.

— Cais
fonte

0

Quando você está depurando uma fonte de janela filho (iframe) que é descarregada posteriormente, seu arquivo de origem também obtém o prefixo da VM e o fundo amarelo.

— JosdeHa
fonte

0

Eu tive o mesmo problema. O problema é que o código do meu aplicativo foi considerado uma caixa preta por acidente. Quando tentei entrar no código, ele continuou abrindo essas VMXXXXguias.

Depois de remover a configuração de caixa preta para o arquivo js do meu aplicativo, eu poderia percorrer com êxito o meu código.

— Justin Noel
fonte

0

para evitar isso

(function ()
 {
  var originalEval = eval;
  eval =
   function (script)
   {
    return originalEval(script + "\n//# sourceURL=blackbox-this.js");
   }
 }());

E então blackbox ^.*blackbox-this.js$

O mesmo para setInterval / setTimeout quando obtém uma string (mas isso é uma prática ruim, certo?;))

Isso funciona para você?

— RahmanRezaee
fonte

-1

Eu tive o mesmo problema ao depurar meu aplicativo angular. Ver muitos scripts de VM que não podiam ser colocados na caixa preta estava demorando muito para depurar. Eu preferi escolher o mozilla / IE explorer para depurar.

— Sameeksha Kumari
fonte