Фильтровать только запросы с ошибками - сеть Google Chrome

Question

Как я могу фильтровать только запросы с ошибками в google chrome network devtools?

Answer 1

Вариант 1: фильтрация кодов состояния HTTP

Да, вы можете фильтровать ответы по их коду статуса. Вот полезный список со всеми из них.

AFAIK эта функция фильтрации работает уже много лет. Это через свойство status-code (все свойства, которые вы можете использовать , вы можете увидеть здесь, в Google Developers ).

Как объяснили:

status-code. Показывать только те ресурсы, чей код состояния HTTP соответствует указанный код. DevTools заполняет выпадающее меню автозаполнения все коды состояния, с которыми он столкнулся.

Это не так полезно, как выражение регулярного выражения, но оно может сильно сузить. Например, если вы хотите увидеть все запросы с ошибкой 403, фильтр будет status-code:403.

Другое использование этого фильтра может помочь вам еще лучше. Мы не можем использовать подстановочные знаки здесь, ни даже диапазон. Но возможны отрицательные фильтры . Было бы очень удобно использовать: -status-code:200 (обратите внимание на знак -). Это отфильтрует все запросы с кодом 200, оставляя вас большую часть времени с проблемными запросами.

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

Вариант 2: работа с форматом HAR

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

А затем перейдите в предпочитаемый текстовый редактор, вставьте и сохраните, например, в качестве network.har.

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

Существует набор инструментов , которые понимают файлы HAR. Поскольку это файл JSON, вы всегда можете искать выражения «error» или RegExp.

Если вы знаете только несколько JS, вы можете анализировать их по своему желанию.

Answer 2

Такой функциональности нет.
Вход Filter не относится к столбцу Status.

Вы можете расширить devtools, добавив флажок в панели фильтров:

1. открыть сетевую панель
2. отсоединить devtools в отдельное окно
3. нажать горячую клавишу для вызова devtools - Ctrl Shift i или ⌘ ⌥ i
4. вставьте следующий код в это новое окно devtools consoleи запустите его

{
  // see the link in the notes below for a full list of request properties
  const CONDITION = r =>
    r.failed ||
    r.statusCode >= 400;
  const label = document.createElement('label');
  const input = label.appendChild(document.createElement('input'));
  input.type = 'checkbox';
  input.onchange = () => {
    const view = UI.panels.network._networkLogView;
    view.removeAllNodeHighlights()
    view._filters = input.checked ? [CONDITION] : [];
    view._filterRequests();
  };
  label.append('failed');
  UI.panels.network._filterBar._filters[1]._filterElement.appendChild(label);
}

• Вы можете сохранить этот код как фрагмент в devtools , чтобы запустить его позже.
• Для быстрого переключения режима стыковки в основных устройствах нажмите Ctrl Shift D или ⌘ ⇧ D
• Теоретически, не так сложно поместить этот код в файл resources.pak в каталоге приложения Chrome.Существует несколько инструментов для декомпиляции / сборки этого файла.
• Полный список свойств внутреннего запроса содержится в конструкторе NetworkRequest .