Рекомендации по фронтенд-разработке и отладке

внешний интерфейс Debug JavaScript
Рекомендации по фронтенд-разработке и отладке

1. Предпосылки

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

Схема статьи:

Саму отладку можно разделить на два процесса:проблема позиционированияа такжеРешать проблему. И, что более важно, очевидно, как быстро локализовать проблему. В этой статье речь пойдет о том, какБыстрое открытиеа такжеПроблемы отладкиЧто же касается решения проблемы, то это вопрос самого развития, который нельзя обобщать.

2. Метод отладки

2.1 Использование Chrome DevTools

DevTools Chrome — наиболее часто используемый инструмент отладки.Elements,Consoleа такжеSourceИспользование трех панелей.

2.1.1 Elements

Панель «Элементы» будет отображать состояние DOM и CSS текущей веб-страницы, и вы можете изменить DOM и CSS на странице, чтобы сразу увидеть результаты, избавляя от необходимости изменять, сохранять и просматривать результаты в редакторе.

Элементы можно в основном разделить на две подпанели: структура DOM и содержимое элемента (элемента).Следующее в основном представляет элементы DOM.

$n

Когда панель «Элементы» открыта, всегда есть== $0

image-20220116212438893

После выбора элемента перейдите на панель консоли и введите$0, вы обнаружите, что элемент, который вы только что выбрали, появляется в консоли. Если вы щелкните еще несколько элементов, вы также можете использовать$1,$2,$3,$4(пока), чтобы получить элементы, выбранные в предыдущие несколько раз.

Кроме того, щелкните правой кнопкой мыши элемент в консоли и выберитеReveal in Elements PanelВы можете перейти к позиции элемента на панели «Элементы», щелкнуть правой кнопкой мыши элемент на панели «Элементы», чтобыScroll to viewМожно свернуть поле зрения туда, где виден элемент.

Если вы хотите манипулировать элементами с помощью JavaScript на панели консоли,$0Это очень удобно, а также может сочетаться сconsole.dir($0)Чтобы наблюдать различные атрибуты элемента, если вы вводите его непосредственно в Консоли$0илиconsole.log($0)Будет отображаться только сам элемент.

image-20220116212412476

inspect

Иногда некоторые узлы dom глубоко вложены друг в друга, что затрудняет поиск соответствующего узла с помощью html-кода панели «Элемент».inspect(dom元素)Это позволяет нам быстро перейти к html-коду соответствующего узла dom.
например: ввод в консолиinspect($('#app')), после нажатия Enter вы можете перейти к HTML-коду узла #app, чтобы просмотреть элемент

2.1.2 Console

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

консольный объект

Когда дело доходит до отладки во внешнем интерфейсе, наиболее часто используемым должен бытьconsole.logметод, а консоль — это объект с удобными методами.

console.table()Может использоваться для печати obj/arr в таблицу

image-20220104154752095

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

image-20220104155335803

console.countнапечатает, что метка выполнялась несколько раз, по умолчаниюdefault, который можно использовать для быстрого счета.

console.countResetа такжеcountСовместная генерация, используемая для сброса, может быть использована для расчета количества триггеров одного действия.

console.group() / console.groupEnd();

Для того, чтобы увидеть свой лог как на ладони в мешанине сообщений, обычно это делается

console.log("----start-----");
console.log(object);
console.log("---end---");

несмотря на то что---Это очевидно, но на самом деле есть лучший способ сделать это с помощьюconsole.groupВы можете настроить метки группы сообщений или вложить их в несколько слоев, а также использоватьconsole.groupEndчтобы закрыть группу

console.log("iteration");
for (var firstLevel = 0; firstLevel < 2; firstLevel++) {
  console.group("First level: ", firstLevel);
  for (var secondLevel = 0; secondLevel < 2; secondLevel++) {
    console.group("Second level: ", secondLevel);
    for (var thirdLevel = 0; thirdLevel < 2; thirdLevel++) {
      console.log("This is third level number: ", thirdLevel);
    }
    console.groupEnd();
  }
  console.groupEnd();
}
Метод $$(выбрать)

$(select)Вы получаете NodeList (псевдомассив) и$$(select)Что мы получаем, так это чистый массив, который нам удобен для отладки API на консоли, который можно использовать только при печати под devtools

image-20220104155823831

2.1.3 Source

Sourcesпанель для просмотра исходных файлов на страницах браузера (html/js/img/cssд.), нажмите внизу панели{}Фигурные скобки могут преобразовывать код в читаемый формат, при этом даваяjsДобавьте точку останова в файл.SourcesвнизSnippetsФрагменты файлов можно добавлять, запускать в браузере

Breakpoints

инструкция отладчика

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

chrome devtool breakpoint Вот некоторые часто используемые методы останова

  • Обычная точка останова: щелкните в левой части строки, которую вы хотите разбить, чтобы добавить точку останова, и она прервется, когда вы запустите ее.

    image-20220104161116371

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

image-20220104161315275

  • Точка останова DOM: щелкните правой кнопкой мыши соответствующий элемент на панели Elements в Chrome Devtools, выберите break on, вы можете добавить точку останова DOM, то есть она будет прерываться при изменении поддерева, изменении атрибута и удалении узла. жить. Может использоваться для отладки кода, вызывающего изменения dom.

image-20220104161458483

  • Точка останова прослушивателей событий: найдите узел dom, который вы хотите устранить, на панели «Элементы» Chrome Devtools.Справа на панели прослушивателей событий будет текущий узел, который можно отладить в точке останова текущего узла.

    image-20220104161916972

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

  • Точки останова прослушивателя событий: вы также можете добавить точки останова прослушивателя событий на панели «Источники» Chrome Devtools, чтобы указать точку останова при возникновении события, которую можно использовать для отладки кода, связанного с событием. Например, события перетаскивания, точки останова медиа-событий.

image-20220104162550101
  • Функция доступна в панели консолиdebugЭквивалентно вставке в первую строку функцииdebugger:
function a() {
  console.log(1);
}
// 在Console中输入
debug(a);
a();

// 相当于
function a() {
  debugger;
  console.log(1);
}
// 使用 undebug 解除
BlackBox

«Сценарий BlackBox» может игнорировать определенные сценарии (где BlackBox — это глагол) во время отладки, скрывать сценарий в стеке вызовов и выполнять любые функции в сценарии без пошагового выполнения. Если вы подтвердите, что в сторонней библиотеке нет багов, вы можете зачернить весь js-скрипт сторонней библиотеки и пропустить выполнение этих кодов при отладке.

Три способа добавить BlackBox:

  1. Щелкните правой кнопкой мыши на панели исходного кода и выберите «Сценарий BlackBox».
  2. Щелкните правой кнопкой мыши кадр в стеке вызовов и выберите «Сценарий BlackBox».
  3. Добавлено в панель Blackboxing в настройкахрегулярное выражениесоответствоватьимя файла
Workspace
в хромеОтладка с локальной исходной картой

Шаг 1: Откройте файловую систему, добавьте папку в рабочую область и добавьте в нее каталог, содержащий sourceMap.

image-20220104171549241

Шаг 2: Откройте указанный запутанный код

image-20220104171821907

Шаг 3: Щелкните правой кнопкой мыши -> выберите [Добавить исходную карту].

Шаг 4: Скопируйте адрес sourceMap в Filesystem.

Изменить код и выполнить отладку в хроме

Chrome devTools предоставляет возможность локального переопределения. Во-первых, откройте панель переопределения под источниками;

Затем нажмите [выберите папку для переопределения], чтобы выбрать измененный адрес хранилища файлов;

image-20220104172628695

Затем нажмите «Авторизовать» вверху, чтобы подтвердить соглашение;

Наконец, найдите файл записи, затем щелкните правой кнопкой мыши, чтобы выбратьSave for overrides(должен быть оригинал, форматированная версия не подойдет),

image-20220104173000023

Затем найдите сохраненный файл и измените его.После обновления страницы измененный код может быть выполнен.

2.2 Отладка узлов

Отладка Nodejs с помощью Chrome DevTools --inspect-brk

Ниже приведен пример отладки исходного кода веб-пакета:

node --inspect --inspect-brk node_modules/webpack/bin/webpack.js --env.production --config webpack-common.js

Выполнить соответствующий в корзинефайл запускаwebpack.js открывает страницу инструментов разработчика Chrome, если вы видите узелзеленый значок, нажмите, чтобы войти в режим отладки.

img

2.3 Отладка VConsole и eruda на мобильном терминале

Whistle работает с VConsole или eruda, чтобы включить режим отладки в любой среде и настроить соответствующее доменное имя в правилах в свистке для отладки.В качестве примера возьмем доменное имя m.zhuanzhuan.com.

m.zhuanzhuan.com jsAppend://{eruda.js} jsAppend://{erudaInit.js}

Скачайте eruda.js, настройте eruda.js и erudaInit.js в значениях

image-20220104164430460

image-20220104164328168

Это позволит отлаживать режим eruda на мобильной стороне.

2.4 Отладка WeChat WebView

Веб-страница отладки Wechat, обычно вы можете использоватьИнструменты разработчика WeChatДля отладки веб-страниц и WeChat на компьютере. Когда эта ситуация не может быть удовлетворена и вам необходимо устранить проблему на реальной машине, вам необходимо использовать программное обеспечение, разработанное Tencent x5.TBS Studioдля отладки. это по существуchrome://inspectЭтот метод аналогичен, за исключением того, что он обеспечивает режим отладки для онлайн-пакетов WeChat и упрощает операцию. Для конкретного использования, пожалуйста, обратитесь к официальной документации:Маленький 5.Tencent.com/не могу говорить/дорогой/…

2.5 Отладка реальной машины Android Chrome

Рекомендуется, если вам нужно отладить версию телефона Android >= 4.4.chrome://inspectОн может принести собственные инструменты разработчика в WebView, которые могут легко отлаживать код с помощью точек останова. Этот метод должен соответствовать следующим трем условиям для использования:

  1. Android 4.4+

  2. Включите параметр Разрешить устройствам, подключенным через USB, выполнять отладку на вашем телефоне.

  3. Клиент включает режим отладки WebView

//开启 webview 的 debug 模式
webview.setWebContentsDebuggingEnabled(true);

После выполнения вышеуказанных требований посетитеchrome://inspect, на странице будет отображаться список WebView, для которых на вашем устройстве включена отладка. Чтобы начать отладку, нажмите «Проверить» под WebView, который вы хотите отладить. Используйте инструменты разработчика так же, как и удаленную вкладку браузера.

2.6 Отладка реальной машины iOS Safari

Если на вашем телефоне установлена ​​DEBUG-версия приложения, для отладки рекомендуется использовать Safari, который может принести собственные инструменты разработчика в WebView, которые могут легко отлаживать код с точками останова. Этот метод должен соответствовать следующим трем условиям для использования:

  1. Mac: Safari -> Настройки -> Дополнительно -> Показывать меню «Разработка» в строке меню.
  2. iOS: «Настройки» -> «Safari» -> «Дополнительно» -> «Веб-инспектор» включен.
  3. Самое главное, что приложение должно включать режим DEBUG.

Поскольку в iOS есть механизм проверки подписи, отладка Safari не разрешена для официальных пакетов на реальных устройствах, поэтому пакеты, установленные на реальных устройствах, должны быть пакетами с тестовой подписью. Нам нужно связаться с клиентом, чтобы записать идентификатор нашего устройства iOS в список доверенных устройств, а затем использовать iTunes для установки тестового пакета, предоставленного клиентом. Когда вышеуказанные требования соблюдены, вы можете увидеть свое собственное устройство и веб-страницу в WebView в Safari -> Разработка.После нажатия вы можете открыть Инспектор соответствующей страницы, который можно использовать для отладки точки останова.

2.7 Отладка Вайнре

Если системная версия или режим отладки не включены и описанный выше метод недоступен, вы можете рассмотреть возможность использованияweinre. Weinre отправляет все поведение страницы в сервис, вставляя скрипт на страницу. Сначала нам нужно установить и запустить службу:

npm install -g weinre
weinre --httpPort 8000

доступhttp://localhost:8000Следуйте инструкциям на странице, чтобы вставить сценарий отладки на страницу. После посещения страницы вы обнаружите, что соответствующая запись запроса появляется на странице winere.Щелкните запись, чтобы перейти на следующую страницу. Вы можете видеть, что это веб-инструмент разработчика, который может легко просматривать сетевые запросы, выполнять код на консоли и изменять стили.

3. Обзор методов отладки

Способ преимущество недостаток Рекомендуемая сцена
Прокси мобильной сети + локальный прокси свистка 1. Удобная среда разработки 1. Не удается отладить точку останова 1. Рекомендуемая среда разработки
внедрение внешнего инструмента свистка (vConsole.js или Eruda.js) 1. Удобство 2. Не удается отладить точку останова 1. Рекомендуется любая отладка среды
Отладка реальной машины Android 1. Максимально приближен к реальной среде, можно отлаживать с точками останова 1. Условия суровые и хлопотные;
2. Только Android;
3. Недостаточно удобно		 1. Это гарантийный метод, когда проблема не может быть найдена.
Отладка реальной машины iOS Safari 1. Максимально приближен к реальной среде, можно отлаживать с точками останова 1. Условия суровые и хлопотные;
2. только iOS;
3. Недостаточно удобно		 1. Это гарантийный метод, когда проблема не может быть найдена.
Отладка инструментов разработчика WeChat 1. Отладка точки останова может быть так же удобна, как ПК 1. Только WeChat;
2. Заранее добавить свой аккаунт в аккаунт разработчика		 1. Любой сценарий, в котором необходимо использовать WeChat
weinre(web inspector remote) 1. В свистке есть наследование, что удобнее;
2. удобно отлаживать стиль, просто выберите его		 1. Не удается отладить точку останова 1. Любой сценарий, требующий стилей отладки

В-четвертых, общие шаги отладки

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

4.1 Проверить консоль на наличие ошибок

Может быстро определить, почему страница не соответствует ожиданиям

  • какая ошибка
  • Должна ли текущая страница запрашивать данные

4.2 Что за ошибка

  • Ошибка безопасности: согласование с серверной частью для решения
  • SyntaxError/ReferenceError/TypeError: Стадия компиляции вообще не отпускает слишком низкоуровневые ошибки записи.Можно считать, что такие ошибки все неправильно написаны.Вообще найти и найти стек ошибок несложно.
  • Ошибки, вызванные тем, что данные не соответствуют ожидаемым (TypeError и т. д.): получен доступ к несуществующему свойству.undefined/null/NaNПосле того, как значение становится равным, выбрасываются последующие исключения. Начнем с изучения данных.

4.3 Должна ли текущая страница запрашивать данные

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

4.4 Успешно ли отправлен сетевой запрос

Проверьте панель Сеть/Сеть инструментов разработчика, чтобы убедиться, что интерфейс, которому необходимо получить данные, успешно получает данные.

Есть две причины отсутствия данных: одна — передняя часть, а другая — задняя часть. В основном об этом судят по тому, является ли контент, отправленный запросом, законным или нет, и соответствует ли контент, возвращаемый интерфейсом, ожиданиям.

Ключевые моменты, на которые стоит обратить внимание:

  • Является ли метод правильным
  • URL правильный
  • перекрестный домен
  • Запрошенный Content-Type соответствует
  • Соответствует ли формат тела запроса требованиям (JSON/Form)
  • Несет ли он идентификационную информацию?

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

  • 500 и другие неожиданные исключения: 500, вероятно, проблема с серверной частью
  • 404 неверный URL-адрес
  • Проблема с разрешением: проверьте идентификационную информацию, содержащуюся в сообщении запроса.

4.5 Найдите, где должен выполняться код (вероятно)

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

Проверьте статус выполнения кода:

  • Проверьте код в ожидаемом порядке выполнения
  • Убедитесь, что для рендеринга требуются те же данные, что и ожидались.

4.6 Проверьте код в ожидаемом порядке выполнения

Оценка того, выполняется ли программа в нужном вам порядке с помощью точек останова, журналов и т. д., — это просто проверка.

4.7 Убедитесь, что данные, необходимые для рендеринга, совпадают с ожидаемыми

Убедитесь, что изменения данных на каждом этапе выполнения совпадают с ожидаемыми.

4.8 Общий метод анализа аномального кода

  • комментарии к кодуИспользуйте идею дихотомии, чтобы комментировать код построчно, пока проблема не будет обнаружена.
  • Исключение библиотеки классов, проблема совместимостиЭтот сценарий часто встречается, и нам нужно использовать метод, который может отлаживать исключения страницы, напримерSafari,Whistle,vConsoleПросмотрите журнал исключений, чтобы быстро найти расположение библиотеки классов и найти замену или совместимые решения.
  • try catchЕсли в вашем проекте нет мониторинга исключений, то в подозрительном фрагменте кода перейдите кTry CatchБар.
  • Совместимость с синтаксисом ES6Обычно мы проходимBabelкомпилироватьES6, но если дополнительная сторонняя библиотека классов имеет несовместимый синтаксис, младшая версия мобильного устройства будет ненормальной. Итак, сначала используйте метод отладки, описанный выше, чтобы определить исключение, а затем добавьте полифилл для совместимости.

V. Резюме

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

Категории