Как найти проблему, когда Chrome Developer Tools не показывает ее

Question

Я изучал, как использовать Chrome Developer Tools (CDT) для отладки.

Я пытаюсь добавить некоторые функции в приложение, написанное на HTML / Javascript / jQuery / MySQL.По сути, он загружает таблицу, созданную Ajax, из MySQL с использованием jQuery, а также проверяет cookie на числовой список, представляющий столбцы для включения или выключения toggle ().

При первой загрузке проверяет cookie и покорно загружаетзапрошенные столбцы.Но когда я обновляю таблицу (не перезагружаю страницу), и она снова читает cookie, она на мгновение показывает столбцы, но затем немедленно снова их отключает.

Прогулка по javascript с CDT выводит меня из моего кода ив jQuery v3.3.1 в строке, которая начинается // обратным вызовом, или в строке с номером 9523 несжатой версии.После небольшого скачка он останавливается, и моя страница отображается без дополнительных столбцов.Но в CDT не отображается никаких ошибок, и ничего из того, что он делает, «не выглядит» неправильно для моих глаз.

Я знаю, первое, что многие из вас хотят, это javascript, но это довольно большая программа, поэтому я не знаю,как обеспечить нерабочую, работающую модель, если вы получаете дрейф.Кроме того, я больше заинтересован в том, чтобы научиться использовать CDT для выяснения подобных проблем.Но я не знаю, что делать дальше, я смотрел кучу видео на YouTube, я спросил нескольких друзей, но ничего из этого не помогает.

Теперь кажется, что проблемаэто «мигание» происходит в «полной» части функции обратного вызова @ line 9548 в jQuery-3.3.1.js.Изоляция, комментируя, делает вещи хуже, кажется, ничего не работает.Итак, я вернулся к исходной точке.

На что мне обратить внимание в CDT?

Answer 1

Поскольку вам интересно понять , как использовать CDT для отладки проблем js / html / css в вашей DOM, мой ответ будет сосредоточен на , что , а не на том, что выТочная проблема может или не может быть.Обратите внимание, что проблемы с отображением в DOM не являются ошибками, которые обычно появляются в консоли браузера - идеальный кандидат для отладки CDT.

Одним из невероятно полезных методов в CDT является использование функциональности break on ....Я расскажу вам, как его использовать и как использовать его для диагностики вашей конкретной проблемы.Дополнительную информацию о том, что я собираюсь охватить, можно найти здесь .

1. Щелкните правой кнопкой мыши по элементу на вашей странице, который исчезает, и нажмите Inspect.
2. Инициируйте обновление базы данных, которое приведет к исчезновению таблицы, и при этом следите за деревом DOM , открытым в инструментах разработки.
3. Следите за тем, как DOM изменяется какрезультат действия выше;какие элементы были изменены и как.Вопросы, которые нужно задать: «Был ли элемент скрыт?», «Был ли элемент удален?».Как правило, изменения в дереве DOM будут кратко выделены фиолетовым цветом с помощью CDT при изменении.
4. Если изменение является удалением или добавлением элемента, попробуйте сузить в дереве DOM самый нижний (самый специфический) родительский элемент.непосредственно под которой происходят изменения в вашей DOM.Если это модификация атрибута (например, display: none, visibility: hidden и т. Д.), Найдите элемент, к которому относится это изменение.Возможно, вам придется повторить вышеописанные шаги несколько раз, прежде чем вы сможете точно подобрать изменение.
5. Обновить страницу.
6. Вернувшись в дерево CDT DOM, щелкните правой кнопкой мыши элемент изшаг 4 и: если элемент является родительским, нажмите Break on... > subtree modifications.Если это результирующий элемент изменения атрибута, щелкните этот элемент правой кнопкой мыши и выберите Break on... > attribute modifications.
7. Инициирует обновление базы данных, которое вызывает исчезновение.Если все прошло хорошо, CDT должен поймать вашу точку останова и указать вам текущую функцию javascript, которая инициировала изменение DOM.Вы также должны увидеть стек вызовов, который отображает цепочку вызовов функций, ведущих к текущему вызову функции.
8. Вы не всегда можете встретить очень полезную функцию в результате действий, описанных выше.Вы можете использовать низкоуровневую библиотечную функцию (например, jQuery.js).В этом случае вернитесь к стеку вызовов обратно к последнему написанному пользователем файлу .js и проведите расследование.Это всегда виновник.В противном случае, следуйте инструкциям здесь , чтобы продолжить пошаговое выполнение кода, пока не встретите вероятного виновника.

Надеюсь, эта информация укажет вам верное направление, удачи!

Answer 2

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