Когда я открываю Инструменты разработчика в Google Chrome, я вижу всевозможные функции, такие как "Профили", "Сроки и аудиты", но отсутствуют основные функции, такие как возможность установки точек останова как в js файлах, так и в HTML-коде и javascript-коде! Я попытался использовать консоль javascript, которая сама по себе является ошибкой - например, когда она сталкивается с ошибкой JS, я не могу выбраться из нее, если не обновить всю страницу. Может кто-нибудь помочь?
Как установить контрольные точки в встроенном Javascript в Google Chrome?
Ответ 1
Используйте вкладку sources, вы можете установить контрольные точки в JavaScript там. В дереве каталогов под ним (со стрелкой вверх и вниз) вы можете выбрать файл, который хотите отлаживать. Вы можете выйти из ошибки, нажав на резюме справа от той же вкладки.
Ответ 2
Вы говорите о коде в тегах <script> или в атрибутах тега HTML, например:
<a href="#" onclick="alert('this is inline JS');return false;">Click</a>
В любом случае ключевое слово debugger, как это будет работать:
<a href="#" onclick="debugger; alert('this is inline JS');return false;">Click</a>
N.B. Chrome не будет останавливаться на debugger, если инструменты dev не открыты.
Вы также можете установить контрольные точки свойств в файлах JS и тегах <script>:
- Перейдите на вкладку "Источники"
- Нажмите значок "Показать навигатор" и выберите файл
- Дважды щелкните номер строки в левом поле. Соответствующая строка добавляется на панель "Точки останова" (4).
Ответ 3
Обновите страницу, содержащую script, пока инструменты разработчика открыты на вкладке скриптов. Это добавит запись (программа) в список файлов, который отображает html страницы, включая script. Отсюда вы можете добавить точки останова.
Ответ 4
Вы также можете указать имя своего script:
<script>
... (your code here)
//# sourceURL=somename.js
</script>
of the course замените "somename" на какое-то имя;), а затем вы увидите его в отладчике chrome в разделе "Источники > top > (без домена) > somename.js" в качестве обычного script, и вы сможете отлаживать его как другие скрипты
Ответ 5
Другим интуитивным простым трюком для отладки, особенно script внутри html, возвращаемого ajax, является временный put console.log( "test" ) внутри script.
Как только вы уволили событие, откройте вкладку консоли внутри инструментов разработчика. вы увидите ссылку на исходный файл, указанную в правой части отчета "Отладка печати". просто нажмите на источник (что-то вроде VM4xxx), и теперь вы можете установить точку останова.
P.S.: Кроме того, вы можете рассмотреть вопрос о том, чтобы поставить инструкцию "отладчик", если вы используете хром, например, что предлагает @Matt Ball
Ответ 6
Мое положение и то, что я сделал, чтобы исправить это:
У меня есть файл javascript, который включен на HTML-странице следующим образом:
Имя страницы: test.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 Debugger в Chrome, я перейду на вкладку "Сценарии" и выпадаю список, как показано выше. Я могу отчетливо видеть scripts/common.js, но я мог НЕ видеть текущую страницу html test.html в раскрывающемся списке, поэтому я мог бы не отлаживать встроенный javascript:
<script type="text/javascript">
document.write("something");
</script>
Это было недоумение. Однако, когда я удалил устаревший type = "text/javascript" из встроенного script:
<script>
document.write("something");
</script>
.. и обновил/перезагрузил страницу, вуаля, она появилась в выпадающем списке, и все было хорошо снова.
Я надеюсь, что это полезно для всех, у кого есть проблемы с отладкой встроенного javascript на странице html.
Ответ 7
Добавление debugger; сверху на мой сценарий работал для меня.
Ответ 8
У меня тоже была такая же проблема, как отлаживать JavaScript внутри тегов <script>. Но потом я нашел его на вкладке "Источники", которая называется "(индекс)" с круглыми скобками. Нажмите на номер строки, чтобы установить точки останова.
Это Chrome 71.
Ответ 9
Если вы не видите вкладку "Сценарии", убедитесь, что вы запускаете Chrome с правильными аргументами. У меня возникла эта проблема, когда я запустил Chrome для отладки серверного JavaScript с аргументом --remote-shell-port=9222. У меня нет проблем, если я запускаю Chrome без аргументов.
Ответ 10
Я столкнулся с этой проблемой, однако моя встроенная функция имела угловое представление. Поэтому при загрузке я не смог получить доступ к встроенному script, чтобы добавить отладку, поскольку на вкладке источников отладчика был доступен только index.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);
}
Это означает, что когда я нажал на свою кнопку, я был вызван в хром-консоль.
Uncaught TypeError: undefined is not a function
Важное значение здесь было следующим: VM5658:6 нажатие на это позволило мне пройти через встроенную линию и удерживать точку останова там позже.
Чрезвычайно запутанный способ его достижения. Но он работал и может оказаться полезным при работе с приложениями с одной страницей, которые динамически загружают ваши представления.
VM[n] не имеет значимого значения, а n on соответствует значению script. Эта информация может быть найдена здесь: Chrome "[VM]"
Ответ 11
Использование Visual Studio (2012) У меня была такая же проблема, и переход на IIS Express решил проблему!
Атрибут script tag type не учитывал его.
По какой-то причине Сервер разработки Visual Studio не предоставляет все, что Chrome должен включить точки останова.
Ответ 12
Это расширение ответа Риан Шмитса выше. В моем случае у меня был код HTML, встроенный в мой код JavaScript, и я не мог видеть ничего, кроме кода HTML. Может быть, Chrome Debugging изменился с годами, но щелкнув правой кнопкой на вкладке Источники/Источники, я представил мне Добавить папку в рабочее пространство. Мне удалось добавить весь проект, который дал мне доступ ко всем моим скриптам Java. Вы можете найти более подробную информацию в этой ссылке. Надеюсь, это поможет кому-то.
Ответ 13
Я знаю, что вопрос касается не Firefox но я не хотел добавлять копию этого вопроса, чтобы просто ответить на него сам.
Для Firefox вам нужно добавить debugger; чтобы иметь возможность делать то, что @matt-ball предложил для тега script.
Таким образом, в вашем коде вы добавляете debugger над строкой, которую хотите отлаживать, а затем можете добавлять точки останова. Если вы просто установите точки останова в браузере, он не остановится.
Если это не место, чтобы добавить ответ Firefox, учитывая, что вопрос о Chrome. Не :( минус ответ, просто дайте мне знать, где я должен опубликовать это, и я с удовольствием переместлю сообщение. :)