Google Chrome menampilkan respons JSON AJAX sebagai pohon dan bukan sebagai teks biasa

215

Saya tidak dapat menemukan jawaban untuk yang ini:

Panggilan AJAX saya mengembalikan data JSON. Di Google Chrome Alat Pengembang> Sumber Daya> XHR ketika saya mengklik sumber daya di sebelah kiri dan kemudian pada tab Konten saya melihat string JSON sebagai string dan bukan sebagai pohon seperti Firebug dan Firebug Lite lakukan.

Bagaimana cara memaksa Chrome untuk menampilkannya sebagai pohon. Apakah ada tipe konten yang harus dimiliki file PHP saya ???

Saya akan senang mengetahui jawabannya!

Stefanos terima kasih

ajax json google-chrome view tree GRboss
sumber
@Matt McClure jawaban di bawah ini adalah jawabannya!
bcm
Saya juga memiliki masalah mendapatkan struktur pohon ketika string adalah tanda kutip tunggal 'bukannya tanda kutip ganda ", berubah menjadi" membantu
Matt

Jawaban:

426

Untuk melihat tampilan hierarki di versi terbaru Chrome:

Buka Alat Pengembang> Jaringan> respons yang diberikan> Pratinjau

Matt McClure
sumber
105
Benar-benar dipoles pada tab "Pratinjau" dan sedang melihat tab "Respons". Terima kasih!
Ted Naleid
8
Tapi saya pikir untuk mendapatkan ini, Anda harus memiliki tipe konten yang benar.
alexserver
4
Ya, Anda memerlukan tipe konten "application / json" yang valid yang ditentukan untuk chrome untuk memberikan Anda drop-down yang dapat dilipat.
tweak2
5
Ini memang sedikit kurang intuitif, karena pada tab Header mereka membiarkan kami beralih antara "mentah" dan "diurai", jadi orang akan berharap bahwa mereka akan menawarkan tampilan "diuraikan" yang serupa pada tab Respons.
G. Stoynev
1
Saya berharap itu sebenarnya JSON bukan pohon
Simon_Weaver
57

Google Chrome sekarang mendukung ini ( Developer Tools > Network > [XHR item in list] Preview).

Selain itu, Anda dapat menggunakan alat pihak ketiga untuk memformat konten json. Berikut ini salah satu yang menyajikan pemandangan pohon, dan di sini 's lain yang hanya format teks (dan tidak validasi).

Trevor
sumber
6

Jenis konten yang benar untuk data JSON adalah application/json. Saya berasumsi bahwa itulah yang Anda lewatkan.

Quentin
sumber
6
Sayangnya ini masih tidak memaksa Chrome untuk mengubah string JSON menjadi pohon. Terimakasih Meskipun!
GRboss
3

Saya telah menemukan jawabannya:

Anda HARUS menyandikan json Anda seperti ini: {"c":21001,"m":"p"}tetapi tidak {c:21001,m:"p"}atau{'c':21001,'m':'p'}

Dengan demikian, kunci dict harus dibungkus dengan tanda kutip ganda:, "maka chrome akan mempratinjau sebagai json daripada teks biasa.

Bingyan Liu
sumber
7
Itu karena yang pertama adalah JSON yang valid dan contoh lainnya tidak (meskipun mereka javascript yang valid). Lihat simonwillison.net/2006/oct/11/json
styfle
2

Agar dapat menampilkan pesan JSON dengan benar, ia harus memiliki tipe mime "application / json" dan harus terstruktur dengan benar.

Anda dapat memeriksa strukturnya di sini

Mariana B.
sumber
1

Ada masalah dengan build Google Chrome Dev build 24.0.1312.5 yang menyebabkan panel pratinjau tidak lagi menampilkan json object tree tetapi teks yang agak datar. Itu harus diperbaiki di dev berikutnya

Lihat lebih lanjut di sini: http://code.google.com/p/chromium/issues/detail?id=160733

JeffBaumgardt
sumber
0

Saya tidak yakin apakah Chrome telah menambahkan fitur ini sejak jawaban terakhir, tetapi saya dapat melihat respons json dengan ...

  • membuka alat pengembang di browser saat berada di halaman dengan permintaan
  • mengirimkan permintaan
  • di alat pengembang - "Konsol" tab - klik pada pohon "Objek" di bawah sumber daya untuk memperluas

... Saya dapat melihat respons sebagai hierarki yang dapat dibaca yang menunjukkan apa yang harus diminta dan apa yang dikembalikan. (Tab Jaringan atau Sumber Daya tidak memiliki sesuatu yang membantu yang dapat saya temukan.)

Selamat meminta!

Debora
sumber
-1

Anda dapat menggunakan Ekstensi Google Chrome: JSONView Semua hasil json yang diformat akan ditampilkan langsung di browser.

Quang Vu
sumber
2
OP bertanya secara spesifik tentang kode json yang ditampilkan di dalam alat dev.
gali