Точки зупинки відладчика javascript у Chrome нічого не роблять?


82

Я не можу зрозуміти інструмент налагодження 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;
    });
});

"Джерела" на вашому кроці 2 мають бути "Ресурси"?
Deqing

Мій хром має на панелі наступне: Елементи, Ресурси, Мережа, Джерела, Часова шкала, Профілі, Аудити, Консоль. Однак Ресурси не дозволять мені додавати точку зупинки. Тільки джерела.
погонич

Ви можете спробувати просту сторінку з простим простим javascript, щоб перевірити, чи працює точка зупинки. За цим ви можете зрозуміти, чи це проблема Chrome 21.0.1180.60
Deqing

Я також переглянув багато інструкцій в Інтернеті, і там має бути панель "Сценарій" ... але у мене цього немає?
погонич

Так. У моєму chrome (20.0.1132.43) у ньому є: Елементи, Ресурси, Мережа, Скрипти, Часова шкала, Профіль, Аудити, Консоль. Отже, у Chrome 21 вони змінили "Сценарії" на "Джерела"
Deqing

Відповіді:


162

Я не впевнений, чому ваші точки зупинки не вражають, але одним із надійних способів увійти у ваш код є введення

debugger;

де ви хочете зупинити код, а потім знову запустити, відкривши вікно інструментів розробника chrome.


Тільки одна невеличка річ, про яку слід пам’ятати, не забудьте очистити її після закінчення та видалити рядки налагоджувача. Якщо ви коли-небудь запускали файли JavaScript через компресор YUI, наявність debugger;рядка призведе до помилки.


1
Я вкладаю налагоджувач у функцію jquery, і він все одно не вступає в неї. Будь ласка, подивіться на код, який я завантажив. Це через JQuery?
погонич

1
@chrolli - я не бачу жодного налагоджувача; в коді, але незалежно від цього, він неодмінно повинен працювати з jQuery. Замість налагоджувача; киньте туди попередження лише для того, щоб переконатися, що код взагалі викликається
Адам Ракіс

1
@AdamRackis дякую за цей налагоджувач; порада. Дійсно корисно !! :)
gsaslis

1
Дякую, що це спрацювало і на мене, і після видалення рядка функціональність точок зупинки Chrome повернулася до норми.
Jeroen Rondeel

1
Щоб налагоджувач працював, на вкладці «Мережа» потрібно встановити «Вимкнути кеш», інакше ви будете запускати кешований код. Виберіть це, а потім перезавантажте за допомогою Ctrl F5.
CYoung,

20

Це пізня відповідь, але у мене була та сама проблема, але відповідь була іншою.

У моєму випадку в моєму коді було посилання на sourceURL:

//@ sourceURL=/Scripts/test.js

Коли цей файл Javascript зменшується та завантажується браузером, він зазвичай повідомляє Chrome Dev Tools, де знаходиться немініфікована версія.

Однак, якщо ви налагоджуєте немініфіковану версію, і цей рядок існує, Chrome Dev Tools переходить на цей шлях sourceURL замість "звичайного" шляху.

Наприклад, якщо ви працюєте локально на веб-сервері, то на вкладці Джерела в Chrome Dev Tools шлях до заданого файлу JS буде http://localhost/Scripts/test.js

Якщо test.js має це внизу

//@ sourceURL=/Scripts/test.js

тоді точки зупинку працюватимуть, лише якщо шлях до файлу є /Scripts/test.js, а не повністю кваліфікована URL-адресаhttp://localhost/Scripts/test.js

У Chrome 38, залишаючись на моєму прикладі вище, якщо ви подивитесь на вкладку Джерела, кожен файл запускається http://localhost/, тому, коли ви натискаєте на test.js, Chrome завантажуєтьсяhttp://localhost/Scripts/test.js

Ви можете помістити всі потрібні точки зупинку у цей файл, і Chrome ніколи не потрапляє в жодну з них. Якщо ви встановите точку зупинки у своєму JS, перш ніж він викличе будь-яку функцію в test.js, а потім ввійдете в цю функцію, ви побачите, що Chrome відкриває нову вкладку, шлях до якої є /Scripts/test.js. Введення в цей файл точок зупинення зупинить потік програми.

Коли я позбувся @ sourceURLрядка з файлу JS, все знову працює нормально (тобто так, як ви очікували).


11

Можливо, ця помилка https://code.google.com/p/chromium/issues/detail?id=278361

Це відтворено з моїм Chrome 31.0.1650.57 (Офіційна збірка 235101) на Linux.

Я перезапускаю браузер, щоб це виправити.


2
Проблема з версією 50.0.2661.94 (64-розрядна) на OSX Capitan
Mexx

Щойно зі мною трапилося на Win10 з Chrome 51. Я використовував вікно незакріплених інструментів розробника, я вбив вікно, і цього було досить з мого боку
Кріс Марісіч

10

Я отримав подібну проблему. Точки зупинку, де не працюють, якщо я не використовував debugger;. Я вирішив проблему з точками зупинку за допомогою "Відновити за замовчуванням і перезавантажити". Він знаходиться в Інструментах розробника Chrome, Налаштування, Відновити за замовчуванням та перезавантажити.


1
Це спрацювало для мене. Пс: Мені не потрібно було використовувати "налагоджувач;". Для тих, хто шукає його у версії 58.0.3029.110 або близько того, натисніть 3-крапкові крапки, Налаштування (F1), а внизу кнопка "Відновити за замовчуванням і перезавантажити".
www-0av-Com

5

Переконайтеся, що сценарій з "налагоджувачем;" твердження в ньому не заблоковано Chrome. Ви можете перейти на вкладку Джерела, щоб перевірити та вимкнути чорний бокс, якщо так.

EDIT: Додано знімок екрана.

Як вимкнути чорний бокс.


Де знаходиться ця особливість? Знімок екрана?
oldwizard

Коли я проголосував проти, не було скріншоту функції "Зупинити чорний бокс" Відповідь не допомогла, адже натомість потрібно було почати гуглити функцію «Зупинити чорний бокс». Відповідь покращилася. Видалення голосу проти.
oldwizard

Це те, що я шукав. Дякую чувак за відповідь.
Kishan Patel,

4

Я зустрічався з цим кілька разів, спочатку це добре працює localhost, раптом точки зупинку не працюють, я перемикаюся на 127.0.0.1, потім він працює знову. Надія допомагає.


2

Я зіткнувся з подібними проблемами як у chrome, так і у firefox, хоча це може не вирішити вашу проблему. Ділюсь тут сподіваючись, що це може допомогти іншим. З такою ситуацією я стикався раніше в інших не пов’язаних з цим проектах, але ніколи не розумів, чому, поки вона не з’явилася сьогодні.

Сценарій:

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

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

  • BS Modal 2 використовується для редагування існуючих пов'язаних записів, і його HTML-вміст витягується із виклику ajax і додається до DOM за допомогою jQuery.

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

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

Я не занурився глибше, щоб розслідувати далі, тому що мене чекає час, але хотів викласти його там і повернути громаді.

PS: Я постійно використовую SO, але це мій перший допис, так що будьте легкі зі мною :-)


2

Переконайтеся, що ви використовуєте той самий хост в URL-адресі, що і під час налаштування зіставлення. Наприклад, якщо ви були на http://127.0.0.1/my-appетапі налаштування та відображення робочої області, то точки зупинку не працюватимуть, якщо ви переглядаєте сторінку через http://localhost/my-app. Крім того, дякую, що прочитали це далеко. Дивіться мою відповідь на випуск Chromium тут .


2

переконайтеся, що ви відкрили консоль javascript (або джерела) у своєму вікні chrome. інакше він ніколи не досягне точки розриву. Ви можете відкрити консоль javascript кнопкою опцій у правому верхньому куті -> інструменти -> консоль javascript.


2

У мене виникла проблема, коли точки зупинку Chrome нічого не спрацьовували. Коли я намагався використати "налагоджувач" у своєму коді, я міг лише пройти через код у версії мого коду на ВМ. Моя проблема полягала в тому, що я неправильно картографував ресурси. Повторне відображення вирішило мою проблему.


2

Моїм рішенням було очистити локальне сховище, сховище сеансів та файли cookie на вкладці Програми. Після цього Chrome зупинить виконання сценарію на точках зупинку, визначених у джерелах.

  1. Клацніть на вкладку Програми Google Chrome
  2. Клацніть правою кнопкою миші URL-адресу під кожною папкою> Очистити

Знімок екрана: вкладка Програми


1
Перетягніть вгору консоль і введіть; localStorage.clear () & введіть, а потім sessionStorage.clear () & enter.
Paddymac

2

У мене був мініфікатор, який видаляв debuggerтвердження ¯_ (ツ) _ / ¯


1

Переконайтеся, що ви вводите точку зупинки у правильний вихідний файл. Деякі інструменти створюють кілька копій коду, і ми приміряємо інший вихідний файл.

Рішення: Замість того, щоб відкривати файл за допомогою комбінації клавіш like Ctrl+Pабо Ctrl+R, відкрийте його з Навігатора файлів. На вкладці Джерело є значок для нього вгорі ліворуч. За його допомогою ми можемо відкрити правильний вихідний файл.


0

Отже, на додаток до відповіді Адама Ракіса, якщо у вашому файлі javascript є помилки над точкою зупинки, ви не дійдете до неї незалежно від того, позначаєте це чи вводите debugger;.

Ось приклад:

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

1
@dckuehn, лише якщо ви скажете це. У інструментах розробника є можливість зупинити помилки. Іноді це не практично. Наприклад, я працюю над бібліотечним кодом, який працює на сторонніх веб-сайтах. Якщо я вмикаю це, працюючи над бібліотекою, це призупиняє виконання кожного разу, коли на сайті виникає помилка, пов’язана вона з моєю бібліотекою чи ні. Якщо ви контролюєте, і це ваш сайт, це чудовий варіант. Для деяких типів розвитку це може завадити.
JT.

0

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

помістіть це десь у файл JavaScript, який ви хочете запустити

debugger

відкрити консоль браузера та перезавантажити сторінку.

налагоджувач працюватиме як приклад зображення нижче

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


Яку нову інформацію ви додали у своїй відповіді, а не в одній із вже опублікованих відповідей?
takendarkk

0

Я не впевнений, як це працювало, але натискання клавіші F1 для налаштувань і внизу праворуч, натискання кнопки "Відновити за замовчуванням і перезавантаження" спрацювало для мене.


0

Досить пізня відповідь, але жодне з наведеного не допомогло моїй справі і було чимось іншим

під час посилання на файл javascript type = "text / javascript" відсутній у застарілій програмі, з якою я працював

<script  src="ab.js" ></script>

нижче один спрацював, і точки зупинку вражали, як очікувалося

 <script  src="ab.js" type="text/javascript"></script>

0

Мені потрібні мої прокляті точки зупинки! Дуже дивна поведінка - звичайно червона пляма у джерелах сіріла; ці іdebugger; точки зупинку, як видається, все одно потрапляють, але відображаються десь у якомусь невиконавчому HTML.

Після кількох годин злому коду точки зупинку були нарешті вдарені правильно, проте залишився більш-менш лише еквівалент "Hello World". Ха-ха-ха.

Отже, на сторінці виводилися деякі дані на сервері (у моєму випадку в операторі @razor), але це було б так само в будь-якому подібному випадку.

У виведенні сервера було кілька неправильно сформованих символів 0A / 0D - повертається стара каретка - що викликало плутанину в Chrome із власною нумерацією рядків.

Очищення сервера вводило HTML, і я отримав свою точку зупинки.

А тепер давайте подивимося, скільки з цього коду я можу назад CTRL-Z ...


0

Я додаю ще одну випадкову відповідь лише тому, що це питання з’явилось у відповідь на мої кілька пошуків. У мене є об'єкти jQuery, які мають загальнодоступні та приватні методи. Шаблон:

myObject = (function($){
  function publicFunction() {}
  function privateFunction() {}
  return {
    theOnlyMethod: publicFunction
  }
})(jQuery);

Якщо я поставлю точку зупинки на рядок всередині приватної функції, Chrome не буде її налагоджувати, рядок рухається вниз до оператора return! Тож для налагодження я повинен виставити приватні функції! Це нове для мене сьогодні вранці (20.08.2020, версія 84.0.4147.125 (Офіційна збірка) (64-розрядна версія)), я не можу повірити, що не стикався з цим протягом 3 років.


0

Це може бути помилка Chrome. На жаль, Chrome регулярно порушує налагодження. У нього часто трапляється якийсь витік пам'яті, і він часто ламається або змінюється кожні кілька випусків.

В даний час налагодження із форматованими джерелами надзвичайно ненадійне.

Можливо, ви також намагаєтеся зламати мертвий код.

Щоб бути впевненим, що це не браузер, вам також слід спробувати налагодити його у Firefox.


-1

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

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

потім я додаю myDebugger (); в рядку, де я зазвичай використовую точку зупинки.

щоб увімкнути налагодження, просто введіть myDebuggerFlag = true; на консолі. (Звичайно, спочатку потрібно вийти з myDebugger.

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.