Apa yang setara dengan Google Chrome untuk Firebug?

29

Saya mencari alat yang dapat:

periksa elemen HTML
kelola / debug JavaScript
kinerja profil
memodifikasi elemen secara real-time

— Evan Plaice
sumber

32

Ini dibangun. Halaman [kertas] -> Pengembang -> Alat pengembang (di Chrome v5 dan di bawah). Ini mungkin berbeda di v6 karena tombol Halaman tampaknya menghilang dalam versi itu.

— Mark Hatton
sumber

3

Ada beberapa kelemahan pada alat Google - melihat permintaan ajax tidak semudah, tidak ada mode multiline yang nyaman, Anda tidak dapat mengedit HTML di jendela, itu tidak menunjukkan padding / margin pada hover di pohon HTML, Anda tidak bisa menavigasi DOM yang sebenarnya (hanya pohon HTML) dan yang terakhir, saya menemukan fitur pengeditan CSS hanya lebih rumit - tidak ada pelengkapan otomatis di Google untuk satu hal. Ini masih sangat bermanfaat, tetapi Firebug lebih baik.

— cgp

2

Atau shift-ctrl-I untuk yang malas :)

— Tim Post

1

@Mark Note, saya menggunakan 5.0.375.99. Saya tidak yakin apakah itu membuat perbedaan sekarang atau di masa depan.

— Evan Plaice

1

Di v6 itu Wrench -> Tools -> Developer Tools

— enobrev

17

Klik kanan -> Periksa Elemen

— HoLyVieR
sumber

13

Firebug Lite untuk Google Chrome .

— Emmett
sumber

FireBug Lite adalah alat yang hebat dan juga berfungsi di IE, Opera, Safari, dan Firefox: getfirebug.com/firebuglite

— Nat Ryall

5

Sudah 4 tahun sejak pertanyaan awal diajukan. Chrome (stable) sekarang di versi 38. Untuk waktu yang lama ia telah menyertakan set lengkap Alat Pengembang yang kira-kira setara dengan Firebug untuk Firefox (meskipun secara tidak sengaja Firefox bahkan memiliki inspektur internal juga).

Beberapa hal Alat Pengembang Chrome memungkinkan Anda melakukannya:

Periksa DOM
Periksa CSS
Akses Konsol JavaScript
JavaScript debug
Lihat permintaan, pengaturan waktu, dan respons jaringan
Lihat rendering, JavaScript, dan kinerja CSS
Periksa penyimpanan dan cookie lokal

Alat dev dapat diakses dengan berbagai cara.

Menu Chrome -> Alat -> Alat Pengembang
Ctrl+ Shift+ Idi Windows atau Cmd+ Shift+ Idi Mac
F12 di Windows
Klik kanan di mana saja pada halaman dan pilih Elemen Inspeksi

3

Alat dalam peramban sangat bagus dalam pekerjaan mereka dan biasanya merupakan pilihan terbaik pertama Anda, tetapi kadang-kadang mereka tidak memberikan detail teknis yang cukup pada permintaan HTTP / payload respons, atau terlalu spesifik halaman.

Dalam kasus ini, Anda mungkin menemukan bahwa alat inspeksi HTTP khusus seperti Fiddler atau salah satu alternatif Linux akan memberikan lebih banyak wawasan.

Jika Anda benar-benar perlu mendapatkan bare-metal, Wireshark melampaui HTTP untuk analisis lalu lintas jaringan penuh, tetapi bersiaplah untuk kewalahan pada awalnya.

— JasonBirch
sumber

Saya tidak bisa mengatakan bahwa saya sudah terbiasa dengan fiddler tetapi Wireshark jelas-jelas telanjang. Wireshark benar-benar hanya berguna jika Anda perlu melihat rincian protokol tingkat bawah.

— Evan Plaice

Fiddler lebih dekat dengan alat pengembang firebug / chrome untuk kegunaan. Salah satu tempat yang saya anggap paling berguna adalah ketika menerbitkan file KML di situs web saya; Anda dapat melihat permintaan dan respons dari aplikasi desktop Windows seperti Google Earth, bukan hanya browser web. Saya telah menggunakan Wireshark beberapa kali, tetapi setuju bahwa itu umumnya tidak berguna untuk hal-hal webmaster sehari-hari.

— JasonBirch

1

Anda juga dapat mencoba Pelacak Kecepatan sumber terbuka Google - http://code.google.com/webtoolkit/speedtracer/

Pelacak Kecepatan adalah alat untuk membantu Anda mengidentifikasi dan memperbaiki masalah kinerja dalam aplikasi web Anda. Ini memvisualisasikan metrik yang diambil dari titik instrumentasi tingkat rendah di dalam browser dan menganalisanya saat aplikasi Anda berjalan. Pelacak Kecepatan tersedia sebagai ekstensi Chrome dan berfungsi di semua platform di mana ekstensi saat ini didukung (Windows dan Linux).

Menggunakan Speed Tracer Anda bisa mendapatkan gambaran yang lebih baik tentang di mana waktu yang dihabiskan dalam aplikasi Anda. Ini termasuk masalah yang disebabkan oleh penguraian dan eksekusi JavaScript, tata letak, penghitungan ulang gaya CSS dan pencocokan pemilih, penanganan peristiwa DOM, pemuatan sumber daya jaringan, penghitung waktu kebakaran, panggilan balik XMLHttpRequest, lukisan, dan banyak lagi.

— mvark
sumber