Инструмент разработки Chrome: [VM] файл из javascript
Я добавил точку останова в свой файл javascript (jaydata.js) и нажимал "Переход к следующему вызову функции".
Когда он добрался до строки, которая была:
},
появился еще один файл под названием "[VM] (8312)". Я продолжал нажимать "Переход к следующему вызову функции", и теперь мой экран:
![enter image description here]()
Каковы эти странные и таинственные сценарии под названием "[VM] (XXXX" и откуда они взяты?
Ответы
Ответ 1
[VM] (scriptId)
не имеет особого значения. Это фиктивное имя, которое помогает нам различать код, который не связан напрямую с именем файла, например код, созданный с помощью eval
и friends.
В прошлом все эти сценарии были просто помечены (program)
.
Если вам интересно, просто посмотрите "[VM]"
в исходном коде Chromium, и вы обнаружите, что эти цифры не имеют значительного значения вне инструментов разработчика.
обновление 2015-06-25
[VM] (scriptId)
был переименован в VMscriptId
некоторое время назад, и здесь есть прямая ссылка на результат поиска в случае, если значение снова изменится.
Ответ 2
Всякий раз, когда вы загружаете содержимое HTML через AJAX и этот контент содержит теги <script>
, script будет оцениваться с помощью eval() и распознаваться в представлении Chrome Sources в виде нового файла, начинающегося с "VM". Вы всегда можете перейти на вкладку "Сеть", найти запрос AJAX и полностью просмотреть ответ HTML, включая script.
Ответ 3
При использовании eval javascript попадает в VM отладчика Chrome. Чтобы просмотреть js, созданные с помощью eval в Источниках отладчика Chrome, установите этот атрибут в конце (спасибо Splaktar) js:
//@ sourceURL=dynamicScript.js
Можно ли отлаживать динамическую загрузку JavaScript некоторыми отладчиками, такими как WebKit, FireBug или IE8 Developer Tool?
Ответ 4
Я обнаружил, что VM генерируется из некоторых расширений Chrome - они вставляют CSS/JS на страницу, а Chrome использует файлы VM для ее запуска.
Ответ 5
Если вы хотите отлаживать программно внедренные файлы JS в chrome, вы можете использовать debugger;
Это быстрее, чем поиск вашего скрипта, а также быстрее, чем создание файла с помощью sourceurl.
Он работает как точка останова и автоматически определяет ваш код на вкладке Chrome Source, где бы вы ни использовали debugger;
выражение.
![Debugger;]()
Обратите внимание, что источником сценария является файл VMXXX.
Ответ 6
Когда вы отлаживаете исходный файл дочернего окна (iframe), который впоследствии выгружается, ваш исходный файл также получит префикс VM и желтый фон.
Ответ 7
Я столкнулся с той же проблемой. Проблема в том, что код моего приложения был сочтен "черным ящиком" случайно. Когда я пытался войти в код, он продолжал открывать эти вкладки VMXXXX
.
После удаления настройки чёрного ящика для моего js файла приложения я смог успешно пройти через мой код.
Ответ 8
@sourceURL
позволяет значительно упростить разработку при работе с evals.
Включив в свой код следующий специальный комментарий, который будет пропущен, вы можете именовать evals и встроенные скрипты и стили, чтобы они выглядели как более логичные имена в ваших DevTools.
//# sourceURL=someName
Больше информации здесь - https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps#sourceurl_and_displayname
Ответ 9
У меня была такая же проблема, когда я отлаживал свое угловое приложение. Видя слишком много сценариев виртуальных машин, которые не могли быть помещены в черный ящик, потребовалось много времени для отладки. Я скорее выбрал Mozilla/IE Explorer для отладки.