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
development performance google-chrome profiling Evan Plaice
sumber

Jawaban:

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
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


sumber
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