ПРЕДИСЛОВИЕ: Код отладки необходим для любого программиста. Независимо от того, являетесь ли вы мастером или новичками, программы отладки являются незаменимой задачей. Вообще говоря, программы отладки выполняются после написания кода или при изменении ошибок во время тестирования. Часто лучше отражать уровень программиста и точность анализа проблем во время отладки кода. Многие новички всегда не знают о проблеме при поиске причины ошибки, тратя много времени, но не в состоянии решить некоторые ошибки, которые в конечном итоге оказались довольно простыми. Овладение различными навыками отладки определенно достигнет вдвое больше, чем половина усилий в работе. Например, быстро определяйте проблемы, уменьшите вероятность неудачи, помогает анализировать логические ошибки и т. Д. В сегодняшнем сегодняшнем дне, когда передовое развитие Интернета становится все более и более важным, особенно важно снизить затраты на разработку, повысить эффективность работы и мастер-навыки развития и навыки отладки в развитии фронта.
В этой статье будут объяснены различные методы отладки JS-отладки JS один за другим. Может быть, вы освоили их, так что давайте рассмотрим их вместе. Может быть, есть методы, которые вы раньше не видели. Вы могли бы также изучить их вместе. Может, вы не знаете, как отладить. Воспользуйтесь этой возможностью, чтобы заполнить пробел.
1. Блюд, аромат отладка мастера
Это было, когда интернет только начинал, и передняя часть веб-страницы была в основном о дисплее контента, а сценарии браузера могли предоставить только очень простые вспомогательные функции для страницы. В то время веб -страницы в основном работали в браузерах, где доминировали IE6, а функция отладки JS все еще была очень слабой, поэтому их можно было отладить только с помощью метода оповещения, встроенного в окно -объект. В то время это должно было выглядеть так:
Следует отметить, что эффект, наблюдаемый здесь, является не тем, что тогда наблюдается в браузере IE, а эффект в более высокой версии IE. Кроме того, тогда, казалось, не было такой усовершенствованной консоли, и использование оповещения также было в реальной странице JS -коде. Несмотря на то, что метод оповещения отладки очень примитивен, он имел свою неизгладимую ценность в то время, и даже сегодня у него есть место для использования.
2. Новое поколение отладчительной консоли King
Поскольку JS может делать все больше и больше вещей на веб-фронте, ответственность становится все больше и больше, а статус становится все более и более важным. Традиционный метод отладки оповещения постепенно не смог соответствовать различным сценариям фронтального развития. Более того, информация отладки, появляющаяся с помощью метода отладки оповещения, на самом деле не красива и заблокирует некоторый контент страницы, который действительно не дружелюбен.
С другой стороны, информация отладки оповещения должна быть добавлена в логику программы, такую как «оповещение (xxxxx)», чтобы работать нормально, и оповещение будет препятствовать продолжению рендеринга страницы. Это означает, что после завершения отладки разработчика он должен вручную прояснить эти коды отладки, что действительно трудно.
Таким образом, новое поколение браузеров Firefox, Chrome и IE последовательно запустили консоли отладки JS, поддерживая использование формы, аналогичной «console.log (xxxx)» для печати информации отладки на консоли, не влияя на дисплей страницы. Примите IE в качестве примера, похоже, это так:
ОК, прощай, с уродливой всплывающей коробкой. Восходящая звезда, возглавляемая Chrome, расширила более богатые функции до консоли:
Как вы думаете, это удовлетворяет? Воображение команды по развитию Chrome действительно восхитительно:
Хорошо, я сказал немного больше не по теме. Короче говоря, появление встроенных объектов консоли на консоли и браузере принесла большую удобство для фронтальной разработки и отладки.
Некоторые люди могут спросить, необходимо ли очистить этот код отладки после завершения отладки?
Что касается этой проблемы, если у вас есть усовершенствованная проверка существования перед использованием объекта консоли, это не нанесет ущерба бизнес -логике без удаления. Конечно, для того, чтобы обеспечить аккуратный код после завершения отладки, эти коды отладки, которые не связаны с бизнес -логикой, должны быть удалены как можно больше.
3. отладка JS Breakpoint
Breakpoint, одна из функций отладчика, позволяет прерываниям программы перерывать там, где это необходимо, тем самым облегчая его анализ. Вы также можете установить точки останова в одной отладке. В следующий раз вам нужно только позволить программе автоматически работать в позицию точки перерыва, и вы можете прервать ее в последнем положении точки перерыва, что значительно облегчает работу и экономит время. -Энциклопедия-Байду
Отладка JS Breakpoint означает добавление точек останова к коду JS в инструментах разработчика браузеров, что позволяет выполнять JS останавливаться в определенном месте, что облегчает разработчикам анализировать и логическую обработку сегментов кода. Чтобы наблюдать за эффектом отладки точки останова, мы заранее подготовим кусок кода JS:
Код очень прост, он должен определить функцию, пропустить два числа, добавить грязное случайное целое число, а затем вернуть сумму двух чисел. В качестве примера, принимая инструменты разработчика Chrome, давайте посмотрим на основные методы отладки JS Breakpoint.
3.1. Источники точки останова
Прежде всего, в тестовом коде мы видим, что код должен нормально работать через результаты выходных консоли на рисунке выше, но почему это должно быть? Поскольку случайное число добавляется в функцию, действительно ли конечный результат действительно правильным? Это бессмысленное предположение, но предположим, что я собираюсь проверить сейчас: два числа, передаваемые в функции, добавленное случайное число и окончательная сумма. Так как работать?
Метод 1, наиболее распространенный выше, будь то использование оповещения или консоли, мы можем проверить его таким образом:
На приведенном выше рисунке мы добавили три строки консольного кода в код для печати переменных данных, о которых мы заботимся. В конце концов, мы можем четко проверить, является ли весь процесс расчета нормальным, а затем удовлетворить требования к проверке, установленные нашим вопросом.
Метод 2 и метод 1 имеют очевидные недостатки в процессе проверки, что состоит в том, что добавляется много избыточного кода. Далее, давайте посмотрим, является ли использование точек останова для проверки удобнее. Во -первых, посмотрите, как добавить точки останова и какой эффект после точки останова:
Как показано на рисунке, процесс добавления точек останова в кусок кода состоит в том, чтобы «F12 (Ctrl + Shift + i) открыть инструменты разработки» - «Меню нажмите источники» - «Найдите соответствующий файл в левом дереве» - «Нажмите на столбец строки», чтобы завершить добавление/удаление точек останова в текущей строке. Когда точка останова добавлена, обновить выполнение Page JS останавливается в положении точки останова. В интерфейсе источников вы увидите все переменные и значения в текущей области. Просто проверьте каждое значение, чтобы выполнить наши требования к проверке.
Проблема здесь. Если вы осторожны, вы обнаружите, что когда мой код достигнет точки останова, были добавлены значения переменных A и B. Мы не можем видеть начальные 10 и 20 пройденных при вызове функции суммы. Так что мне делать? Это требует, чтобы вы вернулись и изучили некоторые базовые знания о отладке Breakpoint. После открытия панели источников мы на самом деле увидим следующее контент в интерфейсе. Мы следуем по пути мыши, чтобы увидеть, что это значит:
Слева направо функции, представленные каждым значком:
PAUSE/RESUME SCRIPT выполнение: PAUSE/RESUME SCRIPT выполнение сценария (выполнение программы прекращается в следующей точке останова).
Зайдите на следующий вызов функции: Выберите вызов функции на следующий шаг (перейдите к следующей строке).
Зайдите в следующий вызов функции: введите текущую функцию.
Выйдите из текущей функции: вырваться из текущей функции выполнения.
Деактивные/активные точки останова: выключить/на всех точках останова (не отменены).
Пауза на исключениях: автоматическая настройка точки останова для исключений.
На этом этапе функциональные ключи для отладки точки останова были введены почти. Затем мы можем посмотреть на нашу строку кода программы, чтобы увидеть изменения в каждой переменной после выполнения каждой строки, как показано на рисунке ниже:
Как упомянуто выше, мы можем увидеть весь процесс переменных A и B из начального значения, до добавления случайного значения в середине, а затем, наконец, вычислять сумму и вывести окончательный результат. Нет проблемы выполнить требования к проверке настройки вопроса.
Для оставшихся функциональных клавиш мы немного изменили наш тестовый код и используем диаграмму GIF, чтобы продемонстрировать их использование:
Здесь следует отметить, что функция значений переменных печати непосредственно в области кода - это новая функция, добавленная в более новой версии Chrome. Если вы все еще используете более старую версию Chrome, вы не сможете просматривать информацию переменной непосредственно под точками останова. В настоящее время вы можете переместить мышь к имени переменной и паузу в течение короткого времени, и будет появляться переменное значение. Вы также можете выбрать имя переменной с помощью мыши и щелкнуть правой кнопкой мыши «Добавить в« Смотреть », чтобы просмотреть его на панели часов. Этот метод также относится к выражениям. Кроме того, вы также можете переключиться на консольную панель в точках останова, ввести имя переменной непосредственно в консоли и ввести информацию переменной. Эта часть относительно проста, учитывая длину статьи, а не делает картинки и демонстрации.
3.2. Отладчик точка останова
Так называемая точка отладчика на самом деле назван мной, и я не знаю, как сказать профессиональные условия. В частности, добавив «отладчик»; Оператор в код, он автоматически нарушает точки, когда код выполняет оператор. Следующая операция почти точно такая же, как добавление отладки точки останова на панели источников. Единственное отличие состоит в том, что утверждение должно быть удалено после отладки.
Поскольку тот же способ установления точек останова отличается, функция такая же, как добавление точек останова к панели источников, почему этот метод все еще существует? Я думаю, что причина должна быть следующая: мы иногда сталкиваемся с асинхронной загрузкой фрагментов HTML (включая встроенный код JS) в разработке, и эта часть кода JS не может быть найдена у источников деревьев, поэтому мы не можем напрямую добавить точки останова в инструменте разработки. Тогда, если мы хотим добавить точки останова к асинхронно загруженному сценарию «Debugger»; Будет работать в это время. Давайте напрямую увидим его эффект через GIF -диаграмму:
4. DOM Breakpoint Debugging
Dom Breakpoint, как следует из названия, состоит в том, чтобы добавить точки останова к элементу DOM для достижения цели отладки. Эффект использования точек останова в фактическом использовании в конечном итоге реализуется в логике JS. Давайте посмотрим на конкретные эффекты каждой точки останова DOM по очереди.
4.1. Переломайте модификации поддерева, когда дочерние узлы внутри узла изменяются (сломайте модификации поддерева)
Сегодня, когда фронтальная разработка становится все более и более сложной, код JS Front-End становится все более и более сложным, а, казалось бы, простая веб-страница, как правило, сопровождается большими сегментами кода JS, что связано с множеством операций добавления, удаления и изменения узлов DOM. Неизбежно, что трудно найти сегменты кода непосредственно через код JS, но мы можем быстро найти соответствующие узлы DOM через панель элементов инструмента разработчика. В настоящее время особенно важно найти сценарии через DOM -точки останова. Давайте посмотрим на демонстрацию GIF:
Приведенный выше рисунок демонстрирует влияние добавления, удаления и обмена операциями заказа, запускающих точки останова для детских узлов UL (LI). Но следует отметить, что модификация атрибутов и содержимого дочерних узлов не вызовет точки останова.
4.2. Разбить модификации атрибутов
С другой стороны, по мере того, как бизнес-логика обработки фронт-эндов становится все более сложной, зависимость хранения от некоторых данных становится более сильной и сильнее. Хранение временных данных в (пользовательских) свойствах узла DOM является предпочтительным методом для разработчиков во многих случаях. Особенно после того, как стандарт HTML5 усиливает пользовательскую поддержку атрибутов (например: DataSet, Data-*и т. Д.), Применяются все больше и больше настроек атрибутов, поэтому инструменты разработчика Chrome также обеспечивают поддержку перерыва атрибутов, а эффекты примерно следующие:
Этот метод также необходимо отметить, что любая операция на свойствах детского узла не будет запускать точку останова самого узла.
4.3. Разорвать удаление узла
Эта настройка точки останова DOM очень проста, и метод запуска очень ясен - когда узел удален. Таким образом, обычно дело должно быть при выполнении оператора «parentnode.removechild (ChildNode)». Этот метод не используется много.
То, что мы представили ранее, - это в основном методы отладки, которые мы часто используем в повседневном развитии. Они могут справиться почти со всеми проблемами в нашем повседневном развитии при правильном использовании. Тем не менее, инструменты разработчика также учитывают больше ситуаций и предоставляют больше способов прорыва, как показано на рисунке:
5. XHR -точки
В последние годы разработка фронта претерпела изменения в ухудшении Земли, от его неизвестной репутации до ее текущего процветания, Ajax управляет богатыми веб-приложениями, а мобильные приложения для одностраничных веб-приложений процветают. Все это неотделимо от объекта Xmlhttprequest, а «xhr -точки» - это функция отладки отладки перерыва, предназначенная для асинхронных целей.
Мы можем добавить условие перерыва в асинхронную точку останова через знак «+» справа от «точек останова XHR». Когда URL, когда асинхронный запрос запускается, логика JS автоматически генерирует точку останова. Положение точки останова не продемонстрирована в демонстрационной анимации, потому что демонстрация использует метод AJAX, инкапсулированный JQUERY. Код был сжат, и нет никакого эффекта. Фактически, точка останова XHR генерируется оператором «xhr.send ()».
Мощность точек перерыва XHR заключается в том, что мы можем настроить правила точек останова, что означает, что мы можем установить точки останова для определенной партии, определенной и даже всех асинхронных запросов, которые очень мощные. Тем не менее, кажется, что эта функция не используется в повседневном развитии, по крайней мере, я не использую ее много. Подумайте об этом, есть примерно две причины: во -первых, этот тип требований отладки отладки перерыва не участвует в повседневном бизнесе; Во-вторых, большая часть фронтальной разработки на этом этапе основана на структуре JS, а самый базовый JQuery также хорошо инкапсулирован Ajax. Немногие люди сами инкапсулируют методы Ajax. Чтобы уменьшить размер кода, проект обычно выбирает сжатые кодовые базы, что делает отслеживание точки Breakpoint XHR относительно простым.
6. Слушатель событий.
Слушатель событий Breakpoint, то есть настройка точки останова выполняется в соответствии с именем события. Когда событие запускается, точка останова находится на месте, где связано событие. Список точек прослушивателя событий и события сценария, в том числе: мышь, клавиатура, анимация, таймер, XHR и т. Д. Это значительно уменьшает сложность отладки бизнес -логики в событиях.
Демонстрационный пример демонстрирует эффект точки останова при запуске события Click и при установке SetTimeout. В примере показано, что после выбора точки перерыва Click Event, точка останова запускается при нажатии обе кнопки, и когда установлен Settimeout, запускается точка останова «установленное таймер».
Отладка является очень важной частью разработки проекта. Это может не только помочь нам быстро найти проблемы, но и сэкономить время на разработку. Опытные в различных методах отладки определенно принесут много преимуществ для вашей карьеры. Тем не менее, с таким большим количеством методов отладки, как выбрать подходящий для вашего текущего сценария приложения, требуется опыт и постоянные попытки накапливаться.
Написав это, можно в основном сказать, что он вышел в полном разгаре. Я надеюсь, что это может привлечь ваше внимание, и я надеюсь, что это может почувствовать себя немного тронутым и почувствовать себя немного знакомым. Самое главное, что я надеюсь, что вы сможете быстро улучшить свои навыки и стать опытным человеком!