Не удается увидеть динамически загруженный код в инструментах разработчика Chrome 22

Когда я динамически загружаю фрагмент html, содержащий javascript через AJAX, я не вижу этот контент на вкладке source в окне инструментов разработчика в Chrome 22.0.1229.94. Говоря, я пошел сюда

https://developers.google.com/chrome-developer-tools/docs/scripts-breakpoints#js_dynamic

На этой странице показано примерное окно инструментов разработчика, устаревшее. Для загрузки динамического script есть кнопка на странице, и она не отображается на вкладке источника, когда вы делаете.

Как работа, я обнаружил, что добавление

debugger;

в script и перезагрузка приведет к паузе в динамически загружаемом коде, но, к сожалению, все номера строк выделены серым цветом, и вы не можете установить какие-либо точки останова в отладчике.

Мне что-то не хватает или что?

Спасибо, Rob

Ответ 1

Когда вы используете динамический код библиотеки или javascript, который вы загрузили динамически, вы можете использовать фразу

//@ sourceURL=foo.js

в начале вашего javascript-кода, который foo.js - это имя, которое ему будет присвоено. отладчик покажет его с этим именем. Это правда в хром, и я тоже думаю в firebug. В этом случае вы можете поместить точку останова в динамически загружаемом javascript-коде.

Ответ 2

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

Не знаю, работает ли это или нет в хром (это определенно не работает для меня сейчас, может быть в прошлом).

//@ sourceURL=foo.js

Рабочее решение

Для динамически загружаемого script через ajax, который появится в вашем инструменте источника chrome, вам нужно добавить следующую строку в начале или конце (я предпочитаю) местоположение вашего файла script:

//# sourceURL=foo.js

И ваш script с именем foo.js появится на левой панели вкладки источника в раскрывающемся списке (без домена)

- > локальный - источник /src

- > (без домена) - foo.js

В качестве альтернативы вы можете добавить строку ниже в script в любом месте сценариев.

debugger;

В chrome вы можете использовать оператор "debugger;" для разрыва в заявлении, когда панель отладки открыта. Chrome просто игнорирует это, если панель отладки закрыта.

Это поможет остановить ваш script в режиме отладки, и вы увидите панель script в исходной (отладочной) панели с именем, таким как VM ****.

Надеюсь, что это поможет.

Ответ 3

Вы можете использовать // @sourceURL. Возможно, Chrome не поддерживает // @sourceURL для встроенных скриптов. Однако он работает на выражениях eval. В этой статье приводится более подробная информация об именах блоков eval и именах любых анонимных функций в вашем коде.

Вместо использования eval вы можете попробовать внедрить тег script или JSONP.

Варункумар Нагараджан

Ответ 4

В качестве альтернативы, чтобы исправить эту проблему, вы можете открыть инструмент разработчика в отдельном окне, щелкнув значок. Теперь перезагрузите script, и он будет отображаться на вкладке script, как и ожидалось. Я знаю, что это не решение, а работа вокруг.