Cara menggunakan debugger jaringan Chrome dengan arahan ulang

379

Debugger jaringan Chrome memberi saya tampilan bagus dari semua sumber daya HTTP yang dimuat untuk satu halaman. Tapi itu membersihkan daftar setiap kali halaman HTML tingkat atas baru dimuat. Ini membuatnya sangat sulit untuk men-debug halaman yang secara otomatis memuat ulang karena satu dan lain hal (menjalankan skrip atau 300 tanggapan).

Dapatkah saya memberi tahu Chrome untuk tidak menghapus debugger jaringan ketika halaman tingkat atas baru dimuat? Atau bisakah saya kembali dan melihat sumber daya jaringan halaman sebelumnya?

Atau bisakah saya memaksa Chrome untuk berhenti sebelum memuat halaman baru ketika saya tidak mengontrol halaman yang saya coba debug yang melakukan pengalihan? Ini adalah bagian dari tarian OpenID yang serba salah, jadi kombinasi SSL dan kredensial membuatnya sangat sulit untuk di-debug dengan alat baris perintah.

http google-chrome google-chrome-devtools Leopd
sumber
Bagaimana duplikat ini mendapatkan lebih banyak suara daripada yang diposting 1 bulan sebelumnya? stackoverflow.com/q/10703944/632951
Pacerier
6
@Pacerier Yang Anda tautkan tampaknya tidak diposting oleh Anda, tetapi alasannya sepertinya tidak memiliki "Chrome" di judulnya. Ketika orang mencari sesuatu yang berhubungan dengan Chrome, pencarian mereka biasanya menyertakan kata kunci Chrome. "Alat Pengembang Google" sangat ambigu.
Joel Mellon
gist.github.com/InstanceOfMichael/f6a509b84fe82a718816
diosney

Jawaban:

527

Ini telah diubah sejak v32, terima kasih kepada @Daniel Alexiuc & @Thanatos atas komentar mereka.

Saat ini (≥ v32)

Di bagian atas tab "Jaringan" DevTools, ada kotak centang untuk mengaktifkan fungsionalitas "Simpan log". Jika dicentang, log jaringan dipertahankan pada pemuatan halaman.

Tab Jaringan Chrome v33 DevTools: Preserve Log

Titik merah kecil di sebelah kiri sekarang memiliki tujuan untuk mengaktifkan dan menonaktifkan logging jaringan sepenuhnya.

Versi yang lebih lama

Di versi Chrome yang lebih lama (v21 di sini), ada titik merah kecil yang dapat diklik di bagian bawah tab "Jaringan".

Tab Jaringan Chrome v22 DevTools: Pertahankan Log Saat Navigasi

Jika Anda mengarahkan kursor itu, ia akan memberi tahu Anda, bahwa itu akan "Pertahankan Log Setelah Navigasi" ketika diaktifkan. Itu memegang janji.

bfncs
sumber
1
Dalam versi 32 itu masih ada, tetapi telah pindah ke bagian atas panel jaringan.
Daniel Alexiuc
4
Sebenarnya, ini sekarang di bagian atas, tetapi disebut "Simpan log", dan merupakan kotak centang. Yang membingungkan, masih ada ikon catatan merah, tapi itu hanya apakah akan login sama sekali.
Thanatos
1
Terima kasih telah mengomentari perubahannya, saya baru saja memperbarui jawabannya.
bfncs
@ruben, antarmuka memang sekarang terlihat sedikit berbeda, tetapi masih ada kotak centang berlabel "Simpan log" di bagian atas tab jaringan: i.imgur.com/fhSDYSz.png
bfncs
14
@ rubenlop88 Pastikan Anda tidak memfilter pada Dokumen , jika tidak, dokumen tersebut tidak akan bertahan di sana. Anda dapat memeriksanya secara khusus di tab Lain .
alex
173

Saya tidak tahu cara memaksa Chrome untuk tidak menghapus debugger Jaringan, tetapi ini mungkin mencapai apa yang Anda cari:

  1. Buka konsol js
  2. window.addEventListener("beforeunload", function() { debugger; }, false)

Ini akan menjeda chrome sebelum memuat halaman baru dengan menekan breakpoint.

Matt York
sumber
55
Ini bukan jawaban yang tepat untuk pertanyaan itu, tetapi sebenarnya itulah yang saya cari. Terima kasih.
isaaclw
2
Ini sangat apik. Saya tiba di sini mencari solusi "jeda sebelum redirect" dan ini dia. Jawaban yang diterima lebih mudah diingat tetapi ini adalah rad.
Joel Mellon
19
Ini sangat berguna, karena chrome tidak menunjukkan badan respons server, jika browser langsung diarahkan setelah mendapatkan respons.
Kristóf Dombi
23

Cukup perbarui jawaban @bfncs

Saya pikir sekitar Chrome 43 perilaku itu sedikit berubah. Anda masih perlu mengaktifkan Simpan log untuk melihat, tetapi sekarang redirect ditampilkan di bawah tab Lainnya, ketika dokumen dimuat ditampilkan di bawah Doc.

Ini selalu membingungkan saya, karena saya memiliki banyak permintaan jaringan dan memfilternya dengan mengetikkan XHR, Doc, JS, dll. Tetapi dalam kasus redirect, tab Doc kosong, jadi saya harus menebak.

sf
sumber
1
Anda adalah pahlawan yang saya cari!
Matthew Haworth
23

Solusi hebat lain untuk men-debug panggilan Jaringan sebelum mengalihkan ke halaman lain adalah memilih beforeunload titik istirahat acara

Dengan cara ini Anda memastikan untuk memutus aliran tepat sebelum mengarahkannya ke halaman lain, dengan cara ini semua panggilan jaringan, data jaringan dan log konsol masih ada.

Solusi ini paling baik ketika Anda ingin memeriksa apa tanggapan dari panggilan

Chrome sebelumunload break point acara

PS: Anda juga dapat menggunakan titik istirahat XHR jika Anda ingin berhenti tepat sebelum panggilan tertentu atau panggilan apa pun (lihat contoh gambar) Break point XHR

Ofear
sumber
2
Ini bagus. Dengan loadacara tersebut, kita bisa berhenti di awal dan mengatur break point dengan mudah. Terima kasih!
LeOn - Han Li