Minta Pemantauan di Chrome

208

Di Firefox, saya menggunakan Firebug yang memungkinkan saya untuk melihat setiap permintaan http yang dibuat oleh panggilan ajax saya. Saya telah mengalihkan pengembangan saya ke Chrome dan sejauh ini saya menyukainya. Satu-satunya keluhan saya, bagaimanapun, adalah bahwa alat pengembang tampaknya tidak memungkinkan Anda untuk melihat setiap permintaan ajax. Saya pernah mengalami hal itu di mana panel Sumber Daya menunjukkan banyak permintaan ke sumber daya yang sama, tetapi itu hanya dilakukan sekali dan tidak pernah lagi.

Apakah ada cara untuk secara andal melihat setiap permintaan http yang dibuat laman melalui javascript dari dalam Chrome?

[Sunting: 11/30/09 11:55]

Saat ini, untuk menyiasati ini, saya menjalankan Fiddler di sebelah Chrome untuk melihat permintaan saya, tetapi jika ada cara untuk melakukannya dari dalam browser, saya lebih suka itu.

Wes P
sumber
2
Saya memiliki masalah yang sama-sudah mencoba semua solusi di sini. Tidak ada yang muncul di bagian Respon dari jendela XHR di alat dev. Itu hanya menunjukkan "Permintaan ini tidak memiliki data respons yang tersedia". Jika saya menjalankan kode yang sama menggunakan pembakar, itu muncul dengan baik. dalam pengaturan alat cog dev, saya telah mencoba mencentang "Log XMLHttpRequest" tetapi ini tidak membantu (tipe respons adalah aplikasi / json). Saya harus melakukan semua debugging di firebug. Firebug juga memformat JSON dengan baik, alat dev krom tidak jika Anda bisa menampilkannya untuk respons (misalnya dengan tidak menggunakan ajax).
John Little

Jawaban:

359

Saya tahu ini adalah utas lama tapi saya pikir saya akan berpadu.

Chrome saat ini memiliki solusi bawaan.

  1. Gunakan CTRL+SHIFT+I(atau navigasikan ke Current Page Control > Developer > Developer Tools. Di versi Chrome yang lebih baru, klik ikon Kunci Inggris> Alat> Alat Pengembang.) Untuk mengaktifkan Alat Pengembang.
  2. Dari dalam alat pengembang klik Networktombol. Jika belum, aktifkan untuk sesi atau selalu.
  3. Klik "XHR"sub-tombol.
  4. Memulai sebuah AJAX call.
  5. Anda akan melihat item mulai muncul di kolom kiri di bawah "Resources".
  6. Klik sumber daya dan ada 2 tab yang menampilkan tajuk dan kembalikan konten.
Phil
sumber
2
Phil terima kasih! Saya telah mengesampingkan ini dan sebagian besar mengandalkan Fiddler. Tapi tombol XHR itulah yang saya cari: D
Wes P
baru kemarin saya berbicara bahwa jika alat chrome bisa melakukan ini, itu akan menjadi sempurna, terima kasih.
Germán Rodríguez
3
Hai semua, cobalah untuk menemukan "sub-tombol XHR" Saya pikir saya mungkin kehilangan itu, dapatkah seseorang memberi tahu saya di mana itu? inilah yang terlihat seperti inspektur saya imgur.com/9e6yDcB
David Williams
2
Ini sepertinya hanya terjadi jika panggilan AJAX mendapat respons, tetapi itu tidak menunjukkan kepada Anda permintaan keluar yang mungkin tidak mengharapkan tanggapan. Adakah yang tahu cara mengaktifkannya?
MoMo
1
Jika halaman dialihkan pada jendela yang sama Anda dapat menggunakan kotak centang 'Simpan Log' di bagian atas opsi tab jaringan (jika tidak, Anda dapat mengubah tautan itu untuk membuka di jendela yang sama dengan pengaturan target='_self'). Lalu, misalnya, Anda dapat melihat respons dari formulir yang dikirimkan setelah mengalihkan Anda. Pastikan juga melihat filter saat respons menumpuk di halaman baru.
JeremyS
57

Jawaban paling mutakhir untuk ini adalah: mereka terdaftar di bawah tombol 'Jaringan' di alat pengembang, tidak lagi di bawah 'Sumber Daya' seperti dulu.

Wouter
sumber
5
Memang di situlah sekarang, butuh saya mencari stack overflow untuk menemukannya setelah upgrade.
Kzqai
42

Memperbarui

Chrome mengubah cara memeriksa permintaan dan menyarankan sekarang untuk menggunakan Penampil Netlog Catapult dengan log yang diekspor dari chrome: // net-export /

chrome://net-export/

Info lebih lanjut

Versi Chrome Lama

Anda juga dapat menggunakan tautan ini di Chrome untuk informasi lebih rinci daripada yang dilakukan pemeriksa.

chrome://net-internals/#events

Ini menunjukkan log semua permintaan browser saat terbuka

Karl Adler
sumber
Bisakah Anda mengekspornya?
Pacerier
14

tidak tahu versi Chrome mana yang tersedia, tetapi saya menemukan pengaturan 'Konsol - Log XMLHttpRequests' (mengklik ikon di sudut kanan bawah alat pengembang di chrome di mac)

schellmax
sumber
3
Ini adalah cara termudah dan terbaik untuk memonitor permintaan XHR.
CourtDemone
6

Buka DevTools Anda dan tekan F1 untuk mengakses pengaturan. Cari bagian konsol dan centang kotak "Log XMLHttpRequests".

Sekarang semua ajax Anda dan permintaan serupa lainnya akan dicatat di konsol.

Saya lebih suka metode ini karena biasanya memungkinkan saya untuk melihat semua yang saya cari di konsol tanpa harus pergi ke tab jaringan.

ShaneDaugherty
sumber
4

Anda bisa menggunakan Fiddler yang merupakan alat gratis yang bagus.

JoshBerke
sumber
1
Ya, saya punya Fiddler yang saya gunakan untuk melakukan ini. Hanya mencari cara untuk melakukannya dari dalam browser, karena ini sedikit lebih nyaman.
Wes P
3

Terima kasih semua orang yang mencoba membantu dalam posting ini

Saya memiliki ubuntu 13.10 dan versi chrome saya adalah 34.0

Untuk situasi saya ini berfungsi

1.open developer tools in chrome(or use right click on your page and then select inspect element)
2.go to "Network" tab
3.find your ajax request in "Name Path" column 
4.click on the specific ajax link

sekarang Anda akan melihat Panel baru di depan permintaan Anda

in this panel select "Response" tab
masoud2011
sumber
1

Pada langkah 5 dari Phil, "Sumber Daya" tidak lagi tersedia di versi baru Chrome. Anda perlu mengklik ikon halaman tepat di samping halaman Ajax yang tercantum di panel bawah dengan kolom Nama, Metode, Status, ...

Maka itu akan menunjukkan lebih banyak panel di mana Anda akan menemukan pesan kesalahan.

wcb1
sumber