Выйдите из 996, полная стратегия панели Chrome DevTools! ! !

Ли Хуаси, фронтенд-разработчик команды WeDoctor Cloud Service Team, любит бездельничать, типичный кошачий раб

Панель консоли

Пожалуйста, откройте эту главуdevtools/console/console.htmlесть вместе

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

Комбинация клавиш быстрого доступа:
Windows: Control + Shift + J
Mac: Command + Option + J

Во-первых, давайте взглянем на методы объекта консоли:

console.clear()

Как следует из названия, очищает консоль

console.log(), info(), warn(), error()

Это те, которые используются больше на ежедневной основе, среди которыхlogиinfo, помню что до 2016 пользовался инфой для печати, разница все же есть,infoСодержимому вывода предшествует маленький кружок с синим фоном, который, вероятно, похож на это: i, а затем обновление Chrome исчезло (IE все еще может видеть разницу)

console.log('普通信息')
console.info('提示性信息')
console.error('错误信息')
console.warn('警示信息')

Используйте заполнители

// 支持逗号分隔参数，不需要每个参数都单独打印
console.log(1, '2', +'3')
// 占位符
// %s 
console.log('今晚%s 老虎', '打', '？？？')
// %c 
console.log('今晚%s%c 老虎', '打', 'color: red', '？？？')
// 带有占位符的参数之后的若干参数属于占位符的配置参数

Остальной список заполнителей:

Заполнитель	Функции
%s	нить
%d	целое число
%i	целое число
%f	число с плавающей запятой
%o	ссылка на объект
%c	строка формата css

console.time(), timeEnd()

timeиtimeEndОбычно используется вместе, передает параметр, чтобы определить начальную позицию для статистического времени:

console.time('t')
Array(900000).fill({}).forEach((v, index) => v.index = index)
console.timeEnd('t')
// t: 28.18603515625ms

Распечатает время выполнения промежуточного кода

console.count()

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

function foo(type = '') {
  type ? console.count(type) : console.count()
  return 'type：' + type
}

foo('A') //A: 1
foo('B') //B: 1
foo()    //default: 1
foo()    //default: 2
foo()    //default: 3
foo('A') //A: 2

console.trace()

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

console.trace()
function foo() {
  console.trace()
}
foo()

console.table()

Метод console.table() может преобразовывать данные составного типа в табличное отображение.

var arr = [
  { name: '梅西', qq: 10 },
  { name: 'C 罗', qq: 7 },
  { name: '内马尔', qq: 11 },
]
console.table(arr)

console.dir()

Печатайте объекты в форме, удобной для чтения и печати

var obj = {
  name: 'justwe7',
  age: 26,
  fn: function () {
    alert('justwe7')
  },
}
console.log(obj)
console.dir(obj)

Отличия печати объектов DOM:

console.assert()

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

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

var val = 1
console.assert(val === 1, '等于 1')
console.assert(val !== 1, '不等于 1')
console.log('代码往下执行呢啊')

console.group(), groupEnd()

Групповая выходная информация, которую можно свернуть/развернуть с помощью мыши

console.group('分组 1')
console.log('分组 1-1111')
console.log('分组 1-2222')
console.log('分组 1-3333')
console.groupEnd()
console.group('分组 2')
console.log('分组 2-1111')
console.log('分组 2-2222')
console.log('分组 2-3333')
console.groupEnd()

`$`Селектор

`$_`

Результат последнего вычисления можно записать и использовать непосредственно для выполнения кода:

`$0,$1...$4`

Представляет последние 5 элементов обзорапроверилПройденный DOM-узел, смотрим на картинку (хочу его выделить, предпочитаю играть со способом хранения глобальных переменных, а для экономии собственных рук выбрал другой узел):

`$和?`

$(selector)Это оболочка для нативного document.querySelector() .
?(selector)Возвращается коллекция всех элементов, соответствующих условиям выбора, которая является инкапсуляцией document.querySelectorAll().

$x

Вернуть совпадающие узлы в массиве

<ul>
  <ul>
    <li><p>li 下的 p1</p></li>
    <li><p>li 下的 p2</p></li>
    <li><p>li 下的 p3</p></li>
  </ul>
</ul>
<p>外面的 p</p>

$x('//li') // 所有的 li
$x('//p') // 所有的 p
$x('//li//p') // 所有的 li 下的 p
$x('//li[p]') // 所有的 li 下的 p

keys(), values()

с методами расширения объекта ES6,Object.keys()иObject.values()такой же

keys(obj);
values(obj);

copy()

Переменные можно копировать прямо в буфер обмена.

copy(temp1)

иSave global variableОбъединение артефактов

Панель элементов

Пожалуйста, откройте эту главуdevtools/element/element.htmlесть вместе

На панели «Элементы» вы можете просматривать все элементы страницы в виде DOM-дерева, а также редактировать эти элементы страницы с помощью WYSIWYG.

Комбинация клавиш быстрого доступа:
Windows: Control + Shift + C
Mac: Command + Option + C

отладка css

style

Выберите целевой узел, панель элементов, стиль просмотра->:hov и выберите соответствующее состояние.

computed

Иногда стили покрыты слишком много, и это очень проблематично просматривать,computedпригодится

Щелкните стиль, чтобы перейти непосредственно к соответствующему определению css.

Изменить значение элемента

Выберите значение, которое хотите изменить, и нажмите клавиши со стрелками вверх и вниз, чтобы+ / -1 единица стоимости

alt + 方向键Значение единицы может быть скорректировано на ×10
Ctrl + 方向键Значение единицы измерения может быть изменено на ×100.
shift + 方向键Единицы могут быть изменены на /10

HTML-отладка

Сан-операция

Выберите узел и нажмите клавиатуру напрямуюHВы можете напрямую показать/скрыть элемент, не вводя стиль вручную, эффект тот жеvisibility: hidden, по-прежнему занимая место блочной модели. (Не забудьте изменить метод ввода на английский~)

сохранить элемент в глобальную временную переменную

Выберите узел, щелкните правой кнопкой мыши,Store as global variable(Его также можно использовать в сетевой панели, особенно очень удобно возвращаемое значение интерфейса фильтра)

прокрутить до узла

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

3D-вид для конкретных краев

Edge после использования хрома действительно преображается,3D видЭто может помочь найти некоторые уровни позиционирования и проблемы с вложенностью DOM.Интуитивно видно, хорошо ли написана структура страницы или нет (в сочетании с деревом dom во вспомогательной функции очень удобно)

В настоящее время в хроме по-прежнему нет этой функции, открытое положение Edge: состояние открытия консоли =>Escоткрыть ящик =>···Выберите панель 3D-вида

Точки останова DOM

Вы можете отслеживать изменения узла DOM (изменения дочернего узла/изменения атрибута/удаление элемента) и точки останова на строку кода js, которая изменяет состояние DOM:

Сетевая панель

Может просматривать сведения о ресурсах, запрошенных по сети.

Комбинация клавиш быстрого доступа:
Windows: Control + Shift + I
Mac: Command + Option + I

По площади он условно делится на следующие области:

Controls- Управляет параметрами сетевых функций, а также некоторыми видами дисплея.
Filters- Контролируйте, какие типы ресурсов отображаются в таблице запросов.

Советы: удерживайте Cmd (Mac) или Ctrl (Windows/Linux) и щелкните элемент фильтра, чтобы одновременно выбрать несколько элементов фильтра.
Overview- На этом графике показана временная шкала времени извлечения ресурсов. Если вы видите несколько вертикальных полос, расположенных друг над другом, эти ресурсы были получены одновременно.
Requests Table- В этой таблице перечислены все извлеченные ресурсы. По умолчанию таблица отсортирована в хронологическом порядке, причем самые старые ресурсы находятся вверху. Щелкните имя ресурса, чтобы отобразить дополнительную информацию. Совет. Щелкните правой кнопкой мыши любой заголовок таблицы, кроме временной шкалы, чтобы добавить или удалить столбцы информации.
Summary- Вы можете сразу увидеть общее количество запросов к странице, общий объем переданных данных и время загрузки.

(1, 2) Элементы управления, область фильтров

Дисплеи, управляемые фильтрами:

Используйте большие строки запроса- по умолчанию,Requests TableРесурс отображает только небольшую строку. проверилUse large resource rowsКнопка (использующая большую строку ресурсов) отображает два текстовых поля: основное поле и дополнительное поле.
Захват скриншотов- При наведении курсора на скриншот на временной шкале/водопаде будет отображаться вертикальная желтая линия, указывающая, когда кадр был захвачен.
показать обзор- Показать время, затрачиваемое на различных этапах (область обзора) всего жизненного цикла страницы (эти полосы синего и зеленого цвета)

(3) Область обзора

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

(4) Область таблицы запросов

Соответствующее описание строки заголовка:

Name(название): Имя ресурса.
Status(государство): код состояния HTTP.
Type(тип): MIME-тип запрошенного ресурса.
Initiator(инициировано): Объект или процесс, инициировавший запрос. Он может иметь следующие значения:
- Parser(парсер): HTML-парсер Chrome инициировал запрос.
- Redirect(перенаправление): перенаправление HTTP запустило запрос.
- Script(сценарий): Скрипт запустил запрос.
- Other(разное): какой-то другой процесс или действие инициирует запрос, например, когда пользователь щелкает ссылку для перехода на страницу или вводит URL-адрес в адресной строке.
Size(размер): Размер заголовка ответа (обычно несколько сотен байт) плюс данные ответа, предоставленные сервером.
Time(время): общая продолжительность, от начала запроса до получения последнего байта в ответе
Timeline/Waterfall(Лента новостей): отображает визуальную статистику всех сетевых запросов.

Щелкните правой кнопкой мыши строку заголовка, например (Имя), чтобы добавить или удалить столбцы информации. Например, вы можете добавить дополнительный столбец Response Header => Content-Encoding options, чтобы получить обзор gzip-сжатия ресурсов страницы:

перезапустить`xhr`просить

При обычной и фоновой совместной отладке мы можем использовать наиболееNetworkпанель. Но каждый раз, когда вы хотите повторно просмотреть запрос, он инициируется обновлением страницы, нажатием кнопки и т. д.xhrзапрос, этот способ иногда громоздкий, можно пройтиReplay XHRспособ инициировать новый запрос:

Просмотр информации, связанной с HTTP

Просмотр параметров сетевого запроса

можно нажатьquery string parameters(параметр строки запроса) рядом сview URL encoded(см. кодировку URL) илиview decodedСсылка (Просмотр декодирования) для просмотра URL-адреса в закодированном или декодированном формате.query string parameters(параметр строки запроса). Это особенно полезно при использовании postman для копирования связанных входных параметров.

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

Возвращаемое значение интерфейса (в предварительном просмотре) также может бытьSave global variableсохранить глобальную переменную

Почему Size и Time имеют две строки параметров?

О столбце Размер

SizeЕсть две строки:

Первая строка представляет данныеПри передачеразмер, как на картинке выше190KB
Вторая строка представляет данныедействительныйразмер708KB

взято на стороне сервераgzipАлгоритм сжатия преобразует исходный708KBсжать до190KB, размер передачи укорачивается3.7 倍, значительно повышая эффективность передачи ресурсов

Обратите внимание:

gzipСжатие только сжимает响应体контента, поэтому он подходит для возврата большого объема данных. Если объем данных слишком мал, это может привести к тому, что данныеПри передачесоотношение размеровдействительныйбольший размер (Добавлены некоторые дополнительные заголовки ответа)

О столбце «Время»

У времени есть две линии:

Первая строка представляет собой общее время, затраченное клиентом на отправку запроса на сервер для возврата всех данных, что для приведенного выше рисунка составляет471ms
Вторая строка представляет время от отправки запроса клиентом до возврата первого байта сервером, что для приведенного выше рисунка равно55ms

Время в первой строке представляет все элементы: например.解析 dns,建立连接,等待服务器返回数据,传输数据Ждать

Время во второй строке总时间 - 数据传输время

Из вышеприведенного анализа мы видим, что изКлиент запрашивает сервер для завершения обработки и подготовки к возврату данных.потребовалось55ms, но делатьпередача данныхпроведенное время471ms

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

Waterfall

При нажатии на ресурс отобразится подробная информация о загрузке сети:

Описание связанных полей:

Queuing(очередь)
Браузеры ставят запросы в очередь, когда
1. Есть запросы с более высоким приоритетом, запросы откладываются механизмом рендеринга, это часто происходит с изображениями, так как считается, что они имеют более низкий приоритет, чем критические ресурсы, такие как скрипты/стили.
2. Этот источник открыл шесть соединений TCP, достигнув предела только для HTTP/1.0 и HTTP/1.1. Ожидание освобождения недоступного TCP-сокета
3. Браузер кратковременно выделяет место в дисковом кеше, создавая записи дискового кеша (обычно очень быстро)
Stalled(Stall) - Время ожидания перед отправкой запроса. Он может быть заблокирован по любой причине при попадании в очередь, и это время включает время, согласованное агентом. Запросы могут быть остановлены по любой из причин, описанных в разделе «Очередь».
DNS lookup(поиск DNS) — браузер разрешает запрашиваемый IP-адрес, каждый новый домен на странице требует полного кругового обхода для выполнения поиска DNS.
Proxy Negotiation- браузер согласовывает запрос с прокси-сервером
initial connection(Начальное соединение) — время, необходимое для установления соединения, включая подтверждение/повторные попытки TCP и согласование SSL.
SSL handshake(рукопожатие SSL) — время, необходимое для завершения рукопожатия SSL.
Request sent(запрос на отправку) — время, необходимое для отправки сетевого запроса, обычно доли миллисекунды.
Waiting(ожидание) - время, затраченное на ожидание первоначального ответа, также известное какTime To First Byte(время, которое потребовалось для получения первого байта). Помимо времени, затраченного на ожидание ответа сервера, это время также включает 1 задержку туда-обратно и время, необходимое серверу для подготовки ответа (время задержки отправки сервером данных).
Content Download(загрузка контента) - время, которое потребовалось для получения данных ответа (от первого полученного байта до конца последнего загруженного байта)
ServiceWorker Preparation- Браузер запускает сервис-воркер
Request to ServiceWorker- Отправка запроса сервисному работнику
Receiving Push- Браузер получает данные для этого ответа через сервер HTTP/2.
Reading Push- Браузер считывает локальные данные, полученные ранее

(5) Сводная область

Запускается после анализа исходной разметки страницы.DOMContentLoaded. Его отображение на панели «Сеть»:

Это событие представляет синяя вертикальная линия на панели обзора.
Красная вертикальная линия в таблице запросов также представляет это событие.
На панели «Сводка» вы можете просмотреть точное время события.

Запускается, когда страница полностью загруженаloadсобытие. Он проявляется также в:

Красная вертикальная линия на панели обзора представляет это событие.
Красная вертикальная линия в таблице запросов также представляет это событие.
В Резюме вы можете увидеть точное время события

DOMContentLoaded будет меньше времени загрузки, а разница во времени между ними примерно равна времени загрузки внешних ресурсов (обычно изображений/шрифтов).

Время завершения — это время, когда все http-запросы на странице отправляются до завершения ответа (если на странице есть интерфейс опроса, это значение также будет накапливаться). Протокол HTTP1.0/1.1 ограничивает количество одновременных запросов для одного доменного имени до 6, то есть Finish — это все запросы (не только запросы XHR, но и запросы ресурсов, таких как DOC, img, js, css и т. д. .) при ограничении параллелизма в 6 раз для завершения.

Время завершения больше, чем время загрузки, а это означает, что страница имеет значительное количество запросов.

Время завершения меньше, чем время загрузки, что означает, что количество запросов страницы очень мало.Если страница является статической страницей только с одним запросом HTML-документа, время завершения в основном равно времени HTML-документа. запрос.

Таким образом, время завершения не имеет прямого отношения к DOMContentLoaded и Load

Оптимизация сети с помощью панели «Сеть»

Обратитесь к панели «Сеть», чтобы внести некоторые предложения по оптимизации сети.

поставить в очередь или остановить блокировку

Наиболее распространенная проблема заключается в том, что многие запросы ставятся в очередь или блокируются. Это указывает на то, что с одного клиента извлекается слишком много ресурсов. В протоколе подключения HTTP 1.0/1.1 Chrome ограничивает выполнение максимум 6 TCP-подключений на одно доменное имя. Если одновременно запрашиваются двенадцать ресурсов, первые 6 будут запущены, а последние 6 будут поставлены в очередь. Как только один из запросов завершится, первый элемент запроса в очереди начнет свой процесс запроса.

Чтобы решить эту проблему традиционного HTTP 1, необходимо использовать несколько поддоменов для предоставления служебных ресурсов, разделять ресурсы на несколько поддоменов и распределять их равномерно.

Упомянутая выше проблема фиксации количества соединений HTTP 1 не относится к соединениям HTTP 2. Если развернут HTTP 2, не делайте доменного разделения ресурсов, поскольку это повлияет на принцип работы HTTP 2 (мультиплексирование соединений TCP в HTTP 2) связано). Ограничение на 6 подключений HTTP 1 было удалено, и несколько ресурсов могут передаваться одновременно по одному соединению.

Время получения первого байта медленное

Зеленые блоки занимают большую долю:

TTFB — это время ожидания первого байта ответа. Рекомендуется не превышать 200 мс. Следующие условия могут привести к высокому значению TTFB:

Плохие сетевые условия между клиентом и сервером
Или серверная программа медленно отвечает

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

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

медленная загрузка

Синие блоки занимают большую долю:

еслиContent DownloadЭтап (загрузка контента) занимает много времени, и такие оптимизации, как повышение скорости отклика службы и параллельные загрузки, не очень помогают. Основное решение — отправлять меньше байт (например, качественное большое изображение может иметь размер в несколько M, в этом случае можно оптимизировать ширину/высоту/разрешение изображения соответствующим образом)

Панель источников

Пожалуйста, откройте эту главу/devtools/debug-js/get-started.htmlесть вместе

В основном используется для отладки JavaScript на странице.

Пользовательские фрагменты кода Фрагменты кода

у нас часто бываютJavaScriptКод хочется отлаживать в консоли, если объем кода большой, то прямо вconsoleЕго писать хлопотнее, либо мы часто хотим сохранить какие-то фрагменты кода (антишейк, троттлинг, получение параметров адресной строки и т.д.), и каждый раз открываем егоDevtoolsВы можете получить эти фрагменты кода вместо того, чтобы искать их в своих заметках.

Как показано на рисунке, вSourcesэтоtabПод колонкой находитсяSnippetsтеги, куда вы можете добавить некоторые часто используемые фрагменты кода. (как маленький блокнот)

установить точку останова

панель точек останова

перерыв в указанном месте

Базовый процесс отладки точки останова

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

прерывание глобального события

Если вы не знаете, где выполняется код, как в следующем сценарии:

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

Немного проблематично смотреть на условия суждения при написании кода, но поиск соответствующего места в скомпилированном коде для отладки эквивалентен поиску иголки в стоге сена. Хотите попробовать собственное решение, чтобы убедиться, что оно верное:

Поскольку список загружается путем извлечения, он обязательно вызовет сетевой запрос, вы можете сделать вызов в прослушивателе событий.XHRточка останова
Затем загружаемая по запросу страница инициирует запрос интерфейса, и, как и ожидалось, выполнение кода прерывается. Но он предлагает, что исходная карта не может быть найдена, временно отключите сопоставление ресурсов js(Связанные решения):
Снова активируйте точку останова и обнаружите, что прерванный код можно просмотреть.Поскольку это должен быть бизнес-код на странице, который помещает запрос в стек выполнения, соответствующее имя метода можно найти в стеке:getVideoList
Щелкните имя метода, чтобы перейти к соответствующему исходному коду. Вы можете видеть, что код, обведенный кружком, и предполагаемый код проблемы должны быть на одном месте.
Вернемся назад и посмотрим на причину проблемы: после того, как страница запрашивает новые данные, она напрямуюpageNumСамоувеличение, а затем непосредственно используется для оценки того, следует ли закончить, недостаточно строго, лучше напрямую сравнить текущую длину списка и общее количество данных, возвращаемых интерфейсом, чтобы судить:
Не забудьте изменить код в начале этого файла, т.е.191.xxx.js
1. Сделайте точку останова в первой строке и сделайте точку останова перед методом push:(если не обновится снова (не уверен, почему это может быть не так))
2. Затем обновите страницу и найдите код, который вы хотите изменить: используйтеt.recommendList.lengthзаменятьn.pageSize*t.pageNo(Первые два шага предназначены для предотвращения анализа кода проблемы js, сначала заблокируйте операцию:stackoverflow)
СноваCtrl + S, сохраните его, а затем посмотрите на эффект страницы, список может быть полностью загружен:

Не поддерживается прямое изменение кода страницы на панели кода украшения.

модель черного ящика

Поместите файл скрипта в Blackbox (черный ящик), вы можете игнорировать стек вызовов из сторонней библиотеки

По умолчанию (черный ящик не включен):

Откройте черный ящик:

Открытый метод①
1. Открыть инструменты разработчикаSettings(настраивать)
2. В левом навигационном меню нажмитеBlackboxing(черный ящик)
3. нажмитеAdd pattern...(Добавить режим).
4. существуетPattern(шаблон) для ввода шаблона имени файла, который вы хотите исключить из стека вызовов. DevTools исключит все сценарии, соответствующие этому шаблону.
5. В раскрывающемся меню справа от текстового поля выберитеBlackbox(черный ящик), чтобы выполнить файл сценария, но исключить вызовы из стека вызовов, или выбратьDisabled(отключено), чтобы предотвратить выполнение файла.
6. нажмитеAdd(добавить) сохранить
Открытый метод ②
непосредственно в информации о стеке, которую вы хотите игнорироватьblackbox script

Точки останова DOM

Посмотреть панель элементовТочки останова DOM

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

Пожалуйста, используйте эту главуРежим инкогнито ChromeОткрытым/devtools/jank/index.htmlСовместное использование Incognito обеспечивает работу Chrome в относительно чистой среде. Если установлено много подключаемых модулей Chrome, эти подключаемые модули могут повлиять на производительность профилирования.

На панели «Производительность» вы можете просмотреть подробную информацию о процессе загрузки страницы, например, когда он начал что-то делать, сколько времени это заняло и т. д. По сравнению с панелью «Сеть» вы можете не только видеть информацию о загрузке ресурсов через сеть, но и видеть все аспекты загрузки страницы, такие как парсинг JS, вычисление стилей и перерисовка.

Основные области панели разделены:

Controls- Начать запись, остановить запись и настроить информацию, полученную во время записи
Overview- Сводная информация о производительности страницы
Flame Chart- [График пламени (панель потоков)]. На графике пламени видны три вертикальные пунктирные линии (несколько зеленых):
- Синяя линия представляетDOMContentLoaded событие
- Зеленая линия показывает, когда она была впервые нарисована.
- Красная линия представляетload событие
Details- В Flame Chart после выбора события в этом разделе будет отображаться дополнительная информация о событии;

Если кадр выбран, в этом разделе отображается информация, относящаяся к выбранному кадру. Если ни событие, ни кадр не выбраны, в этом разделе отображается информация о текущем периоде записи.

начать запись

Сначала щелкните первый кружок слева от панели управления, чтобы начать запись.
Подождите несколько минут (страница нормальной работы)
Нажмите кнопку «Стоп», и Devtools остановит запись, обработает данные и отобразит отчет о производительности.

Затем появится содержимое картинки выше

Мобильные устройства имеют гораздо меньшую мощность процессора, чем настольные компьютеры и ноутбуки. Всякий раз, когда страница профилируется, регулирование ЦП используется для имитации того, как страница будет вести себя на мобильном устройстве. В инструментах разработчика перейдите на вкладку «Производительность». Убедитесь, что флажок «Снимок экрана» установлен. Щелкните Параметры захвата. Capture SettingsDevTools предоставляет настройки, связанные с тем, как собираются показатели производительности. Для ЦП выберите 2-кратное замедление. DevTools дросселирует процессор, чтобы он работал в 2 раза медленнее, чем обычно

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

(1) управляет областью панели управления

верхняя часть
- ScreenshotsСкриншот: Отмечено по умолчанию, каждый кадр будет делать снимок экрана.
- MemoryЗапись потребления памяти: после проверки вы можете увидеть различные кривые потребления памяти.
область флажка ниже
- Disable javaScript samples[Пример отключения javaScript]: уменьшите нагрузку на систему при работе мобильного телефона, проверьте симуляцию при работе мобильного телефона.
- Network[Сетевое моделирование]: может имитировать запуск страницы в 3G, 4G и других условиях сети.
- Enable advanced paint instrumentation(slow)[Включить расширенный инструмент обнаружения краски (медленно)]: использование расширенного средства обнаружения краски со значительным снижением производительности.
- CPU[Ограниченная производительность ЦП]: в основном для имитации производительности при низком уровне ЦП.

(2) Обзор области обзора

FPS

Чем выше зеленая вертикальная линия, тем выше FPS. Красные блоки на графике FPS (начало изображения выше) представляют собой длинные кадры, и возможны заикания. Если вы часто играете в игры, вы должны знать, что представляет собой этот индикатор.120FPSПредставляет гладкий (вручную смешной)

график пламениFPSЭтот параметр можно измерить

FPS (кадров в секунду) — это основной показатель производительности, используемый для анализа анимации. Если вы можете поддерживать 60 кадров в секунду, то пользовательский опыт хороший.

В: Почему 60 кадров в секунду?

О: Наша цель — обеспечить частоту обновления страницы выше 60 кадров в секунду (кадров) в секунду, что соответствует частоте обновления большинства современных мониторов (60 Гц). Если анимация веб-страницы может достигать 60 кадров в секунду, она будет обновляться синхронно с отображением для достижения наилучшего визуального эффекта. Это означает 60 повторных рендеров за одну секунду, каждый повторный рендеринг не может занимать более 16,66 миллисекунд.

CPU

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

Цветовое разделение диаграммы областей ресурсов процессора:

цвет	содержание выполнения
синий (загружается)	Сетевое взаимодействие и анализ HTML
Желтый (сценарий)	Выполнение JavaScript
Фиолетовый (Визуализация)	Расчет стиля и верстка, т.е. перекомпоновка
Зеленый (Живопись)	Изменить внешний вид, не затрагивая макет, перерисовать
серый (другой)	Время, потраченное на другие мероприятия
белый (в режиме ожидания)	свободное время

Перерисовка — это когда узлу нужно изменить свой внешний вид, не влияя на макет.Например, изменение цвета называется перерисовкой.Reflow (перекомпоновка) — это когда нужно изменить макет или геометрические свойства, что называется перекомпоновкой.

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

js изменяет структуру или стиль dom -> стиль расчета -> макет (перестановка) -> рисование (перерисовка) -> композит (синтез)

Сводка по оптимизации производительности

NET

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

HTML: синий
CSS: фиолетовый
JS: желтый
Изображение: зеленый

Это похоже на оптимизацию производительности сети, чтобы использовать сетевую панель напрямую.

(3) Диаграмма пламени (панель резьбы)

Подробный анализ времени, требуемого для определенных задач, чтобы найти проблему.

Я вижу несколько пунктирных линий:

Синяя линия представляетDOMContentLoaded событие
Зеленая линия показывает, когда она была впервые нарисована.
- FP (First Paint): первая краска
- FCP (First Contentful Paint): первый рисунок с богатым содержанием.
- FMP (First Meaningful Paint): первый осмысленный рисунок.
- LCP (Largest Contentful Paint): отрисовка содержимого наибольшей площади.
Красная линия представляетload событие

DOMContentLoaded: То есть загружается содержимое dom. Так что же загружается в dom? Когда вы открываете веб-страницу и вводите URL-адрес, отображение страницы сначала будет пустым, а затем через некоторое время страница будет отображать содержимое, но некоторые ресурсы страницы, такие как ресурсы изображений, не будут видны. , и в это время страница может нормально работать. Через некоторое время изображение перестанет отображаться на странице. От пустой страницы до отображения содержимого страницы он будет запускатьDOMContentLoadedсобытие. И на этот раз HTML-документ загружается и анализируется.

load: событие загрузки не будет запущено до тех пор, пока не будут загружены все ресурсы (изображения, аудио, видео и т. д.) на странице. Короче говоря, событие загрузки страницы будетDOMContentLoadedСрабатывает после срабатывания.

Main

Взгляните на основной поток, Devtools показывает состояние основного потока.

Ось x представляет время. Каждая полоса представляет собой событие. Чем длиннее полоса, тем дольше длится событие.
Ось Y представляет стек вызовов. В стеке событие выше вызывает событие ниже

Пример из официальной документации Google:

Как показано выше: событие клика запускаетсяscript_foot_closure.jsВызов функции в строке 53. Если посмотреть ниже, функция Function Call может увидеть, что вызывается анонимная функция, которая затем вызывает функцию Me(), которая затем вызывает Se() и так далее.

DevTools назначает скриптам случайные цвета. На изображении выше вызовы функций из скрипта показаны светло-зеленым цветом. Вызовы из другого скрипта отображаются бежевым цветом. Темно-желтый представляет активность сценариев, а фиолетовые события представляют активность рендеринга. Эти более темные желтые и фиолетовые события одинаковы во всех записях.

В отчете о производительности много данных. Вы можете увеличивать и уменьшать масштаб отчета, дважды щелкая, перетаскивая и т. д., и просматривать аналитический отчет за различные периоды времени.
В правом верхнем углу панели событий, если есть маленький красный треугольник, это означает, что с этим событием возникла проблема, и на него следует обратить особое внимание.
Дважды щелкните событие с маленьким красным треугольником. Подробности можно увидеть на панели «Сводка». Обратите внимание на ссылку раскрытия: двойной щелчок по ней выделит событие, которое запускает это событие. Если вы нажмете на ссылку app.js:94, вы перейдете к соответствующему коду.

(4) Область сведений

в целом сотрудничатьFlame Chartиспользовать вместе

SummaryЭта область представляет собой обзорную круговую диаграмму, в которой суммируется общее время, затрачиваемое каждым типом события, а также три варианта просмотра:
Bottom-UpВкладки: используйте, когда вы хотите увидеть действия, которые непосредственно заняли больше всего времени.
Call TreeВкладки: используйте, когда вы хотите увидеть корневую активность, которая вызвала наибольшую работу.
Event LogВкладки: используйте, если вы хотите просмотреть действия в том порядке, в котором они были записаны во время записи.

объект window.performance

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

По сути, объект производительности — это объект, специально используемый для мониторинга производительности.Он имеет встроенный мониторинг параметров производительности практически для всех распространенных потребностей внешнего интерфейса.

performance API

memory
- totalJSHeapSize: 'используемый объем памяти' // единица КБ
- Usedjsheapsize: «Использовать размер памяти»
- jsHeapSizeLimit: «Ограничение размера памяти»
navigation
- redirectCount: 0
  
  Если есть редиректы, страница перескакивает через несколько редиректов.
- type: 0
  
  Подобно значению сцены, определенному апплетом, значение типа: 0 означает, что TYPE_NAVIGATENEXT входит на страницу в обычном режиме (без обновления, без перенаправления и т. д.) 1 означает, что TYPE_RELOAD обновляет страницу через window.location.reload() 2 означает TYPE_BACK_FORWARD продвигается через браузер. Страница, введенная с помощью кнопки «Назад» (запись истории) 255, — это страница, введенная с помощью TYPE_UNDEFINED, кроме указанных выше методов.

onresourcetimingbufferfull// EventHandler вызывается, когда срабатывает событие resourcetimingbufferfull Это событие срабатывает, когда в браузере переполняется resourcetimingbufferfull

// 在 onresourcetimingbufferfull 属性上设置一个回调函数：
function buffer_full(event) {
  console.log("WARNING: Resource Timing Buffer is FULL!");
  performance.setResourceTimingBufferSize(200);
}
function init() {
  // Set a callback if the resource buffer becomes filled
  performance.onresourcetimingbufferfull = buffer_full;
}
<body onload="init()">

timeOrigin: 1594219100175.9412

Возвращает высокоточную метку времени начала измерения производительности.
timing
- navigationStart: 'отметка времени'
  
  В том же контексте браузера отметка времени выгрузки предыдущей веб-страницы (не обязательно того же домена, что и текущая страница) равна значению fetchStart, если предыдущая выгрузка веб-страницы не производилась;
- unloadEventStart: 0
  
  Отметка времени выгрузки предыдущей веб-страницы (тот же домен, что и текущая страница), если предыдущая веб-страница не выгружалась или предыдущая веб-страница находится в другом домене, чем текущая страница, значение равно 0.
- unloadEventEnd: 0
  
  В соответствии с unloadEventStart возвращает отметку времени выполнения Ван Би функции обратного вызова, связанной с событием выгрузки предыдущей веб-страницы.
- redirectStart: 0
  
  Время, когда происходит первое перенаправление HTTP, если есть переход и засчитывается перенаправление в пределах одного доменного имени, в противном случае значение равно 0
- redirectEnd: 0
  
  Время завершения последнего HTTP-перенаправления, если есть перенаправление в пределах того же доменного имени, оно засчитывается, в противном случае значение равно 0
- fetchStart: 'отметка времени'
  
  Время, когда браузер готов получить документ с помощью HTTP-запроса, перед проверкой локального кеша.
- domainLookupStart: 'отметка времени'
  
  Время начала запроса доменного имени DNS, равное значению fetchStart, если используется локальный кэш (т. е. без запроса DNS) или постоянное соединение.
- domainLookupEnd: 'отметка времени'
  
  Время завершения запроса доменного имени DNS, равное значению fetchStart, если используется локальный кэш (т. е. без запроса DNS) или постоянное соединение.
- connectStart: 'отметка времени'
  
  Время, когда HTTP(TCP) начинает устанавливать соединение, если это постоянное соединение, то оно равно значению fetchStart, если возникает ошибка на транспортном уровне и соединение восстанавливается, время нового здесь отображается установленное соединение.
- connectEnd: 'отметка времени'
  
  Время завершения HTTP(TCP) установления соединения (рукопожатия), если это постоянное соединение, оно равно fetchStart; если на транспортном уровне возникает ошибка и соединение восстанавливается, это время, когда вновь установленное соединение завершено; это
- secureConnectionStart: 0
  
  Время начала HTTPS-соединения или 0, если это незащищенное соединение;
- requestStart: 'отметка времени'
  
  Здесь же отображается время, когда HTTP-запрос начал чтение реального документа (завершил установление соединения), в том числе чтение кеша из локального, и время вновь установленного соединения при неправильном соединении.
- responseStart: 'отметка времени'
  
  Время, когда HTTP начал получать ответ (выбран первый байт), включая чтение из локального кеша
- responseEnd: 0
  
  Время, когда были получены все HTTP-ответы (выбран последний байт), включая кэшированные операции чтения из локального
- domLoading: 0
  
  Время начала парсинга и рендеринга DOM-дерева, в это время Document.readyState становится интерактивным, и будет выброшено событие, связанное с readystatechange (здесь парсится только DOM-дерево, а веб-страница в это время не начинает загружаться время.
- dominteractive: 0
  
  Когда синтаксический анализ дерева DOM будет завершен, Document и readyState станут интерактивными, и будет выдано событие, связанное с readystatechange (веб-ресурс в это время не начинает загружаться)
- domContentLoadedEventStart: 0
  
  После завершения синтаксического анализа DOM время, когда ресурс на веб-странице начинает загружаться, прежде чем будет выдано событие DOMContentLoaded.
- domContentLoadedEventEnd: 0
  
  После завершения синтаксического анализа DOM время загрузки ресурсов на веб-странице
- domComplete: 0
  
  Когда дерево DOM проанализировано и ресурс готов, Document.readyState становится завершенным, и будут сгенерированы события, связанные с readystatechange.
- loadEventStart: 0
  
  Событие загрузки отправляется в документ, то есть время начала выполнения callback-функции загрузки.Если событие загрузки не привязано, значение равно 0
- loadEventEnd: 0
  
  Время, когда функция обратного вызова события загрузки завершила выполнение.

Несколько полезных API

метод performance.now()

performance.now()возвращениеperformance.navigationStartк текущему числу миллисекунд.performance.navigationStartМожно сказать, что это начальная точка измерения времени доступа браузера, о чем будет рассказано ниже.

Стоит отметить два момента:

Начальная точка измерения — это момент обращения браузера к начальной точке измерения, или под ним понимается момент нажатия Enter после ввода URL в адресной строке.
Возвращаемое значение - это количество миллисекунд, но с количеством десятичной точности.

Используйте performance.now() для определения времени выполнения (в миллисекундах) кода js:

var st = performance.now();
  console.log(Array(9999999).fill(null).filter(v => !v).length);
  var end = performance.now();
  console.log(`取值时间${end - st}ms`); // 取值时间 558.7849999992759ms

performance.navigation

performance.navigation отвечает за запись информации о поведении пользователя и имеет только два свойства:

redirectCount
- Если есть редиректы, страница перескакивает через несколько редиректов.
type
- Значение типа:
- 0 т.е.TYPE_NAVIGATENEXTОбычно введите страницу (не обновление, нежимое направление и т. Д.)
- 1 т.е.TYPE_RELOADСтраница обновлена через window.location.reload()
- 2 т.е.TYPE_BACK_FORWARDСтраницы, введенные с помощью кнопок браузера вперед и назад (история)
- 255 т.е.TYPE_UNDEFINEDСтраницы, доступ к которым не осуществляется указанными выше способами

console.log(performance.navigation); // PerformanceNavigation {type: 1, redirectCount: 0}

performance.timing

timingСодержит почти все узлы синхронизации

Это поле можно использовать для подсчета продолжительности событий, связанных со страницей:

function getTiming() {
  try {
    var timing = performance.timing;
    var timingObj = {};

    var loadTime = (timing.loadEventEnd - timing.loadEventStart) / 1000;

    if(loadTime < 0) {
      setTimeout(function() {
        getTiming();
      }, 0);
      return;
    }

    timingObj['重定向时间'] = (timing.redirectEnd - timing.redirectStart);
    timingObj['DNS 解析时间'] = (timing.domainLookupEnd - timing.domainLookupStart);
    timingObj['TCP 完成握手时间'] = (timing.connectEnd - timing.connectStart);
    timingObj['HTTP 请求响应完成时间'] = (timing.responseEnd - timing.requestStart);
    timingObj['DOM 开始加载前所花费时间'] = (timing.responseEnd - timing.navigationStart);
    timingObj['DOM 加载完成时间'] = ((timing.domComplete || timing.domLoading) - timing.domLoading);
    timingObj['DOM 结构解析完成时间'] = (timing.domInteractive - timing.domLoading);
    timingObj['总体网络交互耗时，即开始跳转到服务器资源下载完成时间'] = (timing.responseEnd - timing.navigationStart);
    timingObj['可交互的时间'] = (timing.domContentLoadedEventEnd - timing.domContentLoadedEventStart);
    timingObj['首次出现内容'] = (timing.domLoading - timing.navigationStart);
    timingObj['onload 事件时间'] = (timing.loadEventEnd - timing.loadEventStart);
    timingObj['页面完全加载时间'] = (timingObj['重定向时间'] + timingObj['DNS 解析时间'] + timingObj['TCP 完成握手时间'] + timingObj['HTTP 请求响应完成时间'] + timingObj['DOM 结构解析完成时间'] + timingObj['DOM 加载完成时间']);

    for(item in timingObj) {
      console.log(item + ":" + timingObj[item] + '(ms)');
    }

    console.log(performance.timing);

  } catch(e) {
    console.log(performance.timing);
  }
}
window.onload = getTiming

performance.memory

Используется для отображения текущего использования памяти

console.log(performance.memory)
/* {
  jsHeapSizeLimit: 4294705152,
  totalJSHeapSize: 13841857,
  usedJSHeapSize: 12417637
} */

usedJSHeapSize означает: объем памяти, занимаемый объектами JS (включая внутренние объекты движка V8).
totalJSHeapSize означает: доступная память
jsHeapSizeLimit означает: ограничение размера памяти

как правило,usedJSHeapSizeне может быть больше, чемtotalJSHeapSize, если больше , может иметь место утечка памяти.

performance.getEntries()

Когда браузер получает веб-страницу, он отправляет HTTP-запрос каждому объекту (файлу сценария, таблице стилей, файлу изображения и т. д.) на веб-странице.performance.getEntriesМетод возвращает массив как массивPerformanceEntryСписок, временная статистика для этих запросов, сколько запросов и сколько элементов будет в возвращаемом массиве

name: ссылка на ресурс
duration: общее время, затраченное на ресурсы (включая время ожидания, время запроса и время ответа, эквивалентно responseEnd - startTime)

entryType: Тип ресурса, структура объекта в массиве у разных типов entryType тоже разная:

ценность	объект этого типа	описывать
mark	PerformanceMark	Объекты, добавленные в массив с помощью метода mark()
measure	PerformanceMeasure	Объекты, добавленные в массив с помощью метода Measure()
paint	PerformancePaintTiming	Значение: first-paint — первая краска, first-contentful-paint — первая краска содержимого.
resource	PerformanceResourceTiming	Время загрузки всех ресурсов, наиболее полезных
navigation	PerformanceNavigationTiming	В настоящее время не поддерживается, кроме Chrome и Opera, информация, связанная с навигацией
frame	PerformanceFrameTiming	Браузеры в настоящее время не поддерживаются

initiatorType: Как инициировать запрос, начальный тип (обратите внимание, что этот тип не является точным, например, ресурс изображения в css будет отображать css с этим значением, поэтому рекомендуется использовать суффикс имени в имени)

Инициирующий объект	ценность	описывать
a Element	ссылка/скрипт/img/iframe и т.д.	Ресурс загружается по тегу, значением является строчная форма имени узла
a CSS resource	css	Ресурсы, загруженные через стили css, такие как фоновые URL-адреса для загрузки ресурсов.
a XMLHttpRequest object	xmlhttprequest/fetch	Ресурсы загружаются через xhr
a PerformanceNavigationTiming object	navigation	Возвращается, когда объект PerformanceNavigationTiming

performance.getEntriesByType()

метод возвращает список getEntries заданного типаоткрыть страницу

Этот код можно запустить в консоли DevTools. он будет использоватьResource Timing API(API Resource Timing) для получения всех ресурсов. Затем он фильтрует записи, ищаlogo-1024px.pngназвание записи. Если найдено, возвращается соответствующая информация.

performance
  .getEntriesByType('resource')
  .filter(item => item.name.includes('logo-1024px.png'))

Уведомление:
возврат ресурсаconnectEndи т.д. связанные поля неUnixвременная метка, ноDOMHighResTimeStamp.MDN PerformanceResourceTiming

DOMHighResTimeStampэто двойной тип, используемый для хранения значений времени. Значение может быть дискретным моментом времени или разницей во времени между двумя дискретными моментами времени. T указывается в миллисекундах мс (миллисекундах) и должно быть с точностью до 5 микросекунд мкс (микросекунд). Однако, если браузер не может предоставить значение времени с точностью до 5 микросекунд (например, из-за аппаратных или программных ограничений), браузер может представить значение в миллисекундах с точностью до миллисекунды.

Панель Lighthouse (Аудит)

Описание от Google: Lighthouse — это инструмент автоматизации с открытым исходным кодом для улучшения качества веб-приложений. Вы можете запустить его как расширение Chrome или из командной строки. Вы даете Lighthouse URL-адрес, который хотите проверить, он проведет серию тестов для этой страницы, а затем сгенерирует отчет о производительности страницы.

Анализирует загрузку страницы и дает предложения по улучшению производительности страницы.

Для ленивых👍

Есть 5 индикаторов:

Performanceпредставление
accessibilityДоступность
Best PracticeПользовательский опыт
SEOSEO-оптимизация
Progressive Web AppСовместимость страниц с PWA

Панель безопасности

Безопасность для обнаружения лицевых страниц

Панель может различать два типа небезопасных страниц:

Если запрошенная страница обслуживается по протоколу HTTP, основной источник помечается как небезопасный.
Если запрошенная страница была получена по протоколу HTTPS, но затем страница продолжает получать содержимое из других источников по протоколу HTTP, страница по-прежнему помечается как небезопасная. Это известно как страница со смешанным содержимым, а страницы со смешанным содержимым защищены лишь частично, поскольку содержимое HTTP (передача незашифрованного содержимого с использованием открытого текста) может быть перехвачено и уязвимо для атак типа «человек посередине». Например, 163, хотя сертификат действителен, но на странице есть некоторые ресурсы http:

Командный ультимейт

При открытой консоли нажмите комбинацию клавишCtrl + Shift + P / Command + Shift + PОткройте меню «Команда», и тогда вы можете делать все, что хотите~

снимок экрана

когда ты только хочешьDOMПри создании снимка экрана узла вам может понадобиться использовать другие инструменты для работы в течение длительного времени.Используя консоль, вы можете напрямую выбрать узел, который хотите сделать снимок экрана, открытьCommandменю и использование节点截图просто хорошо

Перехватить конкретный узел:Screenshot Capture node screenshot
Полноэкранный скриншот:Screenshot Capture full size screenshot

Покрытие CSS/JS

запросы средств массовой информации

Медиа-запросы — неотъемлемая часть адаптивного веб-дизайна. В режиме устройства в Chrome Devtools щелкните трехточечное меню,Show Media queriesвключить:

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

Ссылаться на

Почему Chrome Network, Size и Time имеют две строки параметров
Инструменты разработчика Chrome
Google chrome-devtools
Подробное использование инструментов разработчика Chrome — производительность
Новое руководство пользователя Chrome Devtool Performance
Руководство по анализу производительности страницы в Chrome
MDN Performance
Определение производительности веб-страницы — производительность
Подробный процесс рендеринга в браузере
Chrome устанавливает точки останова в разных позах
Network Summary

Панель консоли

console.clear()

console.log(), info(), warn(), error()

console.time(), timeEnd()

console.count()

console.trace()

console.table()

console.dir()

console.assert()

console.group(), groupEnd()

$Селектор

$_

$0,$1...$4

$和?

$x

keys(), values()

copy()

Панель элементов

отладка css

style

computed

Изменить значение элемента

HTML-отладка

Сан-операция

сохранить элемент в глобальную временную переменную

прокрутить до узла

3D-вид для конкретных краев

Точки останова DOM

Сетевая панель

(1, 2) Элементы управления, область фильтров

(3) Область обзора

(4) Область таблицы запросов

перезапуститьxhrпросить

Просмотр информации, связанной с HTTP

Почему Size и Time имеют две строки параметров?

О столбце Размер

О столбце «Время»

Waterfall

(5) Сводная область

Оптимизация сети с помощью панели «Сеть»

поставить в очередь или остановить блокировку

Время получения первого байта медленное

медленная загрузка

Панель источников

Пользовательские фрагменты кода Фрагменты кода

установить точку останова

панель точек останова

перерыв в указанном месте

прерывание глобального события

модель черного ящика

Точки останова DOM

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

Основные области панели разделены:

начать запись

(1) управляет областью панели управления

(2) Обзор области обзора

FPS

CPU

Цветовое разделение диаграммы областей ресурсов процессора:

NET

(3) Диаграмма пламени (панель резьбы)

Я вижу несколько пунктирных линий:

Main

(4) Область сведений

объект window.performance

performance API

Несколько полезных API

метод performance.now()

performance.navigation

performance.timing

performance.memory

performance.getEntries()

performance.getEntriesByType()

Панель Lighthouse (Аудит)

Панель безопасности

Командный ультимейт

снимок экрана

Покрытие CSS/JS

запросы средств массовой информации

Ссылаться на

`$`Селектор

`$_`

`$0,$1...$4`

`$和?`

перезапустить`xhr`просить