Alat Dev Chrome: Bagaimana melacak jaringan untuk tautan yang membuka tab baru?

236

Saya ingin melacak aktivitas jaringan yang terjadi ketika saya mengklik tautan. Masalahnya adalah bahwa tautan membuka tab baru, dan tampaknya Alat Dev berfungsi per tab yang terbuka untuknya. "Pertahankan Log Setelah Navigasi" tidak membantu.

Solusi saya saat ini adalah pindah ke FireFox dan HttpFox yang tidak memiliki masalah ini. Saya bertanya-tanya bagaimana semua pengembang untuk mengelola Chrome, ini terdengar sangat mendasar (tentu saja saya sudah mencari jawabannya, tidak menemukan sesuatu yang membantu).

google-chrome google-chrome-devtools davka
sumber
Karena pertanyaan ini mendapat banyak perhatian, saya mulai bertanya-tanya apakah saya dapat memberikan solusi yang lebih baik. Apakah membuat semua tautan untuk dibuka di tab yang sama akan berhasil?
Konrad Dzwinel
@KonradDzwinel Ini adalah tugas satu kali untuk saya dan saya pindah jadi saya tidak bisa memberi tahu Anda. Jika Anda ingin mencoba dan menulis jawaban, saya akan senang menerimanya.
davka
1
Jika Anda menginginkan ini sebagai fitur, silakan
beri

Jawaban:

220

Lihat chrome://net-internals/#events(atau chrome://net-exportdalam versi Chrome terbaru) untuk ikhtisar terperinci dari semua peristiwa jaringan yang terjadi di browser Anda.

Solusi lain yang mungkin, tergantung pada masalah spesifik Anda, mungkin mengaktifkan 'Simpan log' pada tab 'Jaringan':

DevTools> Jaringan> Simpan log

dan memaksa semua tautan untuk membuka di tab yang sama dengan mengeksekusi kode berikut di konsol:

[].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
sumber
13
terima kasih ini keren, tapi saya ingin daftar seperti pada alat dev (permintaan & tanggapan dengan semua tajuk), hanya untuk tab lain
davka
Ini sangat menarik terutama jika Anda memasang filter type:URL_REQUEST, tetapi sepertinya tidak mengandung informasi yang sama dengan tab Jaringan. Misalnya, tampaknya menghapus data cookie untuk permintaan dan tanggapan.
Patrick M
3
document.querySelectorAll('a,form')juga akan mempengaruhi bentuk.
jgb
1
Saya berharap saya bisa membenarkan ini dua kali. Saya telah membuat skrip konten untuk chrome yang melakukan ini pada hotkey, dan itu benar-benar menyelamatkan berjam-jam dalam hidup saya.
polkovnikov.ph
1
Chrome menampilkan "Penampil peristiwa internal-net dan fungsionalitas terkait telah dihapus. Silakan gunakan chrome: // net-ekspor untuk menyimpan netlog dan netlog_viewer katapult eksternal untuk melihatnya." , tapi chrome: // net-export bekerja dengan sangat baik.
Jordan
109

The permintaan fitur yang disebutkan dalam komentar oleh phsource telah dilaksanakan.

Di versi terbaru (dimulai dengan Chrome 50), Anda dapat pergi ke menu Pengaturan Alat Pengembang (buka Alat Pengembang, lalu gunakan menu 3-titik atau tekan F1) dan centang kotak yang mengatakan "Buka otomatis DevTools untuk sembulan".


sumber
13
Berfungsi dengan baik, kecuali agak sulit untuk mengaktifkan "Simpan log" segera setelah jendela dibuka.
Erwin Mayer
Anda harus memperbarui jawaban Anda, karena versi krom stabil saat ini 55
Lulu
5
Sigh, jendela baru itu belum mengaktifkan <Preserve Logs>. Apa yang salah dengan insinyur Chrome?
Pacerier
Gunakan ini dalam kombinasi dengan stackoverflow.com/a/29029881/145400 (jawaban yang bagus untuk "Tools Chrome Dev apakah mungkin untuk tetap terbuka bahkan setelah jendela ditutup?")!
Dr. Jan-Philip Gehrcke
gunakan menu 3-titik atau tekan> halaman preferensi> DevTools> "Buka otomatis DevTools untuk sembulan"
holly
27

Di Chrome 61.0.3163.100 Anda sekarang memiliki opsi berikut yang tersedia. Itu diakses dengan masuk ke Pengaturan Alat Dev Chrome. Itu di bawah.

Pengaturan Inspektur Web

Konrad Piascik
sumber
3
Sayangnya, ini tidak mengaktifkan "Preserve Logs" di jendela yang baru dibuka, jadi jika Anda mendapatkan jendela baru dan pengalihan di jendela tersebut, log jaringan akan dihapus dan mulai setelah pengalihan.
janh
4
Pengaturan, bagi mereka yang tidak ingin mengklik tautan untuk melihat gambar, adalah "Buka otomatis DevTools untuk sembulan", di bawah judul "DevTools". Pengaturan lain yang tersedia: "Simpan Log", di bawah "Jaringan"; "Simpan log saat navigasi" di bawah "Konsol".
lama
2
Ini berfungsi untuk saya (Chrome 76), dan ini mengaktifkan "Preserve Logs" ketika meluncurkan alat pengembang jendela popup. Ini mungkin diaktifkan oleh saya setelah pengaturan Preserve Log diaktifkan?
Vince Bowdren
11
  • Tambahkan / perbarui tautan ke target="_self"
  • Centang "simpan log setelah navigasi" di tab Jaringan.
  • Klik tautannya dan permintaan Anda dicatat
Sebastien Lorber
sumber
10

Anda bisa melakukannya dengan cara ini:

  1. set target = "any_window_name" pada tautan yang diinginkan.
  2. klik tautan itu sekali, untuk membukanya di tab baru.
  3. Di tab yang terbuka, buka alat pengembang.

  4. kembali ke halaman asal dan tekan tautan itu lagi.

    Hasilnya akan dimuat di jendela yang sudah disiapkan dengan alat pengembang dibuka.

    Anda dapat mengaktifkan opsi "simpan log" di alat dev (lihat di Konrad Dzwinel jawaban yang sangat baik) untuk menangkap lalu lintas pengalihan pada tautan itu.

    Catatan : kebanyakan orang terbiasa dengan target tautan ∈ {_self, _blank, _parent, _top}. Tetapi sebenarnya nama apa pun dapat diberikan, ini akan membuka jendela baru dengan nama itu, dan klik berikutnya pada tautan, formulir atau jendela. Buka dengan nilai target yang sama akan dibuka di jendela yang sama. bacaan lebih lanjut - mdn: window.open , mdn: tag <a>

Michael L.
sumber
Terima kasih banyak atas tip ini, saya tidak akan pernah memikirkannya. Apa yang saya butuhkan. Bekerja di beberapa jendela (setidaknya di Chrome), jika ada orang yang membaca ini ingin melihat bagaimana dua halaman berperilaku pada saat yang sama.
Mark Ormesher
3

Jika tautan yang dibuka tidak mengalihkan, Anda dapat membuka tab Jaringan di tab baru lalu menyegarkan kembali tab tersebut.

orgads
sumber
0

* Penafian: Diposting oleh Pengembang HttpWatch *

HttpWatch pada Windows dapat merekam lalu lintas jaringan yang dihasilkan ketika tab atau jendela Chrome baru dibuka dengan mengaktifkan perekaman otomatis di Alat-> Opsi-> Rekaman. Di jendela baru klik pada ikon HttpWatch untuk melihat jejak jaringan.

Versi gratis akan memberikan informasi dasar seperti URL, kode status dan waktu yang telah berlalu untuk setiap permintaan.

* Penafian: Diposting oleh Pengembang HttpWatch *

Dukungan HttpWatch
sumber