Element-Selector — простой селектор веб-элементов

Вдохновленный Chrome DevTools, этот инструмент позволяет создать пользовательский аналог функции «осмотреть элемент» (⌘ ⇧ C) для вашего расширения или инструмента

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

Она совместима с использованием тега <script> и импортом, не имеет зависимостей и использует HTML5 Canvas для быстрой отрисовки выбора

Стоимость: #бесплатно
#web #code #DevTools

​​​Скрытые функции Google Chrome для разработчика

Chrome Dev Tools — один из самых популярных инструментов среди веб-разработчиков. Однако в неём есть некоторые полезные функции, о которых большинство разработчиков не знает. 

В этой статье вы сможете узнать о пяти основных функциях Chrome DevTools, которые могут вам пригодиться:

https://webformyself.com/skrytye-funkcii-google-chrome-dlya-razrabotchika/

#devtools #инструменты

Chrome DevTools: измерять переходы внутри SPA

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

В обзоре Chrome DevTools описана поддержка soft navigation в разделе Insights панели Performance. Она дополняет отображение таких переходов в Live Metrics и записи выполнения.

Для проверки откройте Performance, начните запись и выполните нужный переход в приложении. Если DevTools распознал его как soft navigation, можно рассмотреть соответствующий участок и связанные подсказки по производительности.

В том же обновлении поиск по Ctrl+F научился находить записи пользовательских дорожек, добавленных через Extensibility API, включая их свойства и текст подсказок.

Сценарии стоит записывать отдельно: открытие приложения, переход между экранами, повторное посещение уже загруженного раздела.

#devtools #производительность