Инструменты разработчика, несомненно, являются одним из самых важных инструментов в наборе инструментов веб-разработчика. Определенно лучший (и практически единственный) способ отладки внешнего интерфейса.
Из всех браузеров и всех вариантов DevTools (особенно трех, если быть точным) наиболее популярны Chrome DevTools. Они помогают отлаживать код во многих браузерах на основе Chromium, таких как Chrome, Edge или Brave, и даже во многих других проектах на основе Chromium.
Итак, вы, скорее всего, знакомы с основным рабочим процессом DevTools. Нажмите кнопку или клавишу, и вы вошли. Оттуда вы, скорее всего, в конечном итоге проверите консоль, поиграете с JavaScript и DOM и, возможно, проверите сетевые запросы или вкладку хранилища. Все это почти одинаково во всех браузерах.
Однако знаете ли вы, что, по крайней мере, в Chrome DevTools есть много малоизвестных функций, которые могут спасти жизнь вашего разработчика или, по крайней мере, упростить рабочий процесс? Ну, а если нет, то вот 10 из них!
1. Замораживание
Начнем с бэнгера!
Вы когда-нибудь сталкивались с ситуацией, когда, например, вам нужно было протестировать поведение компонента при наведении курсора на вашем веб-сайте, но он контролировался JS, поэтому состояние CSS → Toggle Element недоступно? Вы также не можете переместить указатель с элемента, так как он вернется к поведению по умолчанию.
Итак, вы застряли, и единственным решением является редактирование кода, который может довольно быстро стать громоздким для такой быстрой проверки. Так есть ли другое решение?
Оказывается, есть — сочетание клавиш для паузы в отладчике! Просто откройте DevTools, перейдите на вкладку Источники, запустите нужное вам состояние и нажмите F8. Теперь вы должны быть в отладчике, и ваше состояние должно оставаться замороженным!
2. Палитра команд
Далее у нас есть что-то большое, хотя и несколько скрытое. Знаете ли вы, что у DevTools есть собственная палитра команд? Его можно запустить с помощью Ctrl Shift P (так же, как в конфигурации VS Code по умолчанию!) или из вертикального меню с тремя точками (Настройка и управление DevTools) → Выполнить команду.
Палитра команд имеет много отличных сочетаний клавиш, которые вы узнаете, когда освоитесь с ней. Мои личные фавориты снова связаны с отладчиком — Отключить JavaScript и Включить JavaScript.
3. Эмуляция
Не секрет, что в DevTools полно инструментов эмуляции. Скорее всего, вы знаете и использовали инструменты регулирования сети (Сеть → Верхняя строка меню → Раскрывающееся меню Без регулирования) или «панель инструментов устройства». (слева от вкладок DevTools). Но, конечно, есть еще!
Снова из вертикального трехточечного меню → Дополнительные инструменты → например, Визуализация или Датчики. Вы также можете использовать палитру команд, если знаете, что ищете.
В открытом ящике Rendering вы можете управлять некоторыми переключателями отладки рендеринга и эмулировать медиафайлы CSS. Скорее всего, вы отметитесь здесь, когда будете разрабатывать автоматический темный режим (prefers-color-scheme).
Раздел Датчики немного более необычен. Вы будете использовать его для эмуляции расширенных функций мобильного устройства, таких как местоположение или состояние простоя. Есть даже хороший 3D-редактор (похожий на Pixel 3 XL с первоклассными надрезами 😅) для установки ориентации для таких вещей, как API гироскопа!
4. Настройка
Это может быть один из самых простых советов, но знаете ли вы, что в DevTools есть собственная панель настроек (F1 или значок шестеренки Настройки слева от вкладок)? Шокирующе, я знаю.
Дело в том, что большинству разработчиков в большинстве случаев не нужно открывать настройки, и поэтому они на самом деле не знают, сколько там хорошего. Настройка пользовательского интерфейса, темный режим, экспериментальные функции, профили регулирования, ярлыки и многое другое — настройки DevTools — это абсолютный кладезь опций. Экспериментируя с ними и настраивая их под свои нужды, вы определенно получите лучший опыт!
5. Многострочное редактирование
Если вы достаточно давно являетесь веб-разработчиком, есть большая вероятность, что иногда вам захочется просто поиграть с JS или возиться с определенным дизайном веб-сайта. Игровые площадки для кода, такие как CodePen или CodeSandbox, вероятно, будут лучшим выбором в первом сценарии, но они все равно загружаются некоторое время, и вам нужно сначала явно перейти на соответствующие веб-сайты. Консоль DevTools намного быстрее и гораздо более универсальна.
Однако никто не обсуждает, что его многострочное редактирование — это мусор. Необходимость постоянно Shift Enter ведет к разочарованию и снижению производительности. Но есть и другой способ!
Перейдите в раздел Источники → левый ящик → при желании двойная стрелка на «вложенных вкладках» → Фрагменты. У вас есть что-то вроде специализированной площадки для написания кода в DevTools! Просто нажмите Новый фрагмент и начните писать! Когда вы закончите, вы можете запустить свой фрагмент или даже отформатировать его, если хотите.
Конечно, редактор фрагментов DevTools — это не только солнце и радуга. Возможности редактирования далеки от того, что вы получаете в современном редакторе кода/IDE, форматирование невозможно настроить, а без IIFE вы будете загрязнять и потенциально конфликтовать с глобальной областью видимости.
Тем не менее, отличный вариант для быстрых многострочных сниппетов!
6. Живые выражения
Далее, также кое-что, связанное с быстрыми экспериментами с кодом.
Живые выражения позволяют вам быстро запускать, как правило, однострочные фрагменты JS «вживую», что означает постоянное обновление. Лучше всего это будет видно, если вы введете что-то вроде Math.random() — оно будет постоянно выводить разные значения, пока вы не очистите выражение!
Чтобы использовать живые выражения, перейдите на вкладку консоли, нажмите кнопку со значком глаза (Создать живое выражение) и введите свое выражение в открывшемся редакторе (используйте Shift Enter для многострочного).
Теперь я, на этот раз, часто использую его, чтобы увидеть текущее количество элементов на веб-сайте и то, когда и как они обновляются (document.querySelectorAll("*").length), но, безусловно, есть больше выражений, которые вы хотели бы отслеживать постоянно.
Просто помните, что нельзя вводить слишком сложный код, так как его постоянное выполнение может поставить вашу машину на колени!
7. Ярлыки jQuery
Вы почти наверняка играли с элементами DOM в своей консоли. До этого вам нужно было получить доступ к нужному элементу DOM. Это можно сделать с помощью JS DOM API, например document.getElementById(), или щелкнув элемент правой кнопкой мыши в инспекторе DOM → Сохранить как глобальную переменную. Но знаете ли вы, что есть более эффективные способы сделать это в стиле jQuery?
Конечно, в наши дни jQuery может быть не самой удобной библиотекой JS, но ее $() функция, несомненно, универсальна. Итак, хорошо, что вы можете использовать его в своей консоли, даже не касаясь jQuery!
В консоли DevTools у вас есть несколько сочетаний $:
$()как псевдоним дляdocument.querySelector()$$()как псевдоним дляdocument.querySelectorAll()- от
$0до$4для от последнего до пятого выбранного элемента в инспекторе DOM $\_для значения последней выполненной операции
Как видите, полезных ярлыков довольно много! Итак, если вы преодолели силу привычки, у вас есть отличный способ ускорить рабочий процесс!
8. Скриншоты
Есть много способов сделать скриншоты. Но если вы не хотите захватить весь экран или окно, велика вероятность того, что ваш снимок экрана не будет идеально выровнен. К счастью, по крайней мере, когда дело доходит до веб-страниц, в DevTools есть много инструментов для этого!
Итак, с помощью DevTools можно сделать целых 4 типа скриншотов:
- Снимок экрана (стандартный) — только снимок экрана текущего представления.
- Снимок области — снимок экрана выбранной области веб-страницы.
- Снимок экрана узла — снимок экрана выбранного узла.
- Снимок экрана в полном размере — скриншот всего веб-сайта (весь прокручиваемый контент).
Самый простой способ сделать практически любой из перечисленных типов скриншотов — это выполнить поиск по запросу «скриншот» в палитре команд — там есть все варианты. Для снимков экрана узла вы также можете щелкнуть правой кнопкой мыши в инспекторе DOM → Снимок экрана узла.
А теперь у меня есть для вас дополнительный совет! Если вам когда-либо приходилось делать скриншоты с высоким разрешением, например, для демонстрации продуктов или статей, то DevTools также поможет вам!
Перейдите в раздел Настройки → Устройства → Добавить пользовательское устройство и введите разрешение Full HD с 4 в качестве соотношения пикселей устройства. Таким образом, вы получаете устройство с экраном 8K!
Затем при включенной панели инструментов устройства активируйте предустановку устройства 8K и сделайте снимок экрана (либо с помощью палитры команд, либо из вертикального трехточечного меню справа (Дополнительные параметры).
Это может быть нечетко и, в зависимости от вашей машины, может зависнуть, если вы превысите 8K, но это отличный способ делать скриншоты с более высоким разрешением, чем ваш экран!
9. Режим дизайна
Это довольно круто! Знаете ли вы, что есть флаг режим дизайна, который позволяет редактировать весь ваш сайт?! Нравится стиль contenteditable!
Это похоже на установку атрибута contenteditable для вашего корневого элемента <html>, но немного чище, не затрагивая DOM.
В консоли просто установите document.designMode на ”on”, и все готово! Не стесняйтесь экспериментировать с удалением/добавлением текста, удалением изображений и так далее! Когда вы закончите, просто установите для того же свойства значение ”off” и запечатайте свою работу.
10. Пользовательские форматтеры
И последнее, но не менее важное: у нас есть настраиваемые средства форматирования объектов. Они позволяют вам делать некоторые сумасшедшие вещи, чтобы красиво форматировать ваши загадочные или сложные объекты.
Чтобы включить настраиваемые средства форматирования, перейдите в раздел Настройки → Настройки → раздел Консоль → Включить настраиваемые средства форматирования. Отныне вы можете использовать пользовательские средства форматирования, используя библиотеки, которые их поддерживают, или определяя их самостоятельно через свойство window.devtoolsFormatters.
devtoolsFormatters — это массив объектов форматирования. Они содержат 3 метода: header() для рендеринга основного сообщения (используйте null, чтобы оставить объект незатронутым), hasBody() для определения возможности расширения объекта и body() для рендеринга расширенной формы объекта, когда это необходимо. Значения, возвращаемые из header() или body(), должны быть в формате JsonMl (по сути, JSON-представление HTML). Что касается того, что вышеизложенное дает вам:
Если HTML или CSS в консоли DevTools кажутся вам странными, вам следует прочитать один из моих старых постов, где я подробно рассказываю о различных методах ведения журнала консоли и их стилях.
В целом, пользовательские средства форматирования сами по себе являются довольно сложной темой, возможно, даже заслуживающей отдельного поста в блоге (дайте мне знать, если хотите его увидеть).
11. Используйте BetterConsole
Если вы дочитали до этого момента, у меня есть для вас особый бонусный совет — используйте BetterConsole!
Я подробно рассказал об этом в моем предыдущем сообщении в блоге, но в целом BetterConsole — это мой проект, предназначенный для исправления некоторых мелких, но раздражающих проблем, связанных с консолью DevTools, которые у вас есть. иметь дело все время.
Таким образом, вместо отдельного окна или ящика, сокращающего размер вашего окна (особенно на маленьком экране), у вас есть комбо-пузырь + карточка — свободно изменяемый размер и перетаскиваемый внутри. весь видовой экран! У вас также есть встроенный многострочный редактор с возможностью редактирования на уровне VS Code, включая intellisense, предложения кода, свертывание кода. , и больше!
Кроме того, есть поддержка TypeScript и поддержка SCSS — с отдельной панелью для внедрения таблиц стилей и элементов DOM прямо из консоли. Да, и вы можете использовать интеграцию Prettier для красивого форматирования кода.
По сути, это площадка для программирования, но для каждого веб-сайта прямо под указателем мыши. Конечно, у него не так много функций, как у самих DevTools, но он гораздо лучше подходит для того, что вы делаете на своей консоли большую часть времени.
И что самое приятное, скоро начнется этап бета-тестирования! С его помощью вы можете помочь мне разработать лучший консольный опыт и получить шанс не только попробовать, но и скидка 100% — бесплатно — конечный продукт!
Так что, если вам интересно, смело заходите на Твиттер-страницу проекта и присоединяйтесь к серверу Discord, чтобы быть в числе первых бета-тестеров!
Нижняя линия
Итак, как видите, в Chrome DevTools полно полезных и интересных вещей. Советы и рекомендации в этом посте — это лишь 10 из многих, которые вы можете найти в DevTools!
Но даже если вы не ищете ничего большего в консоли DevTools, вам наверняка понравится гибкость BetterConsole, поддержка TypeScript и возможности многострочного редактирования. Итак, присоединяйтесь к бета-серверу Discord сейчас и следите за обновлениями BetterConsole в Twitter.
Чтобы узнать больше о веб-разработке, подпишитесь на Twitter, Facebook или через мою рассылку. Спасибо за чтение и удачного кодирования!
