Как установить точки останова в встроенном Javascript в Google Chrome?
когда я открываю инструменты разработчика в Google Chrome, я вижу все виды функций, таких как профили, временные рамки и аудиты, но базовая функциональность, такая как возможность устанавливать точки останова как в JS-файлах, так и в html и javascript-коде, отсутствует! Я попытался использовать консоль javascript, которая сама по себе глючит - например, как только она сталкивается с ошибкой JS, я не могу выйти из нее, если не обновлю всю страницу. Может кто-нибудь помочь?
11 ответов:
используйте вкладку источники, вы можете установить точки останова в JavaScript там. В дереве под каталог (со стрелками вверх и вниз в нем), вы можете выбрать файл, который вы хотите отладить. Вы можете выйти из ошибки, нажав кнопку возобновить в правой части той же вкладки.
вы говорите о коде внутри
<script>теги, или в атрибутах тегов HTML, как это?<a href="#" onclick="alert('this is inline JS');return false;">Click</a>в любом случае the
debuggerключевое слово как это будет работать:<a href="#" onclick="debugger; alert('this is inline JS');return false;">Click</a>Б. Н. Chrome не будет останавливаться на
debuggers, Если инструменты разработчика не открыты.
вы также можете установить точки останова свойств в JS-файлах и
<script>теги:
- выберите источник вкладка
- выберите Показать Навигатор значок и выберите файл
- дважды щелкните номер строки a в левом поле. Соответствующая строка добавляется в точки останова панели (4).
обновите страницу, содержащую сценарий, пока инструменты разработчика открыты на вкладке сценарии. Это добавит запись (программа) в список файлов, которая показывает html страницы, включая сценарий. Отсюда вы можете добавить точки останова.
вы также можете дать имя ваш скрипт:
<script> ... (your code here) //# sourceURL=somename.js </script>конечно, замените " somename "на какое-то имя ;) и тогда вы увидите его в отладчике chrome в" Sources > top > (no domain) > somename.ОАО" как обычный скрипт, и вы сможете отлаживать его, как и другие скрипты
еще один интуитивно понятный простой трюк для отладки, особенно скрипта внутри html, возвращаемого ajax, - это временная консоль put.журнал("тест") внутри скрипта.
после того, как вы произвели события, откройте вкладку "консоль" внутри "инструменты разработчика". вы увидите ссылку на исходный файл, показанную в правой части инструкции" test " debug print. просто нажмите на источник (что-то вроде VM4xxx) и теперь вы можете установить точку останова.
С. П.: Кроме того, вы можете рассмотреть, чтобы положите" отладчик " заявление, если вы используете chrome, как то, что предлагается @Matt Ball
моя ситуация и что я сделал, чтобы исправить это:
У меня есть файл javascript, включенный на HTML-странице следующим образом:
имя страницы: тест.HTML-код<!DOCTYPE html> <html> <head> <script src="scripts/common.js"></script> <title>Test debugging JS in Chrome</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body> <div> <script type="text/javascript"> document.write("something"); </script> </div> </body> </html>Теперь, войдя в отладчик Javascript в Chrome, я нажимаю вкладку скрипты и раскрываю список, как показано выше. Я ясно вижу скрипты/общие.js однако я мог не смотрите текущую html страницу
Если вы не видите вкладку "Скрипты", убедитесь, что вы запускаете Chrome с правильными аргументами. У меня была эта проблема, когда я запустил Chrome для отладки JavaScript на стороне сервера с аргументом
--remote-shell-port=9222. У меня нет проблем, если я запускаю Chrome без аргументов.
я столкнулся с этой проблемой,однако моя встроенная функция была в представлении angularJS. Поэтому при загрузке я не мог получить доступ к встроенному скрипту для добавления отладки, так как только индекс.html был доступен на вкладке Источники отладчика.
это означало, что когда я открывал конкретный вид с моим встроенным (не было выбора на этом) он не был доступен.
единственный способ, которым я смог поразить его, состоял в том, чтобы поместить ошибочную функцию или вызвать внутри встроенного JS функция.
мое решение входит :
function doMyInline(data) { //Throw my undefined error here. $("select.Sel").debug(); //This is the real onclick i was passing to angular.element(document.getElementById(data.id)).scope().doblablabla(data.id); }Это означает, что когда я нажал на свою кнопку, Мне было предложено в Chrome consolse.
Uncaught TypeError: undefined is not a functionважным здесь был источник этого:
VM5658:6нажатие на это позволило мне пройти через встроенный и удерживать точку останова там на потом..чрезвычайно запутанный способ его достижения.. Но это сработало и может оказаться полезным при работе с одностраничными приложениями, которые динамически загружайте свои представления.
The
VM[n]не имеет существенного значения, иnon приравнивается к идентификатору скрипта. Эту информацию можно найти здесь : Chrome " [VM]"
используя Visual Studio (2012) у меня была та же проблема и переключение на IIS Express решена проблема!
The
scriptтегаtypeатрибут не учитывался в нем.почему-то Сервер Разработки Visual Studio не предоставляет все, что Chrome должен включить точки останова.
Это ответ Риана Шмитса выше. В моем случае у меня был HTML-код, встроенный в мой код JavaScript, и я не мог видеть ничего, кроме HTML-кода. Возможно, отладка Chrome изменилась за эти годы, но щелчок правой кнопкой мыши на вкладке Sources/Sources представил мне Добавить папку в рабочее пространство. Я смог добавить весь свой проект, который дал мне доступ ко всем моим JavaScripts. Вы можете найти более подробную информацию по этой ссылке. Я надеюсь, что это помогает кому-то.

Comments