«Практические советы» Советы по отладке Chrome DevTools, эффективность 🚀🚀🚀

Chrome

предисловие

Эффективность Вверх, Вверх🚀🚀🚀, чтобы у тебя было больше времени на учебу и общение с девушкой✅

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

Эта статья посвящена Chrome DevTools. Благодаря небольшим советам в Chrome DevTools эти советы могут помочь нам сэкономить много времени и напрямую повысить эффективность нашей работы!

Что вы знаете о различных операциях Chrome DevTools?

❝

Сайт:umaar.com/dev-tips/

❞
❝

Буклет о наггетсах:Хитрости отладки Chrome, о которых вы не знали

❞

Это мой основной способ научиться эффективно использовать Chrome DevTools.Одним из них является буклет Nuggets, который очень полезен с самого начала. Другой — иностранный веб-сайт, на котором"200+ Tips".

Далее резюмирую еще несколько практических ✅

❝

Предупреждение о нескольких изображениях

❞

Научитесь использовать команду

Как открыть командное меню

то, что мы видим непосредственноDevToolsФункция — это только часть, как открыть больше функций?

CommandМеню может помочь нам быстро найти эти скрытые функции, поэтому оно само по себе важно.

❝

Открытый метод:

  • [ Ctrl] + [Shift]+[I]ОткрытьChromeотладить хлеб

  • существуетChromeПри включенной отладке нажмите [Ctrl] + [Shift] + [P](Мак:[⌘] + [Shift]+ [P] )

❞

Например, часто меняется тема

theme
theme

Как просмотреть сочетания клавиш, учу просматривать сочетания клавиш за один раз

Иногда, когда смотришь на окружающих тебя людей, когда они используют горячие клавиши, они очень красивые? Ты можешь быть таким же красивым, как он, такой же 🚀🚀🚀

Command-use-setting
Command-use-setting

Новая поза для скриншотов

Вам по-прежнему приходится каждый раз открывать программу QQ или скриншот, на этот раз она вам не нужна, она значительно повысит вашу эффективность 🚀🚀🚀

пройти черезCapture full size screenshotЗаказ. Обратите внимание, что это полноэкранный режим, а не часть встроенной страницы.

Command-use-Capture
Command-use-Capture

Конечно, в Command слишком много функций, которые ждут, когда вы исследуете и открываете новые континенты🚀🚀🚀

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

Получить фрагмент HTML-кода

copy-html-element-clipboard
copy-html-element-clipboard

Конечно, есть более простые операции

  • Выберите нужный элемент DOM, щелкните правой кнопкой мыши, выберите «Копировать элемент в копию».
copy-element
copy-element

Получить стили элемента DOM

Вы все еще тупо по одному копируете, в этот раз копируете все стили сразу

copy-element-style
copy-element-style

Вас когда-нибудь беспокоила корректировка кода стиля псевдокласса?

pseudo-trigger
pseudo-trigger

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

Иногда хочется посмотреть какие события привязаны к DOM узлу, и где прописана функция обратного вызова, если проект очень большой то очень неудобно его искать, поэтому как повысить эффективность, ниже👇

addEvent-listener
addEvent-listener

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

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

color-get
color-get

Развернуть все дочерние узлы на панели элементов

Иногда вы хотите просмотреть иерархические отношения DOM, то есть отношения включения дочерних элементов, и щелкнуть каскад один за другим.▶Кнопка слишком медленная, лучше использовать узел правой кнопкой мышиexpand recursivelyЗаказ:

open-DOM
open-DOM

Значительно улучшена эффективность 🚀🚀🚀

Самый интуитивный способ увидеть иерархию dom?

see-dom
see-dom

Неудобно ли настраивать структуру дома в панели Elements?

Иногда вы хотите изменить результаты dom, но неудобно работать с панелью управления Element, так как же работать более эффективно?

Console-Edit-element
Console-Edit-element

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

Функции, которые могут выполнять общие задачи, такие как выборDOMэлементы, запускать события, смотреть события, вDOMдобавление и удаление элементов и т. д.

$(selector, [startNode]): одиночный селектор

$内置命令
$ встроенная команда

?（选择器，[startNode]）: полный селектор

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

$('a')
$内置命令2
$ встроенная команда 2

getEventListeners` получает связанные события указанного объекта

getEventListeners(object)Возвращает прослушиватели событий, зарегистрированные для указанного объекта. Возвращаемое значение — это объект, содержащий каждый зарегистрированный тип события (например,clickилиkeydown) множество. Членами каждого массива являются объекты, описывающие слушателей, зарегистрированных для каждого типа. Применение:

getEventListeners(document);

$0

существуетChromeизElementsпанель,$0Для нашего текущего выбораhtmlСсылка на узел.

Конечно,$1является ссылкой на последний выбранный нами узел,$2является ссылкой на узел, выбранный перед этим, и т. д. до$4

Console-$
Console-$

$_

Во время отладки вы часто проверяете значение некоторых переменных, печатая, но что, если вы хотите увидеть результат последнего выполнения? Опять потеряли выражение?

В этот момент$_пригодился,$_результат последнего выполнения"Цитировать":

save-last-result
save-last-result

console.table() 

var data = {code:200,content:[{'品名': '杜雷斯', '数量': 4}, {'品名': '冈本', '数量': 3}]};
console.table(data.content);

console.time()

Эффективность выполнения теста:

нетPerformance APIТочный, но лучше, чем простой в использовании.

let i = 0;
console.time("While loop");
while (i < 1000000) {
  i++;
}
console.timeEnd("While loop");
console.time("For loop");
for (i = 0; i < 1000000; i++) {
  // For Loop
}
console.timeEnd("For loop");

console.dir()

РаспечататьDOMузел объекта

console.dir(document)

Посмотрите на эффект выше 🚀🚀🚀

Console-dir
Console-dir

Осталось много, иди и исследуй сам 🚀🚀🚀

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

Измените свои файлы в рабочей области

Вы перетащите папку проекта прямо наSourceпанель,DevToolsВносимые вами изменения будут синхронизированы с системными файлами.

workpace
workpace

Иногда это может повысить определенную эффективность 🚀🚀🚀

Проверить анимацию

  • Проверьте анимацию. Вы хотите замедлить воспроизведение, воспроизвести или проверить исходный код группы анимации.
  • Изменить анимацию. Вы хотите изменить время, задержку, продолжительность или смещение ключевого кадра группы анимации. Редактирование кривых Безье и ключевых кадров в настоящее время не поддерживается.

Как это работает?来来来，我们看一看

  • Сочетание клавиш ctrl+shift+p , откройте меню команд, введите Drawer: Show Animations.
Command-use-Animate
Command-use-Animate

DOMотладка точки останова

Source-check
Source-check

Как показано выше:"Слушайте тег формы и запускайте отладку точки останова, когда поле ввода получает фокус"

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

Проверьте некоторые конкретные запросы, вы использовали фильтры?

Иногда вы хотите просмотреть некоторые типы файлов, такие как файлы Img, js.

Иногда вы хотите увидеть, меньше ли запрошенного ресурса 100 КБ.

Иногда вы хотите увидеть, был ли запрос ресурса успешным или запрос не выполнен.

Вышеупомянутые вопросы и т. д., все о панели управления сетью, тогда мы можем использовать фильтр

Network控制面板
Панель управления сетью

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

  • Стрелка с цифрой 2 тоже действует как фильтр, но быстрее.

  • Число 3 указывает, где вызывается файл ресурсов, и щелкнув его, вы перейдете к этому местоположению.

  • Водопад со стрелкой номер 4, вы можете более четко увидеть время запроса ресурса на каждом этапе, например, поиск DNS, предлагаемую ссылку DNS, процесс SSL, время отправки запроса, время загрузки определенного ресурса, как показано ниже👇

waterfall
waterfall

Итак, давайте посмотрим, как это работает:

Network-all
Network-all

Что делать, если я не хочу загружать библиотеку ресурсов?

Если модифицировать его через собственный исходный код, то он выйдет наружу, так что эффективность явно очень низкая, проходим"Block request URL"

NetWork-block-request-url
NetWork-block-request-url

Эффективность не Вверх, Вверх🚀🚀🚀

В процессе мобильной разработки хочу смоделировать сеть 3G, 4G, 2G, без проблем

Иногда при работе на мобильном терминале хочется посмотреть как колеблется скорость сети в вашем проекте.Например когда вы на 3G много кусков загрузки на первом экране.Нужно ли вводить скелетная диаграмма для оптимизации взаимодействия с пользователем? Тогда вы, как это обнаружить, смотрите ниже👇

change-wifi
change-wifi
  • Откройте сеть панели управления
  • Найдите кнопку онлайн и выберите нужное сетевое окружение.

Запросите ресурсы для получения более подробной информации в сетевой панели

Иногда в проекте будет много проблем. Например, запрос ресурсов одна из них. Вам нужна более полная информация, чтобы вы могли более эффективно диагностировать проблему. Что вам нужно сделать?👇

Network-add-someting
Network-add-someting

Под этой страницей щелкните правой кнопкой мыши, чтобы добавить информацию, которую вы хотите просмотреть, это сделает вас более эффективным🚀🚀🚀

❝

В панели управления NetWork есть и другие функции, например нужно ли брать запрос из кеша, то есть слово Disable cache

❞

Панель слоев

Это очень полезно для просмотра разделения, рисования, фрагментации и растеризации слоев на этапе рендеринга в браузере.Потом я покажу вам, как с этим работать👇

Layers-make
Layers-make

Далее как проверить:

Layers-use
Layers-use

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

[1.1W word] Читы на девушку - как работает браузер (процесс рендеринга)

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

🚀🚀🚀 Если этого недостаточно, идите и исследуйте сами.

❤️ Всем спасибо

Если вы считаете этот контент полезным:

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

  2. Вы можете поделиться со мной своими мыслями в области комментариев, и вы также можете записать свой мыслительный процесс в области комментариев.

  3. Если вы считаете, что это хорошо, вы также можете прочитать предыдущие статьи:

    [Галантные товары👍] От детальной работы массива js до анализа array.js в v8

    [Практично 👍] Порекомендуйте несколько отличных интерфейсных веб-сайтов.

    [1.2W word👍] Читы на девушку - как работает браузер (Часть 1)

    [1.1W word] Читы на девушку - как работает браузер (процесс рендеринга)

    [Предложение👍] Продолжайте с 100 ответными вопросами JS, кислыми и крутыми (всего 1,8 Вт слов + консолидация основы JS)

    (Рекомендуется интенсивное чтение) Я вышлю вам 54 вопроса для собеседования по JavaScript/a>

    9 основных операций связанного списка "алгоритмы и структуры данных"

Категории