Точки останова отладчика Chrome javascript ничего не делают?


Я не могу понять инструмент отладки Chrome.

У меня есть chrome версии 21.0.1180.60 м.

шаги, которые я взял:

  1. Я нажал ctrl-shift-i, чтобы открыть консоль.
  2. нажмите на источники, затем выберите соответствующий файл javascript, который я хочу отладить.
  3. Я устанавливаю точки останова, где я хочу, чтобы код остановился, поставив синий тег на желоб рядом со строкой слева.
  4. Я нажал на кнопку на моя веб-страница (которая является рендеринг-страницей php), которая инициирует код javascript.
  5. код успешно выполнялся без остановки.

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

дальнейшее тестирование показало, что это мой код, который вызывает сбой точки останова. Кажется, что он терпит неудачу на "$("#frmVerification").submit (function () {"строка. Он не входит в состав точки останова внутри функции().

ниже:

//function to check name and comment field 
var test = "this is a test";
var test2 = "this is another test";

function validateLogin(){
    //if(userEmail.attr("value") && userPass.attr("value"))
        return true;
    //else
        //return false;
}

//onclick on different buttons, do different things.
function ajaxRequest(){

}
$(document).ready(function(){
  //When form submitted
    $("#frmVerification").submit(function(){
        var username = $("#username");
        var token = $("#token");
        var action = $("#action");
        var requester = $("#requester");
        if(validateLogin()){
            $.ajax({
            type: "post",
            url: "verification.php",
            data: "username="+username.html()+"&token="+token.val()+"&action="+action.val()+"&requester="+requester.val(),
            success: function(data) {
                try{
                    var jsonObj = $.parseJSON(data); //convert data into json object, throws exception if data is not json compatible
                    if(jsonObj.length > 0){//if there is any error output all data
                        var htmUl = $('<ul></ul>');
                        $.each(jsonObj, function(){
                            htmUl.append('<li>' + this + '</li>');
                        });
                        $("#errOut").html(htmUl);
                    }else{
                        alert("Your account is now activated, thank you. If you have already logged in, press OK to go to the home page. If not, you must log in first.");
                        window.location.replace("home.php");
                    }
                }
                catch(e){//if error output error to errOut]
                    $("#errOut").html("PHP module returned non JSON object: <p>"+data+"</p>");
                }
            }
        });
    }
    else alert("Please fill UserName & Password!");
        return false;
    });
});
14 59

14 ответов:

Я не уверен, почему ваши точки останова не попадают, но один верный способ войти в ваш код-это ввести

debugger;

где вы хотите, чтобы код остановился, а затем снова запустить с открытым окном chrome developer tools.


только одна маленькая вещь, чтобы быть в курсе, не забудьте очистить после того, как вы сделали и удалить строки отладчика. Если вы когда-либо запускали файлы JavaScript через YUI compressor, существование debugger; строка приведет к ошибке.

это поздний ответ, но у меня была та же проблема, но ответ был другим.

в моем случае в моем коде была ссылка sourceURL:

//@ sourceURL=/Scripts/test.js

когда этот файл JavaScript сокращен и загружается браузер, он обычно говорит инструменты разработчика Chrome, где unminified версия.

, если вы отлаживаете unminified версия и существует такая строка, инструменты разработчика Chrome карты, что sourceURL путь вместо "нормальных" путь.

например, если вы работаете локально на веб-сервере, то на вкладке Источники в Chrome Dev Tools путь к данному JS-файлу будет http://localhost/Scripts/test.js

если тест.JS имеет это в самом низу

//@ sourceURL=/Scripts/test.js

тогда точки останова будут работать только в том случае, если путь к файлу /Scripts/test.js, не полный URL-адрес http://localhost/Scripts/test.js

в Chrome 38, оставаясь с моим примером выше, если вы посмотрите на вкладку источники, каждый файл убегает http://localhost/, поэтому при нажатии на кнопку тест.js, хром загружается http://localhost/Scripts/test.js

вы можете поместить все точки останова, которые вы хотите в этом файле, и Chrome никогда не попадает ни в одну из них. Если вы поместите точку останова в свой JS, прежде чем он вызовет любую функцию в тесте.js и затем шаг в эту функцию, вы увидите, что Chrome открывает новую вкладку, путь к которой /Scripts/test.js. Установка точек останова в этом файле остановит поток программы.

когда я избавился от @ sourceURL строка из файла JS, все снова работает нормально (т. е. так можно было бы ожидать).

вероятно, это ошибка https://code.google.com/p/chromium/issues/detail?id=278361

это воспроизводится с моим Chrome 31.0.1650.57 (официальная сборка 235101) на Linux.

Я перезапускаю браузер, чтобы исправить это.

У меня аналогичная проблема. Точки останова, где не работает, если я не использовал debugger;. Я исправил свою проблему с точками останова с помощью "восстановить значения по умолчанию и перезагрузить". Он находится в инструментах разработчика Chrome, настройках, восстанавливает значения по умолчанию и перезагружает.

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

сценарий:

У меня есть одна страница, которая использует два загрузочных модала, которые поступают из одного источника и один набор файлов javascript (удивительный jquery blueimp fileupload).

  • BS Modal 1 отображается при загрузке страницы (через php) и всегда присутствует на странице. Он используется для добавления новой записи. (CakePHP....думаю, SalesForcey типа вещи)

  • BS Modal 2 используется для редактирования существующих связанных записей, и его содержимое html извлекается из вызова ajax и добавляется к DOM через jQuery.

  • Javascript поддерживает оба модала, включенных через стандартный html <script> теги.

Я заметил, что точки останова срабатывают только на режимное 1. Они не работают, когда код выполняется на динамически добавляемом модальном 2, хотя совершенно очевидно, что код действительно оценивается и выполняется. Всплывающие окна предупреждений, вещи типа codey выполняются и вывод следуют логике, изложенной в коде.

Я не нырял глубже, чтобы исследовать дальше, потому что у меня мало времени, но я хотел потушить его там и отдают обратно в общину.

PS: я использую это все время, но это мой первый пост, так что идти легко на меня :-)

убедитесь, что вы используете тот же хост в URL, что и при настройке сопоставления. Например, если бы Вы были в http://127.0.0.1/my-app при настройке и сопоставлении рабочей области точки останова не будут работать, если вы просматриваете страницу через http://localhost/my-app. Кроме того, Спасибо за чтение этого далеко. Смотрите мой ответ на вопрос хрома здесь.

убедитесь, что вы открыли консоль javascript(или источники) в окне chrome. в противном случае он никогда не достигнет точки останова. вы можете открыть консоль javascript с помощью кнопки выбора в правом верхнем углу-->tools-->JavaScript console.

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

У меня была проблема, когда точки останова Chrome ничего не стреляли. Когда я попытался использовать "отладчик" в своем коде, я мог только пройти через код в версии VM моего кода. Моя проблема заключалась в том, что я неправильно отображал ресурсы. Повторное отображение исправило мою проблему.

убедитесь, что скрипт с оператором "debugger;" в нем не находится в черном ящике Chrome. Вы можете перейти на вкладку источники, чтобы проверить и отключить blackboxing если так.

изменить: добавлен скриншот.

How to turn off blackboxing.

Итак, в дополнение к ответу Адама Ракиса, если у вас есть ошибки в вашем файле javascript выше точки останова, вы не достигнете его независимо от того, отмечаете ли вы его или вставляете debugger;.

вот пример:

if (nonExistentVar === "something") {
  console.log("this won't happen as the above errors out");
}
debugger;
console.log("this won't print either")

Как я испытал с chrome, нам нужно открыть консоль браузера, чтобы запустить отладчик при загрузке страницы.

поместите это где-нибудь в файл javascript, который вы хотите запустить

debugger

откройте консоль браузера и перезагрузить страницу.

отладчик будет работать, как пример изображения ниже

enter image description here

У меня была такая же проблема в 10K линейном файле. Точки останова игнорируются,
жестко закодированные операторы _debugger работали, но они не могут быть переключены и могут раздражать при размещении в цикле. Мое решение, которое является немного хак, но он работает, чтобы добавить следующее в верхней части файла:

let myDebuggerFlag = false;
let myDebugger = function () {
    if (myDebuggerFlag) {
        debugger;
    }
}

затем я добавляю myDebugger (); inline, где я обычно использую точку останова.

для включения отладки я просто ввожу myDebuggerFlag = true; на консоли линия. (вы должны выйти из myDebugger в первую очередь, конечно.

мое решение состояло в том, чтобы очистить локальное хранилище, хранилище сессий и куки на вкладке приложений. После этого Chrome приостановит выполнение скрипта на точках останова, определенных в источниках.

  1. нажмите на вкладку приложения Google Chrome
  2. щелкните правой кнопкой мыши на URL-адрес под каждой папкой > очистить

скриншот: вкладка приложения