Вы знаете все эти приемы в Chrome DevTools?

Введение 🏂

Как разработчик, я обычно используюChrome devtoolsДа, но, возможно, многие студенты, такие как я, обычно используютConsoleиElementsпанель.

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

Заказ(Command) меню 🏈

Меню «Команды» является наиболее часто используемым и будет использоваться много раз в этой статье, поэтому сначала поговорим о том, как его открыть:

в соответствии сCmd + Shift + P(при использованииWindows, затем нажмитеCtrl + Shift + P), чтобы открыть меню команд.

снимок экранаDOMэлемент 🏉

когда ты просто хочешь чего-то особенногоDOMПри создании снимка экрана узла вам может понадобиться использовать другие инструменты в течение длительного времени, но теперь вы можете напрямую выбрать узел и открыть команду (Command) меню и использование节点截图Вот и все.Команда для перехвата определенного узла, соответствующего приведенному выше рисунку,Screenshot Capture node screenshot.

перехватывать конкретныеDOMПример элемента:

Не только это, вы также можете сделать это таким образом全屏截图:пройти черезScreenshot Capture full size screenshotЗаказ.

❝

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

❞

В соответствии со скриншотом полноэкранного примера:

Используйте значение последней операции в консоли 🎃

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

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

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

Редактируйте любой текст на странице ✍

Введите в консолиdocument.body.contentEditable="true"илиdocument.designMode = 'on'Вы можете редактировать веб-страницу.На самом деле, это более практично, например, если вы хотите протестироватьDOMЕсли текст узла слишком длинный, не будет ли стиль сбивать с толку, или если вы хотите напрямую изменить элементы страницы, чтобы удовлетворить некоторые потребности бизнеса. (Я был вElementsПанели модифицируются по одной,)

сетевая панель (Network) режим слайд-шоу 🌇

запускатьNetworkпод панельюCapture screenshotsВы можете делать снимки экрана во время загрузки страницы. немного幻灯片ощущение.Щелкните скриншот каждого кадра, чтобы отобразить сетевой запрос, который происходит в соответствующий момент. Это визуальное представление сделает вас более осведомленными о сетевых запросах, которые происходят в каждый момент времени.

Проверка анимации 🎏

DevToolsЕсть панель анимации, которая по умолчанию отключена, и многие могут не знать об этой функции. это позволяет вам контролировать и манипулироватьCSSанимацию и визуализировать, как эта анимация работает.

Чтобы открыть эту панель, вы можетеDevToolsВерхнее правое меню →More toolsоткрыть вAnimations:

по умолчанию,DevToolsБудет «слушать» анимацию. После срабатывания они будут добавлены в список. Вы можете увидеть, как отображаются эти анимационные блоки. Что касается самой анимации,DevToolsпокажет нам, какие свойства меняются, например.background-colorилиtransform.

Затем мы можем изменить эту анимацию, перетащив мышь или отрегулировав временную шкалу:

Увеличение/уменьшение значений свойств CSS 🃏

В качестве front-end разработки обычно необходимо пройтиElementsпанель для поиска элемента и егоcssстиль. иногда корректировать пикселиpxЭто будет немного более хлопотно, тогда вы можете использовать горячие клавиши, которые помогут вам это сделать:

* 增量0.1
  * Mac： Option +向上和Option +向下
  * Windows： Alt +向上和Alt +向下
* 增量1
  * Mac：向上+向下
  * Windows：向上+向下
* 增量10
  * Mac：⇧+向上和⇧+向下
  * Windows：⇧+向上和⇧+向下
* 递增100
  * Mac： ⌘+向上和⌘+向下
  * Windows： Ctrl +向上和Ctrl +向下

Протестируйте на слабых устройствах и слабых сетевых условиях 📱

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

существуетChrome DevToolsможно легко настроить вCPUфункция и网络速度. Таким образом, мы можем протестировать производительность веб-приложения и оптимизировать его соответствующим образом.

Конкретный метод открытия:Chrome DevToolsпрошедшийCMD/Ctrl + Shift + pОткройте командное меню. затем введитеShow PerformanceОткройте панель производительности.

копирование и сохранение 📜

В процессе отладки у нас всегдаDev Toolsданные внутри复制или保存На самом деле, у них тоже есть свои хитрости!

copy()

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

Store as global variable

если вconsoleГруппа данных печатается, и если вы хотите выполнить дополнительные операции с этой группой данных, вы можете сохранить ее как глобальную переменную. Просто щелкните его правой кнопкой мыши и выберите параметр «Сохранить как глобальную переменную».При первом использовании создаетtemp1переменная, созданная во второй разtemp2,в третий раз ... . Используя эти переменные для управления соответствующими данными, вам не нужно беспокоиться о том, что вы повлияете на их исходные значения.

Настройте инструменты разработки 🌈

Наиболее часто используетсяChrome 主题Это может быть белый/черный, но после долгого использования я неизбежно хочу попробовать что-то вродеIDEПереключите темы, а также.

открытый путь

• Для начала нужно включить экспериментальный режимAllow custom UI themes
  • Введите следующее в адресную строкуurl

  chrome://flags/#enable-devtools-experiments # 启用实验功能
  

  • Включите экспериментальные функции и перезапустите браузер.
  • Используйте сочетания клавиш в консолиF1Откройте настройки, переключитесь наExperimentsОпции
  • включитьAllow custom UI themes
• отChromeустановка магазинаMaterial DevTools Theme Collectionрасширение
• Просто выберите тему, которая вам нравится

Покрытие CSS/JS ✅

Chrome DevToolsсерединаCoverageФункции могут помочь нам увидеть покрытие нашего кода.

открытый путь

• Откройте панель отладки, используйте горячую клавишуshift+command+P （mac）входитьShow CoverageПоднимите соответствующую панель
• нажмитеreloadкнопка, чтобы начать обнаружение
• Щелкните соответствующий файл, чтобы просмотреть конкретное покрытие (используется зеленый код, красный код не используется)

Наконец, я также использую движущееся изображение, чтобы показать следующее:

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

В нормальном процессе разработки мы часто имеем некоторыеJavaScriptКод хочет быть вChrome Devtoolsотладка, прямо вconsoleЗаписыватьDevtoolsВы можете получить эти фрагменты кода, не переходя наgoogle, в самый разChrome Devtoolобеспечивает эту функциональность.

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

Копировать изображение как URI данных 🦊

открытый путь

• выберитеNetworkпанель
• Выберите на панели ресурсовImg
• Щелкните правой кнопкой мыши, чтобы скопировать его как данныеURI(закодировано какbase 64)

Запросы СМИ 🔭

Медиа-запросы — неотъемлемая часть адаптивного веб-дизайна. существуетChrome Devtoolsсередина设备模式, в трехточечном меню нажмитеShow Media queriesвключить: DevtoolsМедиа-запросы обнаруживаются в таблице стилей и отображаются в виде цветных полос на верхней линейке:Как это использовать? Это на самом деле довольно просто:

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

ключи/значения 🎯

этоDevtoolsОбеспечивает быстрый взгляд на объектkey,valuesизAPI. Он также очень прост в использовании:

❝

Вы могли бы сказатьObject.keys()иObject.values()Этого тоже можно добиться, но не проще ли 🤠

❞

стол 🦐

DevtoolsПредусмотрен для регистрации массива объектов в виде таблицыAPI: