Отладка интерфейса

1. Зачем нужна отладка

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

2. Базовая отладка (на стороне ПК)

Здесь мы берем набор исходников iview-admin для отладки

1. Визуальная отладка

Так называемая отладка невооруженным глазом относится к непосредственному просмотру кода для отладки, что очень неэффективно.

2.console

log(...)

Просмотр журнала, напечатанного console.log(...), в настоящее время должен быть обычным методом отладки для большинства внешних интерфейсов. Но этим методом сложнее очистить шаги и процессы работы программы.

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

Нам нужно выяснить, сколько раз вызывается updateMenulist() и где. Конечно, легко увидеть, сколько раз она была вызвана, просто напечатайте это внутри функции.
```
updateMenulist (state) {
  console.log("我被调用了")
}
```
будет отображаться в консоли браузера

Но мы хотим знать, где она вызывается, тогда и будем думать, а не достаточно ли поискать эту функцию прямо в папке, например

В результате перебора эта функция вызывается в 4-х местах, но в консоли печатается только два раза, далее продолжаем смотреть вниз.
trace(...)

Обзор этого console.trace(): вывод трассировки стека в веб-консоль. Это означает вывод информации о пути от текущего места выполнения к console.trace().Используйте console.trace() для вывода подробного стека вызовов:

3. Отладка точки останова

Если он упакован с помощью веб-пакета, необходимо включить режим карты, иначе точка останова не может сломать конкретный файл.

точка останова браузера

Когда мы вызываем console.log() перед печатью, конкретное расположение файла для печати появится позже.

После нажатия вы перейдете к определенному местоположению этого файла. Затем нажмите на место, указанное стрелкой, чтобы сломать точку.

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

Просмотр стека вызовов

Мы можем ясно видеть, что функция вызывается в первый раз в строке 34 файла main.js.

Затем мы можем нажать F11 или:

Итак, мы снова нажимаем и прыгаем к месту, где функция выполняется во второй раз.
точки останова в коде

Иногда мы не хотим использовать console.log() для печати, а затем найти файл в браузере для установки точек останова, есть другой способ быстро достичь точек останова.

Используйте ключ отладчика

Используйте ключевое слово отладчика непосредственно в коде, чтобы быстро реализовать точки останова.

Эффект аналогичен эффекту точки останова в браузере.

4. отладка vscode

Друзья, которые используют vscode, могут легко отлаживать vscode.

Настройте файл запуска.json

Настройте папку .vscode в корневом каталоге проекта. В разделе есть файл launch.json

содержание документа
```
{
    // 使用 IntelliSense 了解相关属性。 
    // 悬停以查看现有属性的描述。
    // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "启动程序",
            "program": "${workspaceFolder}/HT/javascript/test.js"
        }
    ]
}
```
Нажмите F5 или:

Читать об отладке vscodego.Microsoft.com/Fang Wenlinka/?Lin…Как правило, фоновая разработка сервера больше отлаживается с помощью vscode.

5. Отладка плагина Chrome

Сначала загрузите плагин vscode

Затем нажмите кнопку отладки

Найдите свой проект и добавьте конфигурацию

Если у меня MyApp, нажмите «Добавить».

Затем я перейду к файлу

Измените URL-адрес на адрес отладки среды разработки вашего проекта, Тогда общая конфигурация команды запуска проекта драйвера — npm run dev, а конкретную команду запуска можно просмотреть в файле package.json отдельно.

После завершения запуска нажмите F5, чтобы начать отладку chorme, чтобы вы могли сломать точку останова в vscode для отладки.

6.vue devTools

Браузеры Vue devTools, использующие ядро chrome, могут загрузить расширение Vue devTools для отладки одностраничных приложений Vue, что делает отладку проектов Vue очень полезной.

адрес установки

Например, я написал vue-страницу управления фоном. После запуска проекта.

Затем нажмите F12, чтобы открыть инструменты разработчика, и найдите параметр vue на нашей панели инструментов. Таким образом, мы можем ясно видеть наши компоненты vue.

2. Отладка DOM

1. Точки останова прослушивателя событий

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

пример:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
    <div id="cli">测试点击</div>
</body>

<script>
  var cli = document.querySelector("#cli");
  cli.addEventListener("click", function(){
    console.log("点击了")
  })

</script>

</html>

Откройте файл в браузере и нажмите f12, чтобы найти вкладку источников, например, я хочу прослушать событие щелчка. Выберите мышь, чтобы отметить щелчок.

Затем мы тестируем событие клика. Можно обнаружить, что событие было перехвачено.

2.Dom breakpoints

модификации поддеревьев: точки останова возникают при изменении поддеревьев
модификации атрибутов: активировать точку останова при изменении атрибута
удаление узла: точка останова возникает при удалении элемента

Здесь я привожу пример удаления узла

Когда мы нажимаем тестовый клик, DOM будет удален. Таким образом, точки останова реализованы в удаленном коде.

3. Отладка Ajax-запросов

1.XHR Breakpoints

Примечание. Это резюме взято из чужой статьи.

За последние годы разработка интерфейса пользователя претерпела колоссальные изменения: от первоначальной неизвестности до нынешнего бума Ajax управляет многофункциональными веб-приложениями, а мобильные одностраничные веб-приложения переживают бум. Все это неотделимо от объекта XMLHttpRequest, а «XHR Breakpoints» — это функция отладки точек останова, предназначенная для асинхронного выполнения.

Мы можем добавить условие точки останова к асинхронной точке останова с помощью знака «+» в правой части «Точки останова XHR». Когда URL-адрес при запуске асинхронного запроса удовлетворяет этому условию, логика JS автоматически сгенерирует точку останова. Расположение точки останова в демо-анимации не показано, потому что в демо используется ajax-метод, инкапсулированный jQuery, код был сжат, и никакого эффекта не видно, но на самом деле расположение точки останова XHR — «xhr.send( )" утверждение.

Сила точек останова XHR заключается в том, что правила точек останова можно настраивать, что означает, что мы можем устанавливать точки останова для определенного пакета, одного или даже всех асинхронных запросов, что очень удобно. Однако кажется, что эта функция мало используется в повседневной разработке, по крайней мере, я не использую ее часто. Вероятно, есть две причины задуматься об этом: во-первых, этот тип требований к отладке точек останова не слишком важен для повседневной работы; во-вторых, большая часть фронтенд-разработки на данном этапе основана на JS-фреймворке, а самый простой jQuery имеет также использовался для Ajax. Для хорошей инкапсуляции очень немногие люди инкапсулируют метод Ajax самостоятельно. Чтобы уменьшить размер кода, проект обычно выбирает сжатую кодовую базу, что делает отслеживание точек останова XHR относительно сложным.

4. Производительность средств отладки производительности

Используйте панель производительности Chrome DevTools для записи и анализа всех действий на странице во время выполнения.

Три пунктирные линии, обведенные на графике пламени, обозначают:

Синяя линия представляет событие DOMContentLoaded.
Зеленая линия показывает, когда она была впервые нарисована.
Красная линия представляет событие загрузки.