Debugger seperti Firebug untuk Google Chrome

278

Apakah ada hal seperti Firebug yang dapat Anda gunakan dalam Google Chrome?

Fitur-fitur penting yang saya inginkan:

  • Periksa sumber HTML (pilih elemen, hapus, dll.)
  • periksa nilai-nilai CSS (solusi bawaan aneh, entah bagaimana)
html css google-chrome debugging firebug Sebastian Hoitz
sumber
9
Melihat bahwa Chrome sekarang mendukung ekstensi, dapatkah kita mengunjungi kembali ini karena banyak dari jawaban yang ada sekarang secara teknis salah. Kami harus memperbarui jawaban ini daripada memulai yang baru.
Nathan Koop
3
@Nathan Koop: Saya bisa saja salah, tetapi saya tidak berpikir sistem ekstensi Chrome cukup kuat untuk memungkinkan sesuatu seperti Firebug.
Sasha Chedygov
1
periksa tautan ini untuk mendapatkan pembakar di browser: getfirebug.com/releases/lite/chrome
Techie

Jawaban:

243

Ada alat seperti Firebug yang sudah ada di dalam Chrome. Cukup klik kanan di mana saja pada halaman dan pilih "Periksa elemen" dari menu. Chrome memiliki alat grafis untuk debugging (seperti di Firebug), sehingga Anda dapat men-debug JavaScript. Ini juga melakukan inspeksi CSS dengan baik dan bahkan dapat mengubah rendering CSS dengan cepat.

Untuk informasi lebih lanjut, lihat https://developers.google.com/chrome-developer-tools/

Dmitry Torba
sumber
19
++ Ini cukup baik untuk mengatasi masalah masalah khusus Chrome. Jika saya ingin introspeksi lebih dalam, saya bisa melakukannya dengan Firebug. Sekarang dengan mode pengembang baru IE8, semua browser utama memiliki mode dev bawaan. Waktu yang baik
senjata
1
Ah, butuh saya sedikit untuk menemukannya, tetapi fungsi pengeditan html dari firebug juga ada, di tempat yang sama Anda dapat mengedit css, bilah alat pengembang, klik dua kali elemen, ketik, dan tekan enter, dan di sana Anda pergi, html diedit.
Kzqai
4
Alat Pengembang Chrome (ctrl + shift + j) mendukung debugging Javascript seperti Firebug. Klik pada tab Script kemudian pada ikon kedua di bagian bawah (> =) yang memiliki tooltip "Show console". Dari sana Anda dapat menjalankan perintah Javascript seperti konsol Firebug.
Pierre-Antoine LaFayette
1
Ingat pada beberapa sistem berbasis linux itu tidak dapat diinstal secara otomatis, jadi Anda perlu menginstalnya secara manual: sudo apt-get install chromium-browser-inspector
Manuel
1
Pengembangan dev 4.0.xxxx saat ini memiliki seperangkat alat pengembang. Saya tahu tentang hal-hal elemen memeriksa sebelumnya tetapi tanpa panel "Net" itu tidak cukup baik. Tetapi sekarang ada panel "sumber daya" yang tampaknya bekerja dengan cukup baik dan memiliki semua filter yang sama seperti pembakar (skrip, xhr, gambar, dll). Saya telah menggunakan pembangunan Dev selama seminggu dan tampaknya cukup stabil. Saya akhirnya mengatur browser default saya menjadi chrome - sekarang browser dev saya juga! :)
Mark J Miller
37

Firebug Lite mendukung untuk memeriksa elemen HTML, gaya CSS terkomputasi, dan banyak lagi. Karena murni JavaScript, ia berfungsi di banyak browser berbeda. Cukup sertakan skrip di sumber Anda, atau tambahkan bookmarklet ke bilah bookmark Anda untuk memasukkannya di halaman mana pun dengan satu klik.

http://getfirebug.com/lite.html

gregers
sumber
Tautan bagus! Tidak tahu tentang versi IE
Patrick Desjardins
15

Hanya menambahkan beberapa poin pembicaraan sebagai seseorang yang menggunakan Firebug / Inspektur Chrome setiap hari:

  1. Pada saat penulisan, hanya ada inspektur Google DOM dan tidak ada itu tidak memiliki semua fitur Firebug

  2. Inspektur adalah versi 'lite' dari Firebug: Antarmuka IMO tidak sebaik ini, pemeriksaan elemen pada kedua versi terbaru sekarang kikuk, tetapi Firebug masih lebih baik; Saya menemukan diri saya mencoba menemukan cinta untuk Chrome (karena ini adalah pengalaman browser yang lebih baik, lebih cepat), tetapi untuk pekerjaan pengembangan, itu masih saja menyebalkan bagi saya.

  3. Pratinjau langsung / modifikasi DOM / CSS masih jauh lebih baik di Firebug; CSS yang dihitung dan tampilan model kotak lebih baik di Firebug;

  4. Entah bagaimana itu lebih mudah untuk membaca / menggunakan Firebug mungkin karena kemudahan navigasi, memanipulasi / memodifikasi dokumen di beberapa bidang utama? Siapa tahu. Saya sudah terbiasa dengan antarmuka dan saya pikir Chrome Inspector tidak sebagus meskipun ini adalah hal subjektif yang saya akui.

  5. Tab Cookies / Net sangat berguna bagi saya di Firebug. Mungkin Inspektur Chrome memiliki ini sekarang? Terakhir kali saya memeriksanya tidak, karena Chrome memperbarui dirinya sendiri di latar belakang tanpa campur tangan Anda (mendapat persetujuan Anda secara default seperti semua tuan yang baik).

  6. Poin terakhir: Hari di mana Google Chrome mendapatkan Firebug berfitur lengkap adalah hari pada dasarnya Firefox mati untuk pengembang karena Firefox memiliki 3 tahun untuk membuat mesin layout Firefox Gecko secepat WebKit dan mereka tidak. Maaf untuk mengatakannya terus terang tapi itu kebenarannya.

Anda tahu, sekarang semua orang ingin pindah dari Flash sebagai pengganti jQuery yang dimotivasi oleh aksesibilitas seluler dan interaktivitas (iPhone, iPad, Android) dan JavaScript adalah 'tiba-tiba' masalah besar (itu sarkasme), sehingga kapal telah berlayar, Firefox. Dan itu membuat saya sedih, sebagai penggemar Mozilla. Chrome hanyalah peramban yang lebih baik sampai Firefox meningkatkan mesin JavaScript mereka.

negutron
sumber
Firefox akan menurun. Sampai sekarang (2013) devtools krom jauh lebih kuat daripada firebug ... dan firefox memfokuskan upaya mereka pada Firefox OS yang bahkan tidak dekat dengan android frodo .. mereka bahkan tidak berusaha keras untuk membuat js dan rendering lebih cepat.
Phyo Arkar Lwin
14

F12

Saya suka shortkeys

Angel.King.47
sumber
6
satu orang menaruh ctrl shift j :)
Vishal Sharma
9

Anda dapat mengatur bookmarklet ini di "Bilah Bookmark" agar Firebug lite selalu tersedia di browser Chrome / Chromium (cantumkan ini sebagai URL):

javascript:var firebug=document.createElement('script');firebug.setAttribute('src','http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js');document.body.appendChild(firebug);(function(){if(window.firebug.version){firebug.init();}else{setTimeout(arguments.callee);}})();void(firebug);
Manuel
sumber
4

jQuerify adalah ekstensi sempurna untuk menanamkan jQuery ke Chrome Console dan sesederhana yang Anda bayangkan. Ekstensi ini juga menunjukkan apakah jQuery telah tertanam ke dalam halaman.

Ekstensi ini digunakan untuk menanamkan jQuery ke halaman mana pun yang Anda inginkan. Ini memungkinkan untuk menggunakan jQuery di shell konsol (Anda dapat memanggil konsol Chrome dengan Ctrl+ Shift+ j".).

Untuk menanamkan jQuery ke tab yang dipilih klik pada tombol ekstensi.

Andrey
sumber
4

Ekstensi Firebug Chrome resmi atau Anda dapat mengunduh dan mengemas sendiri ekstensi tersebut.

https://getfirebug.com/releases/lite/chrome/

joshatjben
sumber
2
Hanya untuk kejelasan: ini adalah tautan ke ekstensi lite firebug bukan ekstensi firebug.
NeuroScr
Tautan yang disediakan sebelumnya rusak. Harap perbarui jawaban ini dengan tautan baru.
Rob Hruska
3

Yah, dimungkinkan untuk mengaktifkan skrip Greasemonkey untuk Google Chrome jadi mungkin ada cara untuk mengurutkan instalasi Firebug menggunakan metode ini? Firebug Lite juga bisa digunakan, tapi rasanya tidak sama dengan menggunakan yang berfitur lengkap :(

willshouse.com/2009/05/29/install-greasemonkey-for-chrome-a-better-guide/

Peter Mortensen
sumber
3

Lupakan semua yang Anda semua butuhkan, inspektur independen peramban ini, dom updater

https://goggles.webmaker.org/en-US

hanya bookmark dan pergi ke halaman web apa saja dan klik bookmark itu ..

ini sebenarnya adalah proyek Mozilla Goggles, menakjubkan, menakjubkan, menakjubkan ...

Vishal Sharma
sumber
Mereka mematikannya.
steve moretz
3

F12 (hanya di Linux dan Windows)

ATAU

Ctrl ⇧ I

( ⌥ ⌘ Ijika Anda menggunakan Mac)

siannone
sumber
1

Jika Anda menggunakan Chromium di Ubuntu menggunakan ppa malam, maka Anda harus memiliki chromium-browser-inspector

Rory
sumber