Chrome Dev Tools: jak śledzić sieć pod kątem linku, który otwiera nową kartę?

235

Chcę śledzić aktywność sieci, która ma miejsce po kliknięciu łącza. Problem polega na tym, że link otwiera nową kartę i najwyraźniej narzędzia programistyczne działają na karcie, dla której były otwarte. „Zachowaj dziennik po nawigacji” nie pomaga.

Moje obecne rozwiązanie to przejście do FireFox i HttpFox, które nie mają tego problemu. Zastanawiam się, jak zarządzają wszyscy programiści Chrome. Brzmi to dość prosto (oczywiście szukałem odpowiedzi, nie znalazłem nic pomocnego).

google-chrome google-chrome-devtools davka
źródło
Ponieważ na to pytanie zwraca się dużą uwagę, zacząłem się zastanawiać, czy mogę zapewnić lepsze rozwiązanie. Czy załatwienie wszystkich linków w tej samej karcie załatwi sprawę?
Konrad Dzwinel,
@KonradDzwinel To było dla mnie jednorazowe zadanie i ruszyłem dalej, więc nie mogę wam powiedzieć. Jeśli zechcesz spróbować napisać odpowiedź, chętnie ją przyjmę.
davka
1
Jeśli chcesz, aby to była funkcja, możesz
oznaczyć

Odpowiedzi:

220

Sprawdź chrome://net-internals/#events(lub chrome://net-exportw najnowszej wersji Chrome), aby uzyskać szczegółowy przegląd wszystkich zdarzeń sieciowych zachodzących w przeglądarce.

Innym możliwym rozwiązaniem, w zależności od konkretnego problemu, może być włączenie opcji „Zachowaj dziennik” na karcie „Sieć”:

DevTools> Sieć> Zachowaj dziennik

i wymuś otwieranie wszystkich łączy na tej samej karcie, wykonując następujący kod w konsoli:

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

window.open = function(url) {
    location.href = url;
};
Konrad Dzwinel
źródło
13
dzięki, to jest fajne, ale chcę listę jak w narzędziach programistycznych (żądania i odpowiedzi ze wszystkimi nagłówkami), tylko dla innej karty
davka
Jest to bardzo interesujące, szczególnie jeśli reklamujesz filtr type:URL_REQUEST, ale wydaje się, że nie zawiera tych samych informacji, co karta Sieć. Na przykład wydaje się, że usuwa dane cookie zarówno dla żądań, jak i odpowiedzi.
Patrick M
3
document.querySelectorAll('a,form')wpłynie również na formularze.
jgb
1
Chciałbym móc to zagłosować dwa razy. Stworzyłem skrypt zawartości dla Chrome, który robi to na skrócie, i dosłownie zaoszczędził godziny mojego życia.
polkovnikov.ph
1
Chrome wyświetla „Przeglądarka zdarzeń net-internals i powiązana z nią funkcjonalność zostały usunięte. Użyj chrome: // net-export, aby zapisać netlog i zewnętrzną katapultę netlog_viewer, aby je wyświetlić”. , ale chrome: // net-export działa fantastycznie.
Jordan
108

Żądanie cecha wspomniano w komentarzu przez phsource został wdrożony.

W najnowszych wersjach (począwszy od Chrome 50) możesz przejść do menu Ustawień narzędzi dla programistów (otwórz Narzędzia dla programistów, a następnie użyj menu z trzema kropkami lub naciśnij F1) i zaznacz pole „Automatycznie otwieraj DevTools dla wyskakujących okienek”.


źródło
13
Działa dobrze, z tą różnicą, że włączenie „Zachowaj dzienniki” jest nieco trudne natychmiast po otwarciu okna.
Erwin Mayer,
Powinieneś zaktualizować swoją odpowiedź, ponieważ wersja chromowana stabilna to obecnie 55
Lulu
5
Westchnienie, nowe okno nie ma jednak aktywowanej opcji <Zachowaj dzienniki>. Co jest nie tak z inżynierami Chrome?
Pacerier
Użyj tego w połączeniu z stackoverflow.com/a/29029881/145400 (świetna odpowiedź na „Chrome Dev Tools, czy można pozostawać otwarte nawet po zamknięciu okna?”)!
Dr Jan-Philip Gehrcke
użyj menu z trzema kropkami lub naciśnij> strona preferencji> DevTools> „Automatyczne otwieranie DevTools dla wyskakujących okienek”
holly
27

W przeglądarce Chrome 61.0.3163.100 dostępna jest teraz następująca opcja. Dostęp do niego można uzyskać, przechodząc do Ustawień Narzędzi Chrome. Jest na dole.

Ustawienia inspektora internetowego

Konrad Piascik
źródło
3
Niestety nie aktywuje to „Zachowaj dzienniki” w nowo otwartym oknie, więc jeśli pojawi się nowe okno i przekierowanie w tym oknie, dziennik sieci zostanie wyczyszczony i rozpocznie się po przekierowaniu.
janh
4
Ustawienie dla tych, którzy nie chcą klikać łącza, aby zobaczyć obraz, to „Automatyczne otwieranie DevTools dla wyskakujących okienek”, pod nagłówkiem „DevTools”. Inne dostępne ustawienia: „Zachowaj dziennik”, w „Sieci”; „Zachowaj dziennik podczas nawigacji” w „Konsoli”.
hlongmore
2
To działa dla mnie (Chrome 76), a to jest aktywowanie „Zachowaj dzienników”, gdy uruchamia tools.This developer wyskakujące okienka mogą być aktywowane przez mnie posiadające Zachowaj rejestrować aktywowane?
Vince Bowdren,
11
  • Dodaj / zaktualizuj link do target="_self"
  • Zaznacz „zachowaj dzienniki podczas nawigacji” na karcie Sieć.
  • Kliknij link, aby zarejestrować Twoje żądanie
Sebastien Lorber
źródło
10

Możesz to zrobić w ten sposób:

  1. ustaw target = "any_window_name" na pożądanym linku.
  2. kliknij ten link jeden raz, aby otworzyć go w nowej karcie.
  3. Na otwartej karcie otwórz narzędzia programistyczne.

  4. wróć do strony początkowej i ponownie kliknij ten link.

    Wynik zostanie załadowany do już przygotowanego okna z otwartymi narzędziami programistycznymi.

    Możesz aktywować opcję „zachowaj dziennik” w narzędziach programistycznych (patrz doskonała odpowiedź Konrada Dzwinela), aby przechwytywać ruch przekierowujący na tym łączu.

    Uwaga : większość ludzi zna cel linków target {_self, _blank, _parent, _top}. Ale w rzeczywistości można podać dowolną nazwę, spowoduje to otwarcie nowego okna o tej nazwie, a wszelkie kolejne kliknięcia linków, formularzy lub okna. Otwarte o tej samej wartości docelowej zostaną otwarte w tym samym oknie. dalsze czytanie - znacznik mdn: window.open , mdn: <a>

Michael L.
źródło
Dziękuję bardzo za tę wskazówkę, nigdy bym o tym nie pomyślał. Dokładnie to, czego potrzebowałem. Działa w wielu oknach (przynajmniej w Chrome), jeśli każdy, kto to czyta, chce zobaczyć, jak zachowują się dwie strony w tym samym czasie.
Mark Ormesher
3

Jeśli otwarty link nie przekierowuje, możesz otworzyć kartę Sieć na nowej karcie, a następnie odświeżyć kartę.

orgady
źródło
0

* Oświadczenie: Wysłane przez programistę HttpWatch *

HttpWatch w systemie Windows może rejestrować ruch sieciowy generowany po otwarciu nowej karty lub okna Chrome, włączając automatyczne nagrywanie w menu Narzędzia-> Opcje-> Nagrywanie. W nowym oknie kliknij ikonę HttpWatch, aby wyświetlić ślad sieci.

Darmowa wersja zapewni podstawowe informacje, takie jak adres URL, kod stanu i upływu czasu dla każdego żądania.

* Oświadczenie: Wysłane przez programistę HttpWatch *

HttpWatchSupport
źródło