Как установить точки останова во встроенном JavaScript в Google Chrome?

211

Когда я открываю Инструменты разработчика в Google Chrome, я вижу все виды функций, таких как Профили, Временные шкалы и Аудиты, но основные функции, такие как возможность устанавливать точки останова как в js-файлах, так и в html и коде javascript, отсутствуют! Я пытался использовать консоль javascript, которая сама по себе глючит - например, когда она сталкивается с ошибкой JS, я не могу выйти из нее, пока не обновлю всю страницу. Может кто-нибудь помочь?

javascript debugging google-chrome туз
источник
Я отказался от Chrome. Попробовал с Firefox, и моя точка останова попала в течение нескольких секунд. Это может быть возможно с Chrome, но это, конечно, не очевидно, как!
Оливер П

Ответы:

127

Используйте вкладку источников, вы можете установить точки останова в JavaScript там. В дереве каталогов под ним (со стрелками вверх и вниз в нем) вы можете выбрать файл, который хотите отладить. Вы можете выйти из ошибки, нажав возобновить на правой стороне той же вкладки.

Риан Шмитс
источник
31
По какой-то причине я вижу список включенных js-файлов, но я не могу выбрать саму исполняющую страницу, она не отображается в списке. Любые идеи?
Улу
67
@ulu, у меня была такая же проблема. Убедитесь, что атрибут type = "text / javascript" установлен в элементе <script>.
contactmatt
9
за исключением того, что в HTML5 этот атрибут больше не является обязательным. Я не изменяю исходный код только для отладки!
sashok_bg
10
Я не вижу даже после добавления type = "text / javascript"
Нитин Кумар Мишра
3
если это не работает, и у вас есть встроенный код JavaScript, такой как: <script> your code </script>добавьте имя как: <script> your code //# sourceURL=somename.js </script> Это лучше объяснено в ответе ниже
KM.
209

Вы говорите о коде внутри <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>

NB Chrome не будет останавливаться на debuggers, если инструменты разработки не открыты.

Вы также можете установить точки останова свойств в файлах и <script>тегах JS :

  1. Нажмите вкладку Источники
  2. Нажмите значок Показать навигатор и выберите файл
  3. Дважды щелкните номер строки в левом поле. Соответствующая строка добавляется на панель « Точки останова» (4).

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

Мэтт Болл
источник
4
Там нет вкладки Сценарии. Я вижу все остальные вкладки, которые есть на этом рисунке, но нет вкладки Scripts!
туз
5
Я имею в виду возможность установить точку останова в теге script в html. Я также попытался использовать отладчик; Ключевое слово, но это не работает. Chrome не останавливается на этом, но работает в Firefox. Я ищу решение для точки останова, не основанное на ключевом слове отладчика, которое неудобно помещать во множество мест в коде, а затем удалять.
туз
2
В раскрывающемся списке на вкладке «Сценарии» я вижу только файлы JS, но не файлы HTML, содержащие тег <script>, который я хочу отлаживать. Firebug на FF имеет аналогичный раскрывающийся список, но также содержит HTML-файлы, содержащие теги <script>. Это ошибка или есть другой способ установить точку останова во встроенном коде JS?
Вольфрам Арнольд
8
Вкладка вызывается Sourcesвместо Scriptsсейчас.
CoderDennis
1
Когда я попытался отладить html-файл, встроенный в js, в моей области разработки появилась пустая страница. Мне пришлось обновить, глядя на пустой исходный файл, чтобы он заполнился.
HappyCoder86
73

Вы также можете дать имя своему сценарию:

<script> ... (your code here) //# sourceURL=somename.js </script>

ofcourse замените «somename» на какое-то имя;), а затем вы увидите его в отладчике chrome в «Sources> top> (без домена)> somename.js» как обычный сценарий, и вы сможете отлаживать его, как и другие сценарии.

buildhome.eu
источник
3
Самый простой и идеальный способ. но обратите внимание на других, не забудьте удалить его, прежде чем отправлять его в производство.
Замир Фузан,
2
Боже мой, вы понятия не имеете, насколько это помогло мне. Боже мой, это великолепно. Я искал что-то подобное целую вечность.
ГрегРос
Я использовал эту (прекрасную) идею, но не смог увидеть новый файл на вкладке источников, только HTML-файл. Затем я выполнил код и, в конце, в консоли, справа от любого сообщения, написанного из скрипта, вы можете увидеть ссылку на код. Самое приятное, что ссылка показывает имя файла, которое вы дали скрипту (т.е. // # sourceURL = somename.js).
Мануэль Ривера
1
Я бы дал вам 1000 голосов, если бы смог;) Очень полезный трюк
Джулио Куаресима
43

Обновите страницу, содержащую скрипт, пока инструменты разработчика открыты на вкладке скриптов. Это добавит (программную) запись в список файлов, который показывает HTML страницы, включая скрипт. Отсюда вы можете добавить точки останова.

Грубый кролик
источник
Это не сработало для меня. Вместо этого я щелкнул значок ошибки скрипта в правом нижнем углу, чтобы открыть файл программы на вкладке скриптов.
sanbikinoraion
1
Спасибо! Используя Chrome 69, это работало, даже если я не был на вкладке источников. Ключом к этому является то, что инструменты разработчика открыты, а страница загружена.
Сэм
Это был бы принятый ответ, если бы это был мой вопрос. Спасибо.
PlumpNation
Работал в Chrome 83. В моем env, имя файла основано на URL вашего приложения. Например, если URL-адрес example.com/xxx/yyy, имя файла будет «yyy».
Helix Quar
18

Другой простой интуитивно понятный прием для отладки, особенно скрипта внутри html, возвращаемого ajax, заключается во временном размещении console.log («test») внутри скрипта.

Как только вы запустите событие, откройте вкладку консоли в инструментах разработчика. вы увидите ссылку на исходный файл, показанную справа от команды «test» debug print. просто нажмите на источник (что-то вроде VM4xxx), и теперь вы можете установить точку останова.

PS: кроме того, вы можете добавить оператор «отладчик», если вы используете Chrome, например, то, что предлагает @Matt Ball

кругозор
источник
10

Моя ситуация и что я сделал, чтобы это исправить: у
меня есть файл javascript, включенный в HTML-страницу следующим образом:
Page Name: 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, я щелкаю вкладку «Сценарии» и раскрываю список, как показано выше. Я могу ясно видеть сценарии / common.js однако я мог бы НЕ видеть текущую страницу HTML test.html в раскрывающемся вниз, поэтому я не мог отладки встроенного JavaScript:

<script type="text/javascript">
  document.write("something");
</script>

Это было озадачивающе. Однако, когда я удалил устаревший type = "text / javascript" из встроенного скрипта:

<script>
  document.write("something");
</script>

... и обновил / перезагрузил страницу, вуаля, она появилась в выпадающем списке, и все снова было хорошо.
Я надеюсь, что это полезно для тех, кто испытывает проблемы с отладкой встроенного JavaScript на HTML-странице.

Адитья Сингх
источник
Хорошая работа! Протестировано в Chrome 20.0.1132.57 на Mac 10.7.4. Представлена ​​ошибка в проекте Chromium.
Марс Робертсон
Учтите, что в HTML 4 и XHTML typeэто обязательный атрибут. В HTML5 это необязательно.
hotshot309
2
Это не имеет ничего общего с типом. Сценарий собирается VM после выполнения, если инспектор уже не открыт в этот момент. Когда вы перезагрузили страницу, сценарий не был собран.
Всевик
Я в моем случае, пропавшая <div>помешала мне увидеть код в отладчике
ceztko
5

Добавление debugger;сверху в моем сценарии работало для меня.

JeKo
источник
4

У меня тоже была такая же проблема, как отлаживать JavaScript внутри <script>тегов. Но потом я нашел его на вкладке «Источники», которая называется «(индекс)» с круглыми скобками. Нажмите на номер строки, чтобы установить точки останова.

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

Это Chrome 71.

ocarlsen
источник
2

Если вы не видите вкладку «Сценарии», убедитесь, что вы запускаете Chrome с правильными аргументами. У меня была эта проблема, когда я запустил Chrome для отладки серверного JavaScript с аргументом --remote-shell-port=9222. У меня нет проблем, если я запускаю Chrome без аргументов.

Падший ангел
источник
Не могли бы вы уточнить, пожалуйста? У меня возникла именно эта проблема - я вообще не вижу вкладку скриптов. Я скачал последнюю версию сборки для разработчиков Chrome.
Том Редферн
2

Я столкнулся с этой проблемой, однако моя встроенная функция была в угловом представлении. Поэтому при загрузке я не смог получить доступ к встроенному скрипту для добавления отладки, так как на вкладке источников отладчика был доступен только 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);
    }

Это значит, что когда я нажимал на кнопку, мне предлагалось ввести Chrome. 

Uncaught TypeError: undefined is not a function

Важным моментом здесь был источник этого: VM5658:6нажатие на это позволило мне пройти через встроенную строку и удерживать точку останова там на потом.

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

Значение VM[n]не имеет значительного значения, а значение non равно идентификатору сценария. Эту информацию можно найти здесь: Chrome "[VM]"

Pogrindis
источник
1

При использовании Visual Studio (2012) у меня возникла та же проблема, и переход на IIS Express решил эту проблему!

В scriptтеге typeатрибут не фактор в него.

По какой-то причине Visual Studio Development Server не предоставляет все, что требуется Chrome для включения точек останова.

побег-ооо
источник
1

Я знаю, что вопрос не о, Firefoxно я не хотел добавлять копию этого вопроса, чтобы просто ответить на него сам.

Для Firefox вам нужно добавить, debugger;чтобы иметь возможность делать то, что @ matt-ball предложил для scriptтега.

Таким образом, в вашем коде вы добавляете debuggerнад строкой, которую хотите отладить, а затем можете добавить точки останова. Если вы просто установите точки останова в браузере, он не остановится.

Если это не место, чтобы добавить ответ Firefox, учитывая, что вопрос о Chrome. Не :( минус ответ, просто дайте мне знать, где я должен опубликовать это, и я с удовольствием переместлю сообщение. :)

T04435
источник
0

Это продолжение ответа Риана Шмитса выше. В моем случае в мой код JavaScript был встроен HTML-код, и я не мог видеть ничего, кроме HTML-кода. Возможно, отладка Chrome изменилась за эти годы, но щелкнув правой кнопкой мыши вкладку «Источники / источники», я получил « Добавить папку в рабочую область» . Я смог добавить весь свой проект, который дал мне доступ ко всем моим JavaScripts. Вы можете найти более подробную информацию в этой ссылке . Надеюсь, это кому-нибудь поможет.

Патриция
источник