Інструменти для розробників Chrome: як відстежувати мережу за посиланням, що відкриває нову вкладку?


235

Я хочу простежити активність у мережі, яка відбувається, коли я натискаю на посилання. Проблема полягає в тому, що посилання відкриває нову вкладку, і, мабуть, Dev Tools працює на кожну вкладку, для якої вона була відкрита. "Зберегти журнал при навігації" не допомагає.

Моє поточне рішення - перейти на FireFox та HttpFox, у яких немає цієї проблеми. Цікаво, як всі розробники для Chrome керують, це звучить досить просто (звичайно, я шукав відповідь, нічого корисного не знайшов).


Оскільки до цього питання приділяється досить багато уваги, я почав замислюватися, чи можу я запропонувати краще рішення. Чи зробить так, щоб усі посилання, що відкриваються на одній вкладці, зробити трюк?
Конрад Дзвінель

@KonradDzwinel Це було разове завдання для мене, і я рухався далі, тому я не можу вам сказати. Якщо ви хочете спробувати написати відповідь, я з радістю прийму її.
давка

1
Якщо ви хочете це як функцію, не соромтеся
позначити

Відповіді:


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 відображає "Переглядач подій у мережі" Інтернет "та пов'язані з ними функції видалено. Будь ласка, використовуйте chrome: // net-export для збереження Netlogs та зовнішнього катапульту netlog_viewer для їх перегляду." , але chrome: // чистий експорт працює фантастично.
Йорданія

108

Запит функції згадується в коментарі phsource був реалізований.

В останніх версіях (починаючи з Chrome 50) ви можете перейти в меню Налаштування інструментів для розробників (відкрийте Інструменти для розробників, потім скористайтеся 3-крапковим меню або натисніть F1) і встановіть прапорець "Автовідкрити DevTools для спливаючих вікон".


13
Працює чудово, за винятком того, що ввімкнути "Зберегти журнали" відразу після відкриття вікна трохи складніше.
Ервін Майер

Ви повинні оновити свою відповідь, оскільки хромована стабільна версія наразі 55
Лулу,

5
Зітхніть, але у новому вікні не активовано <Зберегти журнали>. Що не так з інженерами Chrome?
Pacerier

Використовуйте це в поєднанні з stackoverflow.com/a/29029881/145400 (чудова відповідь на "Інструменти Chrome Dev - чи можна залишатись відкритими навіть після закриття вікна?")!
Доктор Ян-Філіп Герк

скористайтеся меню з 3 крапками або натисніть> сторінку налаштувань> DevTools> "Автоматично відкрити DevTools для спливаючих вікон"
Холлі

27

У Chrome 61.0.3163.100 тепер у вас є наступний варіант. Доступ до нього можна перейти в Налаштування інструментів Chrome Dev. Це внизу.

Налаштування веб-інспектора


3
Це, на жаль, не активує "Зберегти журнали" у нещодавно відкритому вікні, тому якщо ви отримаєте нове вікно та переспрямування у вказаному вікні, мережевий журнал буде очищений та розпочнеться після переспрямування.
січня

4
Для тих, хто не хоче натиснути посилання, щоб побачити зображення, це "Автовідкрити DevTools для спливаючих вікон", під заголовком "DevTools". Інші доступні настройки: "Зберегти журнал", під "Мережа"; "Зберегти журнал при навігації" в розділі "Консоль".
hlongmore

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.