[Эта статья разрешает эксклюзивное использование общедоступной учетной записи сообщества разработчиков Nuggets, включая, помимо прочего, редактирование, пометку оригинальности и другие права. ]
1. Просмотр стиля псевдокласса элемента css
Например, я хочу просмотреть триггер элементаhovercss стиль, когда . Сначала выберите элемент, а затем действуйте следующим образом:
2. Временно добавить или удалить класс элемента
3. document.body.contentEditable="true"
Введите в консолиdocument.body.contentEditable="true", вы можете редактировать страницу напрямую.
4. Просмотрите стиль заполнителя
Теперь вы можете просмотреть стиль заполнителя элемента:
5. Проверьте производительность страницы и SEO
Вот отчет об испытаниях:
Использованная литература:
6. Сеть Отображает другую информацию о ресурсе
Обычно сеть показывает подробную информацию о загруженных ресурсах, но по умолчанию показывает только некоторую информацию. Что делать, если я хочу узнать, был ли загружен веб-ресурс через HTTP1.1 или HTTP2?
Как видно из GIF, помимо версии протокола HTTP, вы также можете просмотреть другую информацию, такую как метод HTTP-запроса, доменное имя и прочее.
7. Просмотр событий привязки элементов
наведите курсор мышиhandler, вы можете просмотреть код конкретной функции.
8. Код глобального поиска
Откройте инструменты разработчика, нажмитеConsoleнажмите ESC, чтобы открыть всплывающее окно:
Нажмите на три маленькие точки, расположенные вертикально слева, выберитеSearch:
Щелкнув по результату поиска, вы перейдете к конкретному исходному файлу. Он ищет все импортированные файлы на этой странице.
9. Проверьте производительность во время выполнения с помощью Performance
Откройте инструменты разработчика, нажмитеPerformanceЭтикетка:
Нажмите в левом верхнем углуRecordкнопку, чтобы начать запись, а затем вы имитируете обычного пользователя, использующего веб-страницу. После тестирования нажмитеStop.
Вы можете видеть, что в правом верхнем углу есть FPS, CPU, NET и HEAP:
- FPS соответствует частоте кадров, красный цвет означает низкую частоту кадров, что может снизить удобство работы пользователя; зеленый цвет означает нормальную частоту кадров, и чем выше зеленая полоса, тем выше FPS.
- На процессорной части есть желтые, фиолетовые и другие цветные блоки.Пожалуйста, обратитесь к нижнему левому углу изображения для их определения. Тот, у кого пропорция выше, указывает, на что тратится основное процессорное время.
- HEAP — это использование памяти в куче.
NET, лучше всего нажать на Сеть ниже, чтобы просмотреть, вы можете увидеть конкретные ресурсы загрузки и т. д.
Как правило, на основе этой информации вы можете определить, в чем заключается проблема с производительностью веб-страницы.
Если вы хотите узнать больше, пожалуйста, проверьте следующие ссылки, вам нужно обратиться к qiang. Или используйте поисковую систему для поиска производительности хрома, также есть много статей, объясняющих, как ее использовать.
использованная литература
10. Рендеринг обнаруживает изменения веб-страницы в режиме реального времени.
Откройте инструменты разработчика, нажмитеConsoleнажмите ESC, чтобы открыть всплывающее окно:
Нажмите на три маленькие точки, расположенные вертикально слева, выберитеRendering:
Ниже приведены более полезные функции:
- Мигание краски, выделение перекрашенных областей в реальном времени (зеленым цветом).
- Layout Shift Regions, выделение областей перекомпоновки (ретрансляции) (синим цветом) в режиме реального времени.
- Границы слоя, обозначьте составной слой рамкой (оранжевой, оливковой, голубой).
- Статистика рендеринга кадров, показывающая информацию о графическом процессоре, старая версия отображает FPS в реальном времени, но новая версия не знает почему (chrome 86).
11. Приложение Просмотр информации о приложении
Как видно из рисунка, вApplicationМного информации на этой странице можно найти на вкладке. братьlocalStorageНапример, сейчас я выполняю кодlocalStorage.setItem('token', '123'), затем откройтеApplication:
Неудивительно, что вы можете увидеть новыеlocalStorageИнформация.