Отладка Javascript по строкам с помощью Google Chrome

Как я могу пройти через код javascript по строкам с помощью инструментов разработчика Google Chromes, не входя в javascript-библиотеки?

Например, я сильно использую jQuery на своем сайте, и я просто хочу отлаживать jQuery, который я написал, а не javascript/jquery в библиотеках jquery. Как мне только пройти через свой собственный jquery/javascript и не перешагивать миллионы строк в библиотеках jquery?

Итак, если у меня есть следующее:

function getTabFrame() {
    $.ajax({
        url: 'get_tab_frame.aspx?rand=' + Math.random(),
        type: 'GET',
        dataType: 'json',
        error: function(xhr, status, error) {
            //alert('Error: ' + status + '\nError Text: ' + error + '\nResponse Text: ' + xhr.responseText);
        },
        success: function(data) {
            $.each(data, function(index, item) {
                // do something here
            });
        }
    });
}

если я помещаю точку останова в $.ajax({, если я начну отладку, когда она остановится, если я затем нажму F11, она будет прямо в библиотеки jQuery. Я не хочу, чтобы это произошло, я хочу, чтобы он перешел к следующей строке, которая url: 'get_tab_frame.aspx?rand=' + Math.random(),.

Я попытался нажать F10 вместо этого, но это идет прямо к закрытию } функции. И F5 просто переходит к следующей точке останова, не перешагивая каждую линию по очереди.

Ответы

Ответ 1

Предполагая, что вы работаете на машине Windows...

  • Нажмите клавишу F12
  • Выберите вкладку Scripts или Sources в инструментах разработчика
  • Щелкните значок маленькой папки на верхнем уровне
  • Выберите ваш файл JavaScript
  • Добавьте точку останова, нажав на номер строки слева (добавляет маленький синий маркер)
  • Выполните свой JavaScript

Затем во время выполнения отладки вы можете сделать несколько шагов шага...

  • F8 Продолжить: будет продолжаться до следующей точки останова
  • F10 Шаг: шаг за вызовом следующей функции (не будет) введите библиотека)
  • F11 Шаг в: Выполняется следующий вызов функции ( будет войдите в библиотеку)
  • Shift + F11 Вывод: шаги из текущего Функция

Обновление

После прочтения обновленного сообщения; для отладки кода я бы рекомендовал временно использовать исходный код разработки jQuery. Хотя это не позволяет решить вашу проблему напрямую, это позволит вам легче отлаживать. Для того, что вы пытаетесь достичь, я считаю, что вам нужно будет войти в библиотеку, поэтому, надеюсь, производственный код должен помочь вам расшифровать то, что происходит.

Ответ 2

... Как я могу выполнить код javascript по строкам с помощью инструментов разработчика Google Chromes, не входя в javascript-библиотеки?...

Для записи: В это время (февраль/2015) и Google Chrome и Firefox имеют именно то, что вам (и мне) нужно избегать входить в библиотеки и скрипты, и выходить за рамки кода, который нас интересует, он называется Black Бокс:

enter image description here

Когда вы черная копия исходного файла, отладчик не будет файл при выполнении кода, который вы отлаживаете.

Дополнительная информация:

Ответ 3

Существуют различные типы точек останова, которые вы можете использовать, например: при любом событии или мониторинге функции или изменении DOM и т.д.

Посетите https://developers.google.com/web/tools/chrome-devtools/javascript/breakpoints для получения дополнительной информации.