Chrome Geliştirme Araçları: Yeni bir sekme açan bir bağlantı için ağı nasıl izleyebilirim?


236

Bir bağlantıyı tıkladığımda gerçekleşen ağ etkinliğini izlemek istiyorum. Sorun, bağlantının yeni bir sekme açması ve görünüşe göre Dev Tools açık olduğu sekme başına çalışıyor. "Navigasyonda Günlüğü Koru" yardımcı olmaz.

Şu anki çözümüm bu sorunu olmayan FireFox ve HttpFox'a geçmektir. Chrome için tüm geliştiricilerin nasıl yönettiğini merak ediyorum, bu oldukça basit geliyor (elbette cevabı aradım, yararlı bir şey bulamadım).


Bu soru oldukça dikkat çektiğinden, daha iyi bir çözüm sunup sunamayacağımı merak etmeye başladım. Tüm bağlantıları aynı sekmede açmak, hile yapar mı?
Konrad Dzwinel

@KonradDzwinel Bu benim için bir defalık bir görevdi ve devam ettim, bu yüzden size söyleyemem. Eğer bir cevap yazmayı denerseniz, bunu kabul etmekten memnuniyet duyarım.
davka

1
Bunu bir özellik olarak istiyorsanız, şu Chromium hatasını
yıldızlamaktan çekinmeyin

Yanıtlar:


220

Tarayıcınızda gerçekleşen tüm ağ olaylarına ayrıntılı bir genel bakış için göz atın chrome://net-internals/#events(veya chrome://net-exportChrome'un en son sürümünde).


Sorununuza bağlı olarak olası diğer çözümler, 'Ağ' sekmesinde 'Günlüğü koru'yu etkinleştirmek olabilir:

DevTools> Ağ> Günlüğü koru

ve konsolda aşağıdaki kodu yürüterek tüm bağlantıları aynı sekmede açmaya zorlayın:

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

window.open = function(url) {
    location.href = url;
};

13
teşekkürler bu serin, ama ben sadece başka bir sekme için, dev araçları (istek ve yanıt tüm başlıklar) listeyi istiyorum
davka

Bu, özellikle filtreyi reklamlarsanız çok ilginçtir type:URL_REQUEST, ancak Ağ sekmesi ile aynı bilgileri içermiyor gibi görünüyor. Örneğin, hem istekler hem de yanıtlar için çerez verilerini kaldırmış gibi görünüyor.
Patrick M

3
document.querySelectorAll('a,form')formları da etkiler.
jgb

1
Keşke bunu iki kez tekrarlayabilseydim. Chrome için bunu bir kısayol tuşuyla yapan bir içerik komut dosyası hazırladım ve kelimenin tam anlamıyla hayatımdan saatler geçirdi.
polkovnikov.ph

1
Chrome, "net-internals olay görüntüleyicisi ve ilgili işlevler kaldırıldı. Netlog'ları kaydetmek için lütfen chrome: // net-export ve bunları görüntülemek için harici mancınık netlog_viewer'ı kullanın." , ancak chrome: // net-export harika çalışıyor.
Ürdün

109

Özellik isteği phsource tarafından yorumunda belirtildiği uygulamaya konmuştur.

Son sürümlerde (Chrome 50'den başlayarak), Geliştirici Araçları Ayarları menüsüne gidebilir (Geliştirici Araçları'nı açabilir, ardından 3 nokta menüsünü kullanabilir veya F1tıklayabilirsiniz) ve "Pop-up'lar için DevTools'u otomatik aç" kutusunu işaretleyebilirsiniz.


13
Pencere açıldıktan hemen sonra "Günlükleri koru" özelliğini etkinleştirmenin biraz zor olması dışında iyi çalışır.
Erwin Mayer

Krom kararlı sürüm şu anda 55
Lulu

5
Ancak, yeni pencerede <Günlükleri Koru> etkin değil. Chrome mühendislerinde sorun nedir?
Pacerier

Bunu stackoverflow.com/a/29029881/145400 ile birlikte kullanın ("Chrome Geliştirme Araçları'na harika bir yanıt, pencere kapatıldıktan sonra bile açık tutmak mümkün mü?")!
Dr.Jan-Philip Gehrcke

3 nokta menüsünü kullanın veya isabet> tercihler sayfası> DevTools> "Pop-up'lar için DevTools'u otomatik aç"
holly

27

Chrome 61.0.3163.100'de artık aşağıdaki seçeneğiniz bulunmaktadır. Chrome Geliştirme Araçları Ayarları'na giderek erişilir. En altta.

Web Denetçisi ayarları


3
Bu ne yazık ki, yeni açılan pencerede "Günlükleri Koru" özelliğini etkinleştirmez, bu nedenle yeni bir pencere ve söz konusu pencerede bir yönlendirme alırsanız, ağ günlüğü temizlenir ve yönlendirmeden sonra başlar.
janh

4
Görüntüyü görmek için bağlantıyı tıklamak istemeyenler için ayar "DevTools" başlığı altında "Pop-up'lar için DevTools'u otomatik aç" şeklindedir. Mevcut diğer ayarlar: "Ağ" altında "Günlüğü Koru"; "Konsol" altındaki "Navigasyon sırasında günlüğü koru".
hlongmore

2
Bu (Krom 76) benim için çalışıyor ve bir o açılan pencere geliştirici Tools.This Giriş ayarlaması aktif koru sahip tarafımdan aktive edilebilir başlattığında "Günlükleri koru" aktive?
Vince Bowdren

11
  • Bağlantısını ekle / güncelle target="_self"
  • Ağ sekmesindeki "Gezinme sırasında günlükleri koru" seçeneğini işaretleyin.
  • Bağlantıya tıklayın ve isteğiniz günlüğe kaydedilir

10

Bunu şu şekilde yapabilirsiniz:

  1. aranan bağlantıda target = "any_window_name" değerini ayarlayın.
  2. yeni sekmede açmak için bu bağlantıyı bir kez tıklayın.
  3. Açılan sekmede geliştirici araçlarını açın.
  4. başlangıç ​​sayfasına geri dönün ve bu bağlantıya tekrar basın.

    Sonuç, geliştirici araçları açılmış olarak önceden hazırlanmış pencereye yüklenecektir.

    Bu bağlantıdaki yönlendirme trafiğini yakalamak için geliştirici araçlarında "günlüğü koru" seçeneğini etkinleştirebilirsiniz (bkz. Konrad Dzwinel mükemmel yanıtı).

    Not : bağlantı hedefine aşina olan çoğu insan ∈ {_self, _blank, _parent, _top}. Ancak aslında herhangi bir ad verilebilir, bu o adla yeni bir pencere açar ve daha sonra bağlantılar, formlar veya window.open hedef değerine sahip açıklıklar aynı pencerede açılır. daha fazla okuma - mdn: window.open , mdn: <a> etiketi


Bu ipucu için çok teşekkür ederim, hiç düşünmezdim. Tam olarak ihtiyacım olan şey. Bunu okuyan herkes aynı anda iki sayfanın nasıl davrandığını görmek isterse birden fazla pencerede (en azından Chrome'da) çalışır.
Mark Ormesher

3

Açılan bağlantının yeniden yönlendirilmemesi durumunda, yeni sekmede Ağ sekmesini açabilir ve ardından sekmeyi yenileyebilirsiniz.



0

* Feragat: HttpWatch Geliştiricisi tarafından gönderildi *

Windows'ta HttpWatch , Araçlar-> Seçenekler-> Kayıt'ta otomatik kayıt etkinleştirilerek yeni bir Chrome sekmesi veya penceresi açıldığında oluşturulan ağ trafiğini kaydedebilir. Ağ izini görüntülemek için yeni pencerede HttpWatch simgesine tıklayın.

Ücretsiz sürümü böyle her istek için URL durum kodu ve geçen süre gibi temel bilgiler sağlayacaktır.

* Feragat: HttpWatch Geliştiricisi tarafından gönderildi *

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.