Инструменты разработчика Chrome: Как отследить сеть для ссылки, открывающей новую вкладку?

236

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

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

google-chrome google-chrome-devtools DAVKA
источник
Поскольку этому вопросу уделяется достаточно много внимания, я начал задаваться вопросом, могу ли я предложить лучшее решение. Сделают ли все ссылки, открываемые в одной вкладке, правильным?
Конрад Дзвинел
@KonradDzwinel Это было одноразовое задание для меня, и я пошел дальше, поэтому не могу вам сказать. Если вы попытаетесь написать ответ, я буду рад принять его.
Давка
1
Если вы хотите использовать это как функцию, не стесняйтесь отмечать
phsource

Ответы:

220

Проверьте chrome://net-internals/#events(или chrome://net-exportв последней версии Chrome) для подробного обзора всех сетевых событий, происходящих в вашем браузере.

Другим возможным решением, в зависимости от вашей конкретной проблемы, может быть включение «Сохранить журнал» на вкладке «Сеть»:

DevTools> Сеть> Сохранить журнал

и заставить все ссылки открываться в одной вкладке, выполнив следующий код в консоли:

[].forEach.call(document.querySelectorAll('a'),
    function(link){
        if(link.attributes.target) {
            link.attributes.target.value = '_self';
        }
    });

window.open = function(url) {
    location.href = url;
};
Конрад Дзвинел
источник
13
спасибо, это круто, но я хочу список, как в инструментах разработчика (запросы и ответы со всеми заголовками), просто для другой вкладки
davka
Это очень интересно, особенно если вы рекламируете фильтр type:URL_REQUEST, но он не содержит ту же информацию, что и вкладка Сеть. Например, кажется, что данные cookie удаляются как для запросов, так и для ответов.
Патрик М
3
document.querySelectorAll('a,form')также повлияет на формы.
JGB
1
Я бы хотел, чтобы я проголосовал за это дважды. Я сделал контент-скрипт для chrome, который делает это по горячей клавише, и это буквально сэкономило часы моей жизни.
polkovnikov.ph
1
Chrome отображает «Средство просмотра событий net-internals и связанные с ним функции удалены. Используйте chrome: // net-export для сохранения сетевых журналов и внешнюю катапульту netlog_viewer для их просмотра». , но chrome: // net-export работает просто фантастически.
Иордания
109

Запрос функции упоминается в комментариях по phsource был реализован.

В последних версиях (начиная с Chrome 50) вы можете перейти в меню «Настройки инструментов разработчика» (откройте «Инструменты разработчика», затем используйте меню из 3 точек или нажмите F1) и установите флажок «Автоматически открывать DevTools для всплывающих окон».


источник
13
Работает нормально, за исключением того, что немного сложно включить «Сохранять журналы» сразу после открытия окна.
Эрвин Майер
Вы должны обновить свой ответ, так как Chrome стабильной версии в настоящее время 55
Lulu
5
Вздох, но в новом окне <Preserve Logs> не активирован. Что не так с инженерами Chrome?
Пейсер
Используйте это в сочетании со stackoverflow.com/a/29029881/145400 (отличный ответ на «Chrome Dev Tools: можно ли держать его открытым даже после закрытия окна?»)!
Доктор Ян-Филипп Герке
используйте меню из 3 точек или нажмите> страницу настроек> DevTools> «Автоматически открывать DevTools для всплывающих окон»
holly
27

В Chrome 61.0.3163.100 теперь доступна следующая опция. Доступ к нему можно получить, перейдя в настройки Chrome Dev Tools. Это внизу.

Настройки веб-инспектора

Конрад Пясик
источник
3
К сожалению, это не активирует «Сохранять журналы» во вновь открытом окне, поэтому, если вы получите новое окно и перенаправление в указанном окне, сетевой журнал будет очищен и начнется после перенаправления.
января
4
Для тех, кто не хочет нажимать на ссылку, чтобы увидеть изображение, этот параметр называется «Автоматически открывать DevTools для всплывающих окон» под заголовком «DevTools». Другие доступные настройки: «Сохранить журнал», под «Сеть»; «Сохранить журнал при навигации» в разделе «Консоль».
Хлонгмор
2
Это работает для меня (Хром 76), и это является активацией «Сохранить журналы» , когда он запускает разработчик tools.This всплывающих окон может быть активирован мной имея Заповедник Войти настройку активирована?
Винс Боудрен
11
  • Добавить / обновить ссылку на target="_self"
  • Установите флажок «Сохранять журналы при навигации» на вкладке «Сеть».
  • Нажмите на ссылку, и ваш запрос будет зарегистрирован
Себастьян Лорбер
источник
10

Вы можете сделать это следующим образом:

  1. установите target = "any_window_name" на нужную ссылку.
  2. нажмите на эту ссылку один раз, чтобы открыть ее в новой вкладке.
  3. В открытой вкладке откройте инструменты разработчика.

  4. вернитесь на исходную страницу и снова нажмите на эту ссылку.

    Результат будет загружен в уже подготовленное окно с открытыми инструментами разработчика.

    Вы можете активировать опцию «сохранить журнал» в инструментах разработчика (см. Отличный ответ Конрада Дзвинеля), чтобы перехватить любой перенаправленный трафик по этой ссылке.

    Примечание . Большинство людей знакомы с целевым объектом ссылки: {_self, _blank, _parent, _top}. Но на самом деле может быть дано любое имя, это откроет новое окно с этим именем, и любые последующие нажатия на ссылки, формы или window.open с тем же целевым значением будут открыты в том же окне. дальнейшее чтение - тег mdn: window.open , тег mdn: <a>

Майкл Л.
источник
Большое спасибо за этот совет, я никогда бы не подумал об этом. Именно то, что мне было нужно. Работает в нескольких окнах (по крайней мере, в Chrome), если кто-то, читающий это, хочет увидеть, как ведут себя две страницы одновременно.
Марк Ормешер
3

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

orgads
источник
0

* Отказ от ответственности: Автор: разработчик HttpWatch *

HttpWatch в Windows может записывать сетевой трафик, генерируемый при открытии новой вкладки или окна Chrome, включив автоматическую запись в Сервис-> Параметры-> Запись. В новом окне щелкните значок HttpWatch, чтобы просмотреть трассировку сети.

Бесплатная версия будет предоставлять основную информацию , такие как URL, код состояния и истекшее время для каждого запроса.

* Отказ от ответственности: Автор: разработчик HttpWatch *

HttpWatchSupport
источник