Инструмент разработки Chrome: файл [VM] из javascript

148

Я добавил точку останова в свой файл javascript (jaydata.js) и нажимал «Перейти к следующему вызову функции». Когда дошло до строки:

},

появился другой файл с названием «[VM] (8312)». Я продолжал нажимать «Перейти к следующему вызову функции», и теперь мой экран:

введите описание изображения здесь

Что это за странные и загадочные скрипты с названием «[VM] (XXXX» и откуда они взялись?

debugging google-chrome-devtools AllieCat
источник
2
Эти файлы виртуальных машин также появляются, когда вы редактируете файлы, которые одновременно отлаживаются. Chrome теряет синхронизацию, и когда на файл ставится точка останова, он останавливает код в какой-то другой позиции в файле где-то в памяти. например, test.html разрешит точку останова, но когда Chrome останавливается, он делает это на VM99: test.html в другом месте. Решение - закрыть Chrome, переименовать файлы, например, test2.html, и начать заново. (Очистка истории, кеша и т. Д. Не работает, и Chrome продолжит загружать VM99: test.html, если вы попробуете это сделать.
QuentinUK

Ответы:

115

[VM] (scriptId)не имеет особого значения. Это фиктивное имя, которое помогает нам различать код, который напрямую не привязан к имени файла, например код, созданный с помощью evalи друзей.

Раньше все эти скрипты были просто помечены (program).

Если вам интересно, просто посмотрите "[VM]"исходный код Chromium , вы обнаружите, что эти числа не имеют никакого значения за пределами инструментов разработчика.

обновление 2015-06-25

[VM] (scriptId)был переименован в VMscriptId некоторое время назад , и вот прямая ссылка на результат поиска на случай, если значение снова изменится.

Роб В
источник
1
Будет ли Chrome использовать файл [VM] вместо живого js-файла? Если да, то почему?
Мэтт
@Matt Что вы имеете в виду, говоря «Ударьте файл [VM] вместо live js файла»?
Rob W
@RobW игнорирование; мой браузер кэшировал файл js (несмотря на то, что обновил мой блокировщик кеша).
Мэтт
1
[VM] (scriptId)был переименован VMscriptId некоторое время назад , но я сохранил ответ в его текущем состоянии, чтобы не сделать вопрос недействительным. Последняя ссылка codesearch является: cs.chromium.org/%22VM%5C%22%20+%22 (прямой ссылкой для поиска результата в случае , когда значение изменяется снова: chromium.googlesource.com/chromium/blink/+/... )
Rob W
1
Недавно я столкнулся с этой проблемой без eval - похоже, это связано с использованием iFrames. Моим доказательством этого является то, что когда я устанавливаю точку останова в коде в iFrame, я получаю проблему [VM], но когда я открываю iFrame в его собственном окне, я очень хорошо попадаю в точку останова. Просто убедитесь, что это можно считать одним из «друзей» eval, как описано в ответе.
Danger
44

Каждый раз, когда вы загружаете HTML-контент через AJAX и этот контент содержит <script>теги, сценарий будет оцениваться с помощью eval () и распознаваться представлением источников Chrome как новый файл, начинающийся с «VM». Вы всегда можете перейти на вкладку «Сеть», найти запрос AJAX и просмотреть HTML-ответ целиком, включая ваш скрипт.

Сэм Кауфман
источник
4
Однако это отстой для отладки. Если я использую тег скрипта с src=/test.jsthen, вызывает ошибку, которая ведет к test.js, трассировка содержит правильное имя файла, но после этого трассировки стека содержат магию виртуальной машины. Это делает невозможным получение исходного кода [из одного и того же источника] для файлов в трассировке стека более одного раза, и вы не можете их кэшировать, так как вы не знаете, какой файл является каким в будущих трассировках стека. Это исправлено в Dev Tools, но не в веб-приложениях.
Carl Smith
Это, вероятно, самая распространенная причина, по которой это происходит в современных веб-приложениях, и еще один хороший пример того, почему мы должны отделять код от контента.
Alexw
41

При использовании eval javascript попадает в виртуальные машины Chrome Debugger. Чтобы просмотреть js-файлы, созданные с помощью eval, в Chrome Debugger Sources, установите этот атрибут в конце (спасибо Splaktar) js:

//@ sourceURL=dynamicScript.js

Можно ли отладить динамическую загрузку JavaScript каким-либо отладчиком, например WebKit, FireBug или IE8 Developer Tool?

Салли
источник
9
Синтаксис изменился, теперь это: // # sourceURL = dynamicScript.js
ThiagoPonte
1
Он также должен быть в конце JavaScript, а не в начале.
Splaktar
Давно искал что-то подобное. Спасибо
Дэвид Киранс
Спасибо! Это так полезно!
Eve juan
4
В Firefox инструментов отладки, он говоритUsing //@ to indicate sourceURL pragmas is deprecated. Use //# instead
Nighto
7

Если вы хотите отлаживать программно внедренные JS-файлы в chrome, вы можете использовать debugger;инструкцию, это быстрее, чем поиск вашего скрипта, а также быстрее, чем создание файла с sourceurl .

Он работает как точка останова и автоматически определяет ваш код на вкладке исходного кода Chrome, где бы вы ни использовали debugger;оператор.

Отладчик;

Обратите внимание, что источником сценария является файл VMXXX.

Родрирокр
источник
Кажется, это не отвечает на вопрос.
Грант Миллер
Плохо, я позволил себе другие ответы на этот вопрос.
Rodrirokr
1
Супер! Это именно то, что я искал. Не нужно выяснять, в какую виртуальную машину JS-движок вставил ваш код.
Олег Болден
какая связь между этим ответом и вопросом?
Равиндра Торат
С помощью этого debugger;заявления он может демистифицировать, откуда берутся загадочные «странные и таинственные сценарии под названием« [VM] (XXXX »», если он того пожелает.
Родрирокр
4

Я обнаружил, что виртуальная машина создается из некоторых расширений Chrome - они вставляют CSS / JS на страницу, а Chrome использует файлы виртуальной машины для ее запуска.

Пирс
источник
0

Когда вы отлаживаете исходный код дочернего окна (iframe), который впоследствии выгружается, ваш исходный файл также получит префикс виртуальной машины и желтый фон.

JosdeHa
источник
0

Я столкнулся с той же проблемой. Проблема в том, что код моего приложения случайно оказался черным ящиком. Когда я пытался войти в код, он продолжал открывать эти VMXXXXвкладки.

После удаления настройки черного ящика для js-файла моего приложения я мог успешно выполнить свой код.

Джастин Ноэль
источник
0

для предотвращения этого 

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

А потом черный ящик ^.*blackbox-this.js$

То же самое для setInterval / setTimeout, когда он получает строку (но в любом случае это плохая практика, верно?;))

Это работает для вас?

Рахман Резаи
источник
-1

У меня была такая же проблема, когда я отлаживал свое угловое приложение. Отладка слишком большого количества сценариев виртуальных машин, которые нельзя было поместить в черный ящик, действительно занимала много времени. Для отладки я выбрал обозреватель Mozilla / IE.

Самекша Кумари
источник