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



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

641   11  

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> теги:

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

enter image description here

обновите страницу, содержащую сценарий, пока инструменты разработчика открыты на вкладке сценарии. Это добавит запись (программа) в список файлов, которая показывает 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] не имеет существенного значения, и n on приравнивается к идентификатору скрипта. Эту информацию можно найти здесь : Chrome " [VM]"

используя Visual Studio (2012) у меня была та же проблема и переключение на IIS Express решена проблема!

The script тега type атрибут не учитывался в нем.

почему-то Сервер Разработки Visual Studio не предоставляет все, что Chrome должен включить точки останова.

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

добавлять debugger; на вершине у меня работал скрипт.

Comments

    Ничего не найдено.