Оптимизация веб-отладки — неполное руководство по инструментам разработчика Chrome

1. Введение

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

1. Сегодня оchromeГайд, я его тоже написал с учебным настроем, не полный, надеюсь все обратят внимание и поймут! Узнать большеchrome, Каждый должен учиться самостоятельно!
2. Если сегодня что-то не так, плохо написано или есть какие-либо другие рекомендации, я очень надеюсь и приветствую всех, кто комментирует и рекомендует, и каждый может обмениваться мнениями, учиться друг у друга и добиваться прогресса друг с другом!
3. Позвольте мне упомянуть, что это оптимизация отладки Chrome. Вообще говоря, в повседневной разработке часто используются следующие панели инструментов разработчика:element,console,sources,network,performance(timeline). Эти пятеро, я чувствую, что они пять братьев панацеи! Помимо этих пяти, другие панели могут использоваться нечасто, но их необходимо знать и знать.

2.element

Это должно часто использоваться всеми, особенно при вырезании изображений для настройки стиля, я кратко скажу это по номеру на картинке!
一: Это элемент на странице. Когда на него наводится мышь, он появляется на странице.（二）Вариации облегчают поиск элементов!
三: Нажмите эту стрелку, чтобы быстро выбрать элементы на странице!
四: перейдите в режим адаптации мобильного терминала, как показано на рисунке ниже. Вы можете изменить различные модели или нажать «Изменить», чтобы добавить другие модели или настроить модели! Значок «Онлайн» рядом с ним предназначен для имитации различных ситуаций в сети, а значок рядом с «Онлайн» предназначен для переключения между горизонтальным и вертикальным экранами! Вот краткое упоминание, каждый может использовать его по мере необходимости!
online

五: Здесь можно свободно изменять все связанные стили выбранного элемента, стиль страницы!
六: Все рассчитанные стили выбранного элемента (некоторые стили будут повторяться, перезаписываться, а здесь отображаются переопределенные стили) и блочная модель!
七: Событие выбранного элемента (это, кажется, все, что вам нужно знать, по крайней мере, я им не пользовался)

Другие общие функции

1. Выбор цвета

2. Измените способ отображения цвета

3. Фильтрация состояния элемента

Обратите внимание на страницуТорговый Банк Китая’

4.html отладка макета

Обратите внимание на страницуВипшоп’

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

5. Отладка кривой анимации css3

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

3.console

Консольный интерфейс часто используется для разработки, при отладке JS-кода часто необходимо выводить переменные или узлы в консоль. Для личного использования, помимо написания jS в панели управления, чаще всего используется кнопка, указанная на картинке выше, и панель очищается нажатием на нее. Это чувство лучше, чемconsole.clear()Быстрее.
Ниже приводится краткое описание ситуации, в которой я обычно использую консоль.

console.log

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

alert({1:1});
console.log({1:1})
alert(document.getElementById("attribute-box"));
console.log(document.getElementById("attribute-box"))

alert

console

Многие люди могут подумать, чтоconsole.logПолучает только один параметр, а не фактический, например, стилизованный вывод

Я думаю, что многие люди знают, как использоватьconsole.log. ноconsole.info,console.warn,console.error, Эти три человека не очень часто используются, ниже приведена простая демонстрация!

console.log('这是普通信息！');
console.info('这是普通信息！');
console.warn('这是警告信息！');
console.error('这是错误信息！');

PS: эта версия немного странная, раньшеconsole.infoЭтот API имеет синий логотип спереди, версия, которую я использую сейчас иconsole.logведет себя точно так же

console.time и console.timeEnd

console.timeиconsole.timeEndВторой наиболее часто используемый API предназначен в основном для определения времени выполнения фрагмента кода.

console.time();
for(let i=0;i<10000;i++){
    
}
console.timeEnd();

console.table

console.tableОбычное использование в основном для более интуитивного отображения объектов или массивов.

let arr=[
    {a:1,b:2,c:3},
{a:1,b:4,c:3},
{a:3,b:2,c:3},
{a:4,b:2,c:3},
{a:1,b:5,c:3},
{a:1,b:9,c:3},
{a:1,b:2,c:7}
];
console.table(arr)

let arr1=[1,2,3,4,5]
console.table(arr1)

let obj2={a:1,b:2,c:3}
console.table(obj2)

console.count

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

console.assert

console.assertПолучите два параметра, первый параметр-это условие оценки, а второй параметр-это подсказка.Когда условие ложно, оно вызовет сообщение об ошибке!

console.group и console.groupEnd

console.groupиconsole.groupEndОтображение данных также более интуитивно понятно, но сценариев использования не так много. Я тоже это знаю, но я не использовал это в разработке!

console.group("1");
console.log("1模块的信息 11111111...");
console.log("1模块的信息 11111111...");
console.log("1模块的信息 11111111...");
console.groupEnd();
console.group("2");
console.log("2模块的信息 22222222...");
console.log("2模块的信息 22222222...");
console.groupEnd();

$

Когда вы видите $, не думайте, что это jquery, на самом деле это какой-то API, который поставляется с браузером. Это удобнее в отладке!

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

$: возвращает первый подходящий элемент, эквивалентный document.querySelector.

?: возвращает все подходящие элементы, эквивалентные document.querySelectorAll.

Находите и отслеживайте события

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

monitorEventsЦель состоит в том, чтобы отслеживать все события, связанные с выбранными вами элементами, и печатать их на консоли при запуске событий.

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

4.network

networkТо есть всякий раз, когда отправляется запрос, он будет записан здесь, будь то файл запроса или запрос ajax. Также используется много сцен.Ниже представлена ​​панель.Вы можете увидеть, как ее использовать.Это очень легко понять!

Нажмите на запрос, чтобы отобразить различную информацию, такую ​​как запрошенные ресурсы справа, просто посмотрите на ситуацию ниже!

Во-первых, запрашивается некоторая информация, основные из которых требуют внимания, следующие!

Затем запросите возвращенную информацию

вернуть как JSON

Файлы cookie и тайминги также являются запрашиваемой информацией, но я обычно не обращаю на них особого внимания, поэтому не буду здесь больше говорить! Для определения времени вы можете обратиться к этой статье:Подробная информация о времени в браузере Chrome

5.Sources

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

Этот шаг заключается в том, чтобы открыть файл, щелкнуть номер строки любой строки, и появится точка останова!

2.отладка отладчика

Как видите, кнопка в красной рамке на картинке выше, просто скажу по номеру:
1. Остановить текущую отладку точки останова
2. Продолжайте выполнять следующую строку кода, (1. Этот метод не войдет в функцию, 2. Горячая клавиша этого метода — f10)
3. Перейти к функции (клавиша быстрого доступа для этого метода — f11)
4. Выйти из текущей функции
5. Отключите все точки останова и остановите любую отладку.
6. Следует ли прерывать отладку при возникновении исключения во время работы программы.

3. Посмотреть значение в отладке

Не говори, посмотри на картинку

Что касается этих, то я обычно не обращал на них внимания, мне нужно найти информацию в Интернете самостоятельно, я не буду говорить об этом здесь!

3. Поиск и переключение файлов

Грубо говоря, эта функция заключается в использовании сочетания клавиш ctrl+p и ввода.

4. Отформатируйте код

Это не более того, просто нажмите

6.performance(timeline)

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

Сначала объясните, четыре области

1. Панель управления (элементы управления)

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

2. Обзор (Обзор)

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

1.FPS
Чем выше зеленая полоса, тем выше значение FPS, тем плавнее выглядит пользователь и тем лучше его впечатления. Если он слишком мал, пользователь будет чувствовать себя застрявшим

2.CPU
На этой диаграмме с областями показано, какие события потребляют ресурсы ЦП.

3.NET
Форма представления страницы в определенный момент (отображается на экране в определенный момент)! Переместите мышь в любое место в области FPS, CPU или NET, и отобразится скриншот поверхности узла времени. Двигайте мышью влево и вправо, вы можете повторно отправить запись экрана в это время и использовать это для анализа деталей каждой анимации или скорости загрузки страницы!

3. Диаграмма пламени

Эта панель, онлайн поговорка: визуальный стек ЦП (стек) информационных записей. Я никогда не был в контакте с этой областью, и сейчас все еще туманно.Вы можете найти информацию и учебники в Интернете самостоятельно. Я лично считаю, что это вообще бесполезно, поэтому пока не обращал внимания на эту штуку!

4. Детали (Detail)

Эта панель показывает более подробную информацию о текущем выбранном периоде времени! При выборе определенного события на панели отображается более подробная информация о событии.

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

Эта картинка — один из интуитивных способов набора узких мест! Например, на картинке выше видно, что больше всего времени занимает Scripting, то есть выполнение js, которое может нуждаться в оптимизации!

7.application

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

1.cookie

2.локальное хранилище и локальная сессия

3. Кэш

4.IndexedDB

5.Frames

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

Я лично думаю, что это достаточно знать, и это редко используется.

8. Рекомендации по плагинам

Что касается плагинов или расширений chorem, я использую только некоторые. Ниже приведена простая рекомендация. Используйте ее по мере необходимости. Если вы не удовлетворены, вы можете найти ее в магазине Google Play.

HostAdmin

Инструмент для управления хостами

JSON Editor

инструмент форматирования json

Генератор QR-кода

Это преобразование URL-адреса текущей страницы в QR-код.Сценарий использования заключается в том, что когда вы хотите использовать мобильный телефон для тестирования, вам лень вводить весь URL-адрес на своем мобильном телефоне, и вы можете напрямую сканировать код для доступа к нему на вашем мобильном телефоне! Как показано ниже

vue-devtools

С этим вы можете увидеть следующее расширение, магия, разработанная Vue, отладка станет очень удобной! (Не оставайтесь в этой панели долго с этим плагином, страница может вылететь)

Веб-интерфейсный помощник (FeHelper)

Performance-Analyser

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

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

перевод слова

Английский является проблемой для многих программистов, и этот перевод слова может очень хорошо помочь всем!

Плагин Nuggets для Chrome

С помощью этого плагина Nuggets будет каждый день отправлять статьи и проекты в соответствии со своими настройками! (В последние дни перед публикацией этот плагин был переработан, и он будет отличаться от картинки, поэтому картинка не будет обрезана, просто обратите внимание)

9. Справочные ссылки

Классификация эссе — серия инструментов разработчика Chrome
Новое руководство пользователя Chrome Devtool Performance
Сводка по отладке внешнего интерфейса браузера Chrome
Консоль, которую вы не знаете
Навыки использования Chrome (вы не будете разочарованы, когда прочтете это)

10. Резюме

Ну, это неполный гайд по хрому, указанное выше содержание может составлять 20-40% функций хрома, но использование в повседневной разработке может составлять 80%. И иногда эффективность разработки зависит не только от мастерства редактора, владения кодом, но и от плавного использования браузера, что является неотъемлемой частью повышения эффективности! Уметь пользоваться Chrome — это то же самое, что писать код. Чтобы привыкнуть к его использованию, требуется больше практики, а практика — залог успеха!
Наконец, если вы чувствуете, что я написал что-то не так или написал плохо, есть ли у вас какие-либо другие предложения и рекомендуемые инструменты! Дополнения очень приветствуются. Я надеюсь, что мы сможем обмениваться мнениями, учиться друг у друга и добиваться прогресса вместе!

------------------------- Великолепная разделительная линия --------------------
Хотите узнать больше, обратите внимание на мой публичный аккаунт WeChat: В ожидании книжного магазина