Как установить точки останова во встроенном JavaScript в Google Chrome? - PullRequest
193 голосов
/ 01 марта 2011

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

Ответы [ 13 ]

198 голосов
/ 01 марта 2011

Вы говорите о коде в тегах <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 s, если инструменты разработчика не открыты.


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

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

enter image description here

115 голосов
/ 01 марта 2011

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

44 голосов
/ 26 августа 2016

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

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

Конечно, замените "somename" на какое-то имя;), а затем вы увидите его в отладчике Chrome по адресу "Sources> top> (без домена)> somename.js "как обычный скрипт, и вы сможете отлаживать его, как и другие скрипты

39 голосов
/ 28 февраля 2012

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

16 голосов
/ 09 августа 2014

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

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

P.S .: кроме того, вы можете добавить оператор "отладчик", если вы используете Chrome, как то, что предлагает @Matt Ball

10 голосов
/ 12 апреля 2012

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

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

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

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

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

4 голосов
/ 28 марта 2018

Добавление debugger; поверх моего скрипта сработало для меня.

3 голосов
/ 18 декабря 2018

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

enter image description here

Это Chrome 71.

2 голосов
/ 04 июля 2014

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

Uncaught TypeError: undefined is not a function 

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

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

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

2 голосов
/ 28 января 2012

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...