Что нового в DevTools: кросс-браузерная версия

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

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

Итак, моя цель в этой статье — повысить осведомленность о некоторых новейших функциях Chrome, Microsoft Edge, Firefox и Safari. Надеюсь, это заставит вас попробовать их и, возможно, поможет вам чувствовать себя более комфортно в следующий раз, когда вам нужно отладить проблему, связанную с браузером.

С учетом сказанного, давайте сразу приступим.

Инструменты разработчика Chrome

Команда Chrome DevTools усердно работала над модернизацией своей (сейчас 13-летней) кодовой базы. Они были заняты улучшением системы сборки, переходом на TypeScript, введением новых веб-компонентов, перестройкой своей инфраструктуры тем и многим другим. В результате инструменты теперь легче расширять и изменять.

Но помимо этой менее ориентированной на пользователя работы, команда также добавила множество функций. Позвольте мне рассмотреть некоторые из них, связанные с отладкой CSS.

Прокрутка

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

Если вы хотите узнать больше о привязке к прокрутке, вы можете прочитать эту документацию MDN и посмотреть демонстрации Адама Аргайла здесь.

Ключевые свойства привязки прокрутки:

• scroll-snap-type , который сообщает браузеру направление, в котором происходит привязка, и как это происходит;
• scroll-snap-align , который сообщает браузеру, куда привязаться.

Chrome DevTools представил новые функции, которые помогают отлаживать следующие ключевые свойства:

• если элемент определяет привязку к прокрутке с помощью scroll-snap-type , на панели «Элементы» рядом с ним отображается значок.

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

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

Хотя привязка прокрутки не является новой функцией CSS, ее внедрение довольно низкое (менее 4% по данным chromestatus.com), а поскольку спецификация изменилась, не все браузеры поддерживают ее одинаково.

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

Запросы контейнера

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

Если вы не знаете, что такое контейнерные запросы, я бы посоветовал сначала ознакомиться со статьей Stephanie Eckles Primer On CSS Container Queries.

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

К счастью, в этой области все меняется, и Chromium теперь поддерживает контейнерные запросы, а команда Chrome DevTools начала добавлять инструменты, облегчающие начало работы с ними.

Контейнерные запросы еще не включены по умолчанию в Chromium (чтобы включить их, перейдите на chrome://flags и выполните поиск «контейнерные запросы»), и это может занять некоторое время. Более того, работа над DevTools по их отладке все еще находится на начальной стадии. Но некоторые ранние функции уже появились.

• При выборе элемента в DevTools, стили которого получены из at-правила @container , это правило появляется на боковой панели «Стили» панели «Элементы». Это похоже на то, как стили медиа-запросов представлены в DevTools, и позволяет легко узнать, откуда берется определенный стиль.

Как показано на снимке экрана выше, на боковой панели «Стили» отображаются 2 правила, которые применяются к текущему элементу. Нижний всегда применяется к элементу .media и обеспечивает его стиль по умолчанию. И верхний вложен в запрос контейнера @container (max-width:300px) , который вступает в силу только тогда, когда контейнер уже, чем 300px.

• Вдобавок к этому, прямо над @container , на панели «Стили» отображается ссылка на элемент, к которому разрешается правило, а при наведении курсора на него отображается дополнительная информация о его размере. Таким образом, вы точно знаете, почему запрос контейнера совпал.

Команда Chrome DevTools активно работает над этой функцией, и вы можете ожидать гораздо большего в будущем.

Сотрудничество с хромом

Прежде чем перейти к функциям, которые есть в других браузерах, давайте немного поговорим о Chromium. Chromium — это проект с открытым исходным кодом, на котором построены Chrome, Edge, Brave и другие браузеры. Это означает, что все эти браузеры имеют доступ к функциям Chromium.

Двумя наиболее активными участниками этого проекта являются Google и Microsoft, и, когда дело доходит до DevTools, они совместно работали над несколькими интересными функциями, о которых я хотел бы рассказать сейчас.

Инструменты отладки макета CSS

Несколько лет назад Firefox ввел новшество в эту область и выпустил первые в мире инспекторы сетки и flexbox. Браузеры на основе Chromium теперь также позволяют веб-разработчикам легко отлаживать сетки и flexbox.

В этом совместном проекте участвовали инженеры, продакт-менеджеры и дизайнеры из Microsoft и Google, работающие над достижением общей цели (узнайте больше о самом проекте в моем выступлении на BlinkOn).

Помимо прочего, DevTools теперь имеет следующие функции отладки макета:

• Выделите несколько сеток и гибких макетов на странице и настройте, хотите ли вы видеть имена или числа линий сетки, области сетки и т. д.

• Редакторы Flex и сетки для визуальной игры с различными свойствами.

• Значки выравнивания в автозаполнении CSS упрощают выбор свойств и значений.

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

Вы можете прочитать больше информации об этом на сайтах документации Microsoft и Google.

Локализация

Это был еще один совместный проект с участием Microsoft и Google, который теперь позволяет переводить все DevTools на основе Chromium на языки, отличные от английского.

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

Хотя результат того стоил. Если английский не является вашим родным языком, и вам было бы удобнее использовать DevTools на другом языке, перейдите в «Настройки» ( F1 ) и найдите раскрывающийся список языков.

Вот скриншот того, как это выглядит в Chrome DevTools:

А вот как Edge выглядит на японском языке:

Edge DevИнструменты

Microsoft перешла на Chromium для разработки Edge более 2 лет назад. Хотя в то время это вызвало много дискуссий в веб-сообществе, с тех пор о нем мало что было написано или сказано. Однако люди, работающие над Edge (включая его DevTools), были заняты, и теперь браузер имеет множество уникальных функций.

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

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

Открытие, закрытие и перемещение инструментов

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

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

Edge добавил 3 небольшие, но мощные функции для решения этой проблемы:

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

В следующем GIF показано, как в Edge можно выполнять закрытие и открытие инструментов как в основной области, так и в области ящиков.

Вы также можете перемещать инструменты между основной областью и областью ящика:

• щелчок правой кнопкой мыши по вкладке вверху показывает элемент «Переместить вниз» и
• щелчок правой кнопкой мыши на вкладке в ящике показывает элемент «Переместить наверх».

Получение контекстной справки с помощью всплывающих подсказок DevTools

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

Чтобы решить эту проблему, Edge добавил способ перехода непосредственно от инструментов к своей документации на веб-сайте Microsoft.

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

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

• с помощью сочетания клавиш Ctrl + Shift + H в Windows/Linux ( Cmd + Shift + H на Mac);
• зайдя в главное ( ... ) меню, затем войдя в справку и выбрав «Переключить всплывающие подсказки DevTools»;
• с помощью командного меню и ввода «Подсказки».

Настройка цветов

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

Edge только что добавил ряд новых тем в DevTools поверх уже доступных темных и светлых тем. Всего было добавлено 9 новых тем. Они взяты из VS Code и поэтому будут знакомы людям, использующим этот редактор.

Вы можете выбрать тему, которую хотите использовать, зайдя в настройки (используя F1 или значок шестеренки в правом верхнем углу) или используя меню команд и набрав theme .

Инструменты разработчика Firefox

Подобно команде Chrome DevTools, люди, работающие над Firefox DevTools, были заняты большим обновлением архитектуры, направленным на модернизацию их кодовой базы. Кроме того, в наши дни их команда немного меньше, так как Mozilla пришлось переориентироваться в последнее время. Но, несмотря на то, что это означает, что у них было меньше времени для добавления новых функций, им все же удалось выпустить несколько действительно интересных, о которых я сейчас расскажу.

Отладка нежелательных полос прокрутки

Вы когда-нибудь спрашивали себя: «Откуда эта полоса прокрутки?» Я знаю, что да, и теперь у Firefox есть инструмент для устранения этой самой проблемы.

На панели Inspector все элементы, которые прокручиваются, имеют значок scroll рядом с ними, что уже полезно при работе с глубоко вложенными деревьями DOM. Кроме того, вы можете щелкнуть этот значок, чтобы открыть элемент (или элементы), вызвавший появление полосы прокрутки.

Вы можете найти больше документации об этом здесь.

Визуализация порядка табуляции

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

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

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

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

Вы можете найти больше документации об этом здесь.

Совершенно новый инструмент производительности

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

За последние несколько лет инженеры Firefox сосредоточились на повышении производительности самого браузера, и чтобы помочь им в этом, они создали инструмент для профилирования производительности. Инструмент изначально был создан для оптимизации собственного кода движка, но также поддерживал анализ производительности JavaScript с самого начала.

Сегодня этот новый инструмент производительности заменяет старую панель производительности Firefox DevTools в предварительных версиях (Nightly и Developer Edition). Возьмите его на спину, когда у вас есть шанс.

Среди прочего, новый профилировщик Firefox поддерживает совместное использование профилей с другими, чтобы они могли помочь вам улучшить производительность записанного варианта использования.

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

Веб-инспектор Safari

И последнее, но не менее важное: давайте рассмотрим некоторые из последних функций Safari.

Небольшая команда Apple очень занята широким спектром улучшений и исправлений инструментов. Дополнительные сведения о веб-инспекторе Safari помогут вам повысить эффективность отладки сайтов на устройствах iOS или tvOS. Кроме того, у него есть множество функций, которых нет в других DevTools и о которых мало кто знает.

Отладка сетки CSS

Поскольку Firefox, Chrome и Edge (и все браузеры на основе Chromium) имеют специальные инструменты для визуализации и отладки сеток CSS, Safari был последним крупным браузером, в котором этого не было. Ну, теперь это так!

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

• Значки сетки отображаются на панели «Элементы» для быстрого поиска сетки.
• Щелчок по значку включает наложение визуализации на странице.
• На боковой панели теперь отображается новая панель «Макет». Он позволяет настроить наложение сетки, просмотреть список всех сеток на странице и переключить для них наложение.

Что интересно в реализации Safari, так это то, что они действительно справились с аспектом производительности инструмента. Вы можете одновременно включить множество различных наложений и прокручивать страницу без каких-либо проблем с производительностью.

Другая интересная вещь заключается в том, что Safari представил трехпанельную панель «Элементы», как и Firefox, которая позволяет вам одновременно видеть DOM, правила CSS для выбранного элемента и панель «Макет».

Узнайте больше об инспекторе CSS Grid в этой записи блога WebKit.

Множество улучшений отладчика

Раньше в Safari была отдельная панель «Ресурсы» и «Отладчик». Они объединили их в единую панель «Источники», что упрощает поиск всего, что вам нужно при отладке кода. Кроме того, это делает инструмент более совместимым с Chromium, к которому привыкли многие люди.

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

Но Safari также недавно сосредоточился на добавлении в свой отладчик инновационных функций, которых нет в других DevTools.

Загрузочный скрипт:
Safari позволяет вам писать код JavaScript, который гарантированно запускается первым перед любым из сценариев на странице. Это очень полезно для инструментовки встроенных функций, например, для добавления инструкций debugger или ведения журнала.

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

Safari недавно улучшил весь свой набор типов точек останова, предоставив им возможность обширной настройки. С помощью этой новой функции точки останова вы можете решить:

• если вы хотите, чтобы точка останова срабатывала только при выполнении определенного условия,
• если вы хотите, чтобы точка останова вообще приостановила выполнение или просто выполнила какой-то код,
• или даже воспроизвести звуковой сигнал, чтобы вы знали, что какая-то строка кода была выполнена.

Консольные функции queryInstances и queryHolders :
Эти две функции очень полезны, когда ваш сайт начинает использовать много объектов JavaScript. В некоторых ситуациях может стать сложно отслеживать зависимости между этими объектами, а также могут начать появляться утечки памяти.

В Safari есть инструмент «Память», который может помочь решить эти проблемы, позволяя вам исследовать снимки кучи памяти. Но иногда вы уже знаете, какой класс или объект вызывает проблему, и хотите найти, какие экземпляры существуют или что на них ссылается.

Если Animal является классом JavaScript в вашем приложении, то queryInstances(Animal) вернет массив всех его экземпляров.

Если foo является объектом в вашем приложении, тогда queryHolders(foo) вернет массив всех других объектов, которые имеют ссылки на foo .

Заключительные мысли

Надеюсь, эти функции будут вам полезны. Я могу только порекомендовать использовать несколько браузеров и ознакомиться с их DevTools. Более подробное знакомство с другими DevTools может оказаться полезным, когда вам нужно отладить проблему в браузере, который вы не используете на регулярной основе.

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

Сообщение об ошибках команде DevTools не только поможет вам, когда появится исправление, но также может помочь многим другим, кто столкнулся с той же проблемой.

Стоит знать, что команды DevTools в Microsoft, Mozilla, Apple и Google обычно довольно малы и получают много отзывов, поэтому сообщение о проблеме не означает, что она будет исправлена ​​быстро, но это действительно помогает, и эти команды прислушиваются .

Вот несколько способов, которыми вы можете сообщить об ошибках, задать вопросы или запросить функции:

• Инструменты разработчика Firefox
  • Firefox использует Bugzilla в качестве своего общедоступного средства отслеживания ошибок, и любой может сообщить об ошибках или запросить новые функции, создав там новую запись. Все, что вам нужно, это учетная запись GitHub для входа в систему.
  • Связаться с командой можно либо в Twitter, используя учетную запись @FirefoxDevTools, либо войдя в чат Mozilla (см. документацию по чату здесь).
• Веб-инспектор Safari
  • Safari также использует общедоступное отслеживание ошибок для своих ошибок WebKit. Вот документация о том, как искать ошибки и сообщать о новых.
  • Вы также можете связаться с командой в Твиттере с помощью @webkit.
  • Наконец, вы также можете сообщать об ошибках в Safari и веб-инспекторе Safari с помощью помощника обратной связи.
• Edge DevИнструменты
  • Самый простой способ сообщить о проблеме или запросить функцию — использовать кнопку обратной связи в DevTools (маленькая фигурка в правом верхнем углу инструментов).
  • Задавать вопросы команде лучше всего через Twitter, упомянув учетную запись @EdgeDevTools.
• Инструменты разработчика Chrome
  • Команда слушает отзывы в списке рассылки devtools-dev, а также в твиттере @ChromeDevTools.
• Хром
  • Поскольку Chromium — это проект с открытым исходным кодом, на котором работают Google Chrome и Microsoft Edge (и другие), вы также можете сообщать о проблемах в системе отслеживания ошибок Chromium.

С этим, спасибо за чтение!