Часть рендеринга LEGO предназначена для конечных пользователей C. Оборудование C-end неравномерно, а среда сложна, поэтому выделяется много студентов, занимающихся исследованиями и разработками >BUG. Для быстрого решения >BUGПоэтому необходимо гибко использовать средства отладки.ChromeМетод отладки браузера, если необходимо. Под Mac используйтеF12Или щелкните правой кнопкой мыши "Проверить (Inspect Element)», чтобы открыть инструменты отладки браузера.

0x01 Динамическое изменение имени класса стиля элемента

Добавление или удаление имен классов более распространено в условной логике.Через devtools вы можете напрямую и динамически изменять/активировать/отключать имена классов.

1. Выберите элемент в дереве DOM
2. Нажмите, чтобы активировать.cls
3. Можно ли динамически изменять имя класса с помощью поля выбора.
4. доступныйAdd new classПоле ввода динамически добавляет определенное имя класса

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

0x02 Принудительная активация псевдоклассов

Некоторые анимации на веб-странице основаны, например, на:active,:hoverи т. д. При перемещении мыши в консоль эти псевдоклассы не будут действовать, и стиль css не может быть отлажен в консоли.В это время вы можете использовать псевдокласс принудительной активации

1. Выберите элементы с эффектами псевдокласса
2. нажмите:hov
3. В зависимости от ситуации с кодом проверьте соответствующий псевдокласс
4. Стили псевдоклассов можно динамически отлаживать на панели стилей.

**Метод работы 2:** Вы также можете щелкнуть правой кнопкой мыши в дереве DOM ->Force State-> Проверить соответствующий псевдокласс

0x03 Вычисляемые стили позиционируются в соответствии с правилами CSS

Уровень DOM проекта относительно сложный (глубокий), напримерfont-sizeЭтот атрибут стиля может иметь несколько уровней охвата, и мы должны найти CSS, который вступит в силу в окончательном исполнении, чтобы внести эффективные изменения.

1. существуетComputedв панелиfilterИмя атрибута стиля фильтра поля ввода
2. Разверните свойства, вы увидите несколько определений, и только первая строка вступит в силу.
3. При наведении мыши отображается левая сторона->, щелкните, чтобы перейти кStylesПравила CSS в панелях
4. Стили могут быть изменены в действующих правилах CSS.

В стиле расчета вы можете увидеть реальный размер, отображаемый в браузере.При обнаружении проблемы переноса текста в клиенте IOS было обнаружено, что система Android установила размер шрифта как «чрезвычайно маленький», что привело к несогласованному отображению между ученик и учитель.

0x04 палитра цветов

В отладочном CSS установите значение свойства, связанного с цветом, цвет имеетHEX,RGBA,RGB,HSLAВ виде профессионального инженерного льва переднего плана в общей сложности255^3 = 16581375Цвета, во всяком случае, старик не помнит. Но вы можете динамически изменять цвет с помощью палитры цветов, предоставляемой Chrome.

1. Найдите свойство в CSS, которое задает цвет
2. Щелкните селектор (цветной квадрат) слева от значения цвета.

0x05 Селектор теней

селектор теней дляbox-shadowСвойства, которые можно настроить визуально прямо через селектор

1. нажмитеbox-shadow«Значок каскадного смещения» в правой части свойства открывает селектор теней.
2. Смещение горизонтальной и вертикальной осей, размытие и рассеивание теней, внутренние и внешние тени можно настроить с помощью панели выбора цвета.

0x06 Быстрая настройка значения свойства CSS

Колесо мыши может выполнять точную или быструю настройку значений свойств CSS, таких как размер шрифта, угол поворота, значения ширины и высоты и т. д. Колесико мыши не просто +-1

• +-0.1:Option+ колесико мыши, система windows естьAlt+колесо
• +-1: Колесо прокручивается вперед и назад
• +-10:Shift+ колесо мыши
• +-100:Command+ Колесико мыши, система Windows естьCtrl+колесо

0x07 отладка анимации анимации

Некоторые эффекты анимации элементов могут быть достигнуты с помощью «кадровой анимации».transitionВнедрение, код в процессе разработки и реализации слишком абстрактен, на самом деле вам все равно придется просматривать эффект в браузере. Chrome Dev Tools предоставляет панель отладки для анимации. Эта панель обеспечивает воспроизведение анимации, паузу, предварительный просмотр, модификацию. Метод работы:

1. Откройте консоль, нажмите «ESC» на клавиатуре, чтобы открыть панель консоли.
2. Нажмите «вертикальные три точки» в верхнем левом углу панели «Консоль» и выберите «Анимации» во всплывающем меню, чтобы открыть панель отладки анимации.

На панели анимации вы можете увидеть имя анимации кадра и соответствующий узел DOM.Щелкните узел DOM в первом столбце, чтобы быстро найти местоположение DOM на панели «Элементы».В то же время панель «Стили» также будет обновлено. Вы можете прокрутить панель «Стили» вниз, чтобы увидеть ее. к определенной «кадровой анимации». Роль панели анимации:

• DOM-структура анимации позиционирования
• Управление процессом выполнения анимации: воспроизведение, пауза, повтор, замедление анимации, контроль времени выполнения
• Процесс выполнения анимации предварительного просмотра, кривая времени анимации
• Слушайте, чтобы записать весь процесс анимации

0x08 Скопировать консольную переменную в буфер обмена

Панель консоли выводит много журналов. Когда мы хотим скопировать распечатанный сложный объект, мы обнаруживаем, что прямое копирование приведет к потере данных. В настоящее время нам нужен только одинcopy()функция для копирования переменной в буфер обмена

0x09 визуальное редактирование веб-страницы

Инженер F12, вы можете быстро подделывать веб-страницы в консоли(Console)воплощать в жизнь:

• document.body.contentEditable="true"
• илиdocument.designMode = "on"

0x0A имитирует слабую сетевую среду.

существуетNetwork Tabниже, доступно по адресуOnlineВыберите из раскрывающегося списка, чтобы имитировать слабую сетевую среду.В то же время вы также можете добавить пользовательскую сетевую среду, чтобы установить скорость загрузки, скорость загрузки и задержку сети.

0x0B XHR повтор

XML HTTP RequestБудет вNetwork TabПод записью выберите соответствующийXHRЗапись, щелкните правой кнопкой мыши, чтобы воспроизвести сетевой запрос. Кроме того, если вы также хотите изменить параметры запроса при воспроизведении запроса, вы можете скопировать пакет запроса в командную строку и выполнить его после модификации.

curl 'https://www.baidu.com/s?ie=utf-8&csq=1&pstg=21&mod=2&isbd=1&cqid=8e79bf0d0004f40d&istc=8905&ver=0QxsJN2ZOr4aje7f6_0UmO9Z20VzWyiNCYC&chk=5fc9f524&isid=F000276D55E53989&ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=%E5%AD%97%E8%8A%82%E8%B7%B3%E5%8A%A8&fenlei=256&rsv_pq=aa5b9db10000e460&rsv_t=5c57hKI5zVEqdfLfosNaYFxE%2B4vOfqPH059N%2FYFLF1bEBAux2Mo0HRD%2FeQA&rqlang=cn&rsv_enter=1&rsv_dl=ib&rsv_sug3=14&rsv_sug1=12&rsv_sug7=100&_ck=115040.0.-1.-1.-1.-1.-1&rsv_isid=33213_1459_33061_33113_33098_33101_33183_33181_33145_33211_33199_33217_22159_33216_33215_33185&isctg=5&rsv_stat=-2&rsv_sug7=100' \
  -H 'Connection: keep-alive' \
  -H 'Pragma: no-cache' \
  -H 'Cache-Control: no-cache' \
  -H 'Accept: */*' \
  -H 'is_xhr: 1' \
  -H 'X-Requested-With: XMLHttpRequest' \
  -H 'is_referer: https://www.baidu.com/' \
  -H 'User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.67 Safari/537.36' \
  -H 'Sec-Fetch-Site: same-origin' \
  -H 'Sec-Fetch-Mode: cors' \
  -H 'Sec-Fetch-Dest: empty' \
  -H 'Referer: https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=%E5%AD%97%E8%8A%82%E8%B7%B3%E5%8A%A8&fenlei=256&rsv_pq=aa5b9db10000e460&rsv_t=5c57hKI5zVEqdfLfosNaYFxE%2B4vOfqPH059N%2FYFLF1bEBAux2Mo0HRD%2FeQA&rqlang=cn&rsv_enter=1&rsv_dl=ib&rsv_sug3=14&rsv_sug1=12&rsv_sug7=100' \
  -H 'Accept-Language: zh-CN,zh;q=0.9' \
  -H 'Cookie: BIDUPSID=7FFA50202A583B0E5768F9404E44F84B; PSTM=1594532284; BD_UPN=123253; BAIDUID=F00027F4581A89A057BFF664D0C6D55E:FG=1; sugstore=0; H_WISE_SIDS=163166_163200_161505_150967_160246_160663_156287_161253_159548_159610_162915_155225_161299_163302_162372_159382_163162_160443_161421_157264_163396_161420_127969_161771_159066_161961_160898_161729_161922_131423_163164_128701_162117_158055_162168_161965_159954_160422_144966_162186_154213_161241_139884_158640_155529_160980_163114_147552_161880_161891_162268_162334_162851_162816_162642_159092_162264_162261_162155_110085_162026_163168_163317_163318_163319_163321; delPer=0; PSINO=2; BD_HOME=1; BD_CK_SAM=1; COOKIE_SESSION=769033_0_9_0_63_84_1_6_3_8_1_16_0_0_0_0_1605507855_0_1607056101%7C9%230_0_1607056101%7C1; BDORZ=B490B5EBF6F3CD402E515D22BCDA1598; H_PS_PSSID=33213_1459_33061_33113_33098_33101_33183_33181_33145_33211_33199_33217_33149_22159_33216_33215_33185; H_PS_645EC=9555H%2BItaTBsNu7fj7yuWi%2BorvZXCBbqUWWWLmv7EAQQAseiCtR626mbuWU; BA_HECTOR=002105ah8g2l2h01c11fsjt950r' \
  --compressed

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

0x0C Другая консоль

12.1 console.log( ) | info( ) | debug( ) | warn( ) | error( )

Печатает исходное строковое содержимое в консоли браузера, а текст окрашивается по-разному в зависимости от «уровня».

12.2 Заполнители

JavascriptПредоставляется ряд заполнителей, которые можно использовать для отладки вывода следующим образом:

• %o- заполнитель объекта
• %s— строковый заполнитель
• %d- цифровой заполнитель

12.3 Консоль также поддерживает CSS

использовать%cЗаполнитель, вы можете настроить стиль выходного содержимого, например, написание встроенных стилей.

12.4 Отображение данных JSON в табличной форме

console.table()Более интуитивно понятный / красивый дисплейJSONформатировать данные

12,5 логарифмических комбинаций

• console.group()
• console.groupEnd()

Максимально организуйте печатную информацию, чтобы наш вывод выглядел более иерархически и организованно. *Для получения дополнительной информации см.:[Перевод] Вы действительно умеете пользоваться console.log?

Скриншот 0x0D

Чтобы делать скриншоты веб-страниц, мы обычно используем сторонние инструменты, на самом деле Chrome предоставил функцию скриншота. Его использование заключается в следующем:Командное объяснение:

• Capture area screenshot
  • Настройте выбранную область снимка экрана, аналогично обычным инструментам для создания снимков экрана.
• Capture full size screenshot
  • Сделайте скриншот полного рендеринга HTML
• Capture node screenshot
  • Перехватите рендеринг DOM-узла, вы должны сначала использовать его вElements Tabследующая проверкаDOMузел
• Capture screenshot
  • Сделайте скриншот того, что видит окно браузера

0x0E Performance

Мониторинг производительности, при отладке веб-страницы вы хотите просмотреть процесс от рендеринга HTML на экран или рендеринг, перерисовку, повторную съемку, использование памяти и процесс изменения страницы во время взаимодействия с пользователем во время выполнения. тогда ты можешьPerformace TabЩелкните красную точку, чтобы записать полный процесс изменения страницы.

• снимок экрана
• Использование памяти, если вы хотите больше сосредоточиться на ситуации с памятью, вы можете записать и просмотреть ее на вкладке «Память».Кнопка «Корзина» справа активирует сборку мусора.

• js, вы можете найти соответствующий файл js и просмотреть его в исходном коде.

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

0x0F Source Tab

в отладчикеSource TabЭто очень практичная панель, и умелое использование может быстро определить проблему от внешнего вида до кода. В процессе разработки и отладки мы частоconsoleмногоlogНо в позиционированииBUGКогда причина в том, что если уровень вызова кода глубокий, передайте толькоconsoleЭффективность решения проблемы относительно низкая.SourceНа панели вы можете предварительно просмотреть все статические ресурсы и исходные коды, вызываемые текущей веб-страницей. Общая функция всей панели следующая:

16.1 Панель инструментов ОТЛАДКА

Каждый значок соответствует:

• пауза (продолжить)
• переступить
• введите функцию
• не работает
• Единственный шаг
• активировать (деактивировать) все точки останова
• Автоматические точки останова в исключениях выполнения кода
  • Нужно проверить «Пауза при перехваченных исключениях»

16.2 Правильный отладчик

16.2.1 Watch

Мониторинг переменных, мониторинг переменных, добавленных в список мониторинга, в правой части панели есть кнопки "Добавить" и "Обновить" список переменных

16.2.2 Call Stack

Стек вызовов функций, точка останова выполняется в стеке вызовов текущей функции, в соответствии со стеком вызовов очень удобно получать, где в проекте функция активно «прогрессивно» вызывается. Очень полезно! В реальном случае, при решении исключения подкачки редактора, причина проблемы может быть обнаружена во времени через стек вызовов и переменные, отображаемые в режиме реального времени на панели исходного кода.

16.2.3 Scope

Scope, значения всех свойств функции, где находится текущая точка останова. Scope отображает три типа значений: Local, Closure и Global.

16.2.4 Breakpoints

Отобразить список точек останова, отобразить файл/номер строки/сокращенное содержимое строки, в которой расположена каждая точка останова, установить/снять флажок выбора в списке точек останова, чтобы активировать/отключить точки останова

16.2.5 XHR Breakpoints

Отладьте XHR, введите ключевые слова в URL-адресе XHR, вы можете перехватить XHR, содержащий ключевые слова в URL-адресе.

16.2.6 DOM Breakpoints

Точка останова DOM, вElementsЩелкните правой кнопкой мыши узел в дереве DOM на панели, чтобы установить условный точку останова:

• subtree modifications: изменения дочернего узла
• **изменения атрибутов: **изменение атрибутов текущего узла
• node remove: Текущий узел удален

16.2.7 Global Breakpoints

Глобальный мониторинг, здесь видно, какие обработчики событий зарегистрированы и привязаны к каким функциям глобально, а также их можно удалить (Remove) соответствующий прослушивателю глобального события

16.2.8 Event Listener Breakpoints

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

16.3 Левая панель навигации

16.3.1 Page

весьSource TabКак следует из названия, это панель исходного кода. По умолчанию выбран столбец «Страница». Здесь вы можете увидеть дерево каталогов файлов статических ресурсов с доменным именем в виде списка. Щелкните файл, чтобы просмотреть статический файл в основной вид.

16.3.2 Content Scripts

Если средства отладки недостаточно для кода js-скрипта плагина браузера Chrome в области содержимого, вы также можете разработать плагин Chrome для повышения эффективности разработки и отладки (например, QR-код, разработанный Hong Ян сгенерировать roomid под быстрое строительство курса)

16.3.3 Snippets

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

• Щелкните правой кнопкой мыши, чтобы "run"
• Щелкните правой кнопкой мыши, когда не нужно"remove"

Другие вкладки используются реже и пока не будут представлены. . .

16.4 Основная область просмотра

То есть область предпросмотра статических ресурсов, аналогичная редактору, и открытый файл скрипта/ресурса можно переключать вверху. Предварительный просмотр — это самая основная функция, у основного вида/панели есть и другие важные функции. Существует три типа точек останова:

16.4.1 Нормальные точки останова

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

debugger;

16.4.2 Условные точки останова

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

16.4.3 Сценарии черного ящика

Например, ссылка на проектjquery.min.jsТакие файлы библиотеки нам не нужны при отладке, тогда мы можем щелкнуть правой кнопкой мыши и добавить такие файлы скриптов в «скрипт черного ящика», затем вdebugПри одношаговой отладке он не будет входить в такие библиотечные файлы, сокращая количество шагов отладки.

0x10 Coverage

Статистика использования (эффективности) кода, поддержка статистики записи во время выполнения. Например, мы представилиjqueryНо только одинhide()метод, то дляjqueryИспользование кода относительно низкое.Эта статистика поддерживает статистику использования кода css и js.

0x11 Rendering

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

1. существуетmore toolsвыбирается из менюRenderingинструмент

0x12 Layers

слой, когда страница достаточно сложная, вcssС благословением, могут быть некоторые проблемы с производительностью рендеринга.В это время вы можете пройтиLayersИнструменты явно смотрят наDOMотношения слоя.

1. существуетmore toolsвыбирается из менюLayersинструмент

Дополнительные сведения о рендеринге в браузере см. в статье:Глубокое погружение в рендеринг браузера

0x13 Мобильная отладка H5

ChromeПоддержка браузеров для мобильных устройствAndroidОтладка мобильных устройств,Safariслужба поддержкиIOSОтладка на мобильных устройствах.ChromeотладкаAndroidШаги по перемещению устройства следующие:

1. кабель для передачи данныхPCа такжеAndroidоборудование,AndroidУстройство разрешает отладку (включите режим отладки и разрешите текущему устройству отлаживать мобильный терминал)
2. ChromeДоступ к адресной строке браузера:chrome://inspect, вы можете войти на веб-страницу отладки

• Поддерживаемые устройства, веб-страницыApp,страница,Chromeплагин,Worksи "другие" виды отладки

3. нажмитеinspectТакже как обычная веб-страница экзамена, вы можете отладить мобильный терминал.webviewвбегаетwebпрограмма

Для отладки H5 в приложении см. статью:отладка h5 в приложении

Суммировать

Браузер Chrome предоставляет разработчикам веб-приложений многофункциональные инструменты для разработки и отладки. В этой статье описаны сценарии использования, методы и личное понимание некоторых инструментов. Инструменты используются только в качестве вспомогательных средств для разработки. Для эффективной разработки и устранения ошибок необходимо Продолжить накапливать и обобщать опыт в процессе развивающей практики.

Ссылаться на

• Руководство по отладке реальной машины мобильного терминала
• Инструменты разработчика Chrome
• Сетевая панель Chrome DevTools

❤️ Спасибо за поддержку

1. Не забудьте, если вам нравитсяПоделиться, Нравится, ИзбранноеТри последовательных о~.