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


236

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

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


Поскольку этому вопросу уделяется достаточно много внимания, я начал задаваться вопросом, могу ли я предложить лучшее решение. Сделают ли все ссылки, открываемые в одной вкладке, правильным?
— Конрад Дзвинел

@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

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



0

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

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

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

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

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.