Хитрости отладчика Chrome, о которых вы не знали День 22: Сеть

внешний интерфейс Chrome
Хитрости отладчика Chrome, о которых вы не знали День 22: Сеть

специальное заявление

Эта статья является авторомТомек СулковскиОпубликовано вmediumряд выше. По словам автора, всего 24 статьи, которые обновлены до 24 декабря.
Авторские права принадлежат оригинальному автору.

Автор рекомендует наш китайский перевод в Твиттере, а скриншот в конце.

Переводчик связался с автором перед переводом и получил разрешение на перевод всей серии.
Чтобы не мешать вашему чтению,Авторизованные записи здесь

текст

За 24 дня до праздников я опубликую серию коротких статей о том, как более интересно использовать инструменты разработки,вчераМы поигрались с кодовыми блоками, поговорим сегодняNetwork:

61. Скрыть обзор сети (Скрыть обзор сети)

ты часто проверяешьNetworkпанель:

  • Взгляните на график запроса
  • А может просто посмотреть список запросов - подтвердить статус, размер и ответ?

Бьюсь об заклад, ты последний, если это так, тоOverviewНет причин занимать разделNetworkоколо половины площади. скрыть.

62. Инициатор запроса показывает стек вызовов (инициатор запроса показывает информацию о стеке вызовов)

Примечание переводчика:initiatorМожно перевести как лаунчер, но это слишком тупо, и смысл всем понятен.

Networkв панелиinitiatorСтолбец показывает, какая строка скрипта инициировала запрос. Он показывает последний шаг в стеке вызовов для запуска запроса, если только вы не используете, например: локализованнуюfetchAPI, который будет указывать на какой-то низкоуровневый библиотечный код — например, когда мыAngularС использованиемAxiosилиzone.js, что указывает наxhr.js

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

63. Фильтровать запросы по методу

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

Просто введите, например.methodилиmime-type :

Если вы хотите отобразить все возможные ключевые слова, нажмите[ctrl] + [space]

64. Настройте таблицу запросов

В таблице запросов вы можете увидеть несколько фрагментов информации о каждом запросе, например:Status, Type, Initiator, Sizeа такжеTime. Но вы также можете добавить больше (например, я часто добавляюMethod). Более:

все что ты можешьNetworkинформация, отображаемая на панели.

Чтобы настроить отображаемые столбцы, просто щелкните правой кнопкой мыши в любом месте заголовка таблицы запросов. осторожность,Response Headersпредставляет собой полное подменю с дополнительными параметрами, и вы даже можете определить свои собственные параметры.

Рутина: Если вы узнали что-то новое здесь

→ Можешь поставить лайк и уйти~
→ Следуй за мной:Твиттер: Томек Сулковски

другая серия

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

напиши в конце

Если вы положительно относитесь к моему переводу, вы также можете подписаться на меня~ Кстати, мой опенсорсный проект, прошу волну звезд→посмотри сюда, красивая система блогов

Автор рекомендует наш китайский перевод в Твиттере

Категории