Saya seorang pengembang web pemula, dan saya telah merekomendasikan Firebug untuk debugging beberapa kali. Sejauh ini, bagaimanapun, saya baru saja menggunakan Alat Pengembang bawaan Chrome. Tampaknya melakukan semua yang dilakukan Firebug, dan lebih bersih serta lebih teratur sebagai bonus.
Saat saya semakin mahir dalam proses debug, apakah ada fitur yang dimiliki Firebug yang akan saya lewatkan dengan DevTools Chrome? Jika ya, apakah itu?
Jawaban:
Saya menggunakan Firebug sejak awal dan itu adalah berkah seperti penemuan api. Tapi kemudian Chrome keluar dengan debuggernya dan saya mencobanya. Saya terus menggunakan Firebug, tetapi mengawasi alat dev Chome dan akhirnya tidak dapat lagi menemukan alasan untuk tidak beralih setelah alat JSON ditambahkan di v12.
DevTools Chrome sangat bagus karena memiliki:
PEMBARUAN: 2 tahun kemudian saya harus memberi selamat kepada tim Firefox karena telah membuat terobosan besar. Meskipun demikian, tim Chrome dan debugger membuat lompatan besar setiap bulan, memimpin industri. Saya akan memperbarui daftar di atas, tetapi terus terang itu akan memenuhi seluruh halaman.
Saya belum menemukan fitur Firebug yang saya lewatkan setelah beralih ke Chrome.
Alat Pengembang Chrome mengambil alih fitur Firebug, jadi semua fitur utama dan keakraban ada di sana (seperti $0, dan consoleobjek).
Ada beberapa perbedaan kecil, seperti DevTools tidak memiliki panel CSS (meskipun stylesheet CSS dapat dimanipulasi di panel Elements ).
Alat Chrome juga memiliki Timeline , Profiles dan Storage . The Timeline panel log pemuatan, CSS rendering, dan parsing JavaScript. The Profil profil panel penggunaan sumber daya dan Storage menunjukkan panel dan memungkinkan perubahan dalam database situs, penyimpanan lokal, penyimpanan sesi, dan cookies.
Terakhir, kedua alat memiliki varian kecilnya sendiri, yang membuat berbagai tindakan sedikit lebih mudah atau lebih sulit. Saran saya adalah menggunakan Firebug untuk Firefox, dan DevTools untuk browser Webkit, karena hanya Firebug Lite yang berfungsi di Chrome, dan tidak memiliki banyak fitur yang dimiliki Firebug normal (dan DevTools dibangun di dalam Chrome).
Saya merasa jauh lebih nyaman menggunakan Firebug. Saat ini saya tidak dapat memikirkan secara spesifik, tetapi terkadang saya akan mencoba men-debug sesuatu di Safari atau Chrome dan tampaknya seperti PITA sehingga saya meluncurkan Firefox dan menyelesaikan apa pun dengan cepat.
Tab DOM adalah nilai tambah, salah satunya. Ini lebih mudah diakses dan ditata dengan baik daripada yang setara dengan Chrome. Saya lebih suka cara DOM dan objek JS lainnya dicatat ke konsol di Firebug juga.
Plug-in Firebug seperti Pixel Perfect juga sangat berguna. Saya tidak tahu apakah ada alat seperti itu untuk Chrome.
Secara keseluruhan, itu tidak masalah karena Anda harus menguji di kedua browser. Dan IE, jadi sebaiknya bandingkan dengan alat Dev IE (yang telah ditingkatkan, tetapi masih tidak bagus dibandingkan dengan FF atau Webkit).
Saya tidak berpikir ada sesuatu yang maju khususnya di Firebug tetapi tidak di Chrome yang akan Anda lewatkan.
EDIT : Ini dulunya benar, tetapi Alat Pengembang Chrome menerapkannya.
Firebug dapat mencari di semua skrip yang dimuat pada halaman. Alat Pengembang Chrome hanya dapat menelusuri dalam skrip yang saat ini dipilih, AFAIK.
Sejauh yang saya tahu, Firebug adalah satu-satunya yang dapat mengedit kode HTML dan teks secara langsung saat Anda mengetiknya. Sangat berguna, jika Anda misalnya mencoba melihat bagaimana teks akan muat dalam sebuah wadah dan menambahkan satu karakter pada satu waktu.
Di Chrome ketika Anda mengedit HTML, Anda harus menekan TAB atau ENTER untuk keluar dari "mode edit", dan melihat perubahan pada halaman Anda.
Di Firebug Anda juga bisa langsung memasukkan kode HTML. Di Chrome, Anda harus mengklik kanan dan memilih "Edit HTML". Jika tidak, akan muncul seperti <b> tebal </b>.
Saya sangat ingin beralih ke Chrome, karena sepertinya Chrome berjalan lebih cepat, tetapi pengeditan langsung terlalu penting bagi saya.
Firebug pilihan mouse sangat bagus, tetapi saya tidak dapat menemukannya di Alat Pengembang Chrome.
Ini mengganggu saya karena saya tidak dapat menemukan kunci pintas untuk itu di firebug, sedangkan chrome sama sekali tidak memilikinya.
Saya seorang pengembang pemula, jadi mouse masih digunakan sebagian besar waktu saat mengembangkan.
Pada saat pertanyaan ini diajukan, Firebug adalah binatang buas, tetapi sekarang Alat Pengembang Chrome (DevTools) berguna untuk pengembang web. Meskipun saya tidak mengomel tentang Firebug karena saya telah mempelajari pengembangan web menggunakan Firefox dengan Firebug.
Itu adalah alat yang hebat untuk pengembangan web dan memperkenalkan semua fitur utama DevTools dan DevTools Firefox. Namun, saya beralih ke Chrome DevTools meskipun tidak mencakup semua fitur Firebug, karena mereka berbobot ringan dan jauh lebih cepat daripada Firebug, mengakses localStorage dengan mudah ditentukan dan sumber diatur di sana menurut pendapat saya.
Di sini saya akan membuat daftar bagaimana fitur-fiturnya unik di Firebug,
Cari :
Opsi pencarian didefinisikan dengan baik di Firebug, karena mudah diakses dan kita dapat mencari kata kunci dengan case-sensitive dan regular expression .
DOM:
Struktur DOM dapat dengan mudah diakses di Firebug dengan berbagai opsi pemfilteran seperti Tampilkan Properti yang Ditentukan Pengguna , Tampilkan Fungsi yang Ditentukan Pengguna, dan sebagainya.
Kue:
Firebug memungkinkan kita membuat cookie sendiri dan memberikan ketentuan untuk mengekspor cookie .
Jaringan / Net:
Firebug memiliki panel Net sedangkan DevTools menyebutnya Jaringan . Keduanya berguna untuk menganalisis semua permintaan yang dibuat untuk memuat sumber daya dan statusnya. Di Firebug, kita dapat dengan mudah menangkap IP Jarak Jauh sumber daya .
Sumber:
Meskipun Source Edit tersedia di DevTools, saya merasa Firebug lebih baik saat menggunakan Source Edit , karena jika Anda ingin mengedit file CSS di dalam DevTools, Anda harus pergi ke panel Sources , lalu tekan Ctrl+ Ountuk menemukan file tersebut. Hanya dengan begitu Anda dapat mengedit file tersebut. Di Firebug Anda dapat dengan mudah menemukan Edit Sumber di bawah setiap tab menu.
Dukungan untuk dojo:
Setelah saya menjadi pengembang dojo, Firebug dengan mudah diperluas untuk mendukung pengembangan dojo dengan menggunakan Ekstensi Firebug Dojo .
Firebug 2.0 yang dilihat secara obyektif memiliki banyak fitur kecil, yang tidak dimiliki Chrome DevTools. Beberapa di antaranya tercantum di sini:
Umum
Sebuah "fitur" yang melampaui kegunaan adalah bahwa Firebug adalah open source . Jadi semua orang bisa berpartisipasi di dalamnya.
Karena itu, Chrome DevTools (serta Firefox DevTools) memiliki lebih banyak fitur dan keunggulan lain yang lebih kecil dan lebih besar dibandingkan Firebug karena tim di belakang Firebug sangat kecil dibandingkan dengan tim di belakang DevTools lainnya.
Selain itu, Firebug 3+ terintegrasi ke dalam Firefox DevTools bawaan , yang berarti versi tersebut mewarisi semua fitur Firefox DevTools dan dapat menambahkan fitur tambahan.
Firebug memiliki kemungkinan untuk memasang plugin lain seperti Firecookie . Selebihnya mereka sangat mirip, menurut saya ini semua tentang rasa.
chrome.devtoolsAPI .
Saya pikir alat pengembangannya serupa tetapi saya mengalami kesulitan memaksa Chrome untuk tidak menyimpan apa pun. Bahkan pengaturan Chrome "Nonaktifkan cache" tidak berhasil 100% dari waktu; Saya tidak yakin kenapa.
Saya tidak mengalami masalah ini dengan Firefox / Firebug, jadi saya masih menggunakannya.
Menambahkan beberapa sen saya ...
Chrome Inspector tidak dapat mengurutkan properti CSS menurut abjad karena Firebug dapat melakukan ini seperti jimat. Ini membantu ketika Anda memeriksa beberapa elemen css dan perlu mengambilnya, firebug berguna dalam hal ini.
Sesuai dengan praktik pengkodean CSS yang baik, selalu lebih baik jika properti CSS Anda diurutkan menurut abjad dalam kode Anda.
Saat Anda mengerjakan proyek yang terlibat dengan banyak skrip. Di firebug di bawah tag skrip, Anda memiliki opsi untuk mencari file js di kotak saran yang disediakan. Sedangkan dengan chrome Anda akan memiliki tampilan pohon lumpuh untuk menemukan file JS Anda yang membosankan untuk melihat namespacing file js Anda dan melintasi pohon itu.
Opsi ini mungkin tidak memengaruhi siapa pun yang terlibat dengan file JS kecil dalam proyek mereka. Fitur ini sangat cocok dengan firebug yang saya gunakan ketika skrip saya lebih dari 1000 file JS.
Hampir beralih hari ini tetapi saya perhatikan saya tidak dapat mengklik kanan pada CSS yang dimodifikasi di Chrome dan menyalin deklarasi Aturan atau Gaya seperti yang saya bisa di firebug. TUHAN Saya berharap firefox tidak tiba-tiba mulai mengisap atau saya tidak akan memiliki masalah ini.
Saya suka alat pengembang Chrome tetapi kadang saya melewatkan fitur canggih ini dari firebug.
Fitur permintaan "Edit dan Kirim Ulang"
Dengan fitur "Edit dan Kirim Ulang" di alat Pengembang Firefox (Putar Ulang XHR atau sesuatu di Firebug), Anda dapat memutar ulang permintaan XHR dengan perubahan dalam permintaan termasuk header permintaan, isi permintaan, metode http, dan bahkan url. Replay XHR Google Chrome hanya memutar ulang permintaan, dan tidak mengizinkan modifikasi apa pun pada permintaan.
Saya menggunakan Firefox Devtools saat saya membutuhkan fitur ini.