Firebug-like debugger for Google Chrome
There is a Firebug-like tool already built into Chrome. Just right click anywhere on a page and choose "Inspect element" from the menu. Chrome has a graphical tool for debugging (like in Firebug), so you can debug JavaScript. It also does CSS inspection well and can even change CSS rendering on the fly.
For more information, see https://developers.google.com/chrome-developer-tools/
Firebug for Chrome
You can use firebug lite. But Chrome already has more than decent developer tools built in it.
Firebug like debugging on Android
I use Firebug lite bookmarklet for iPhone and iPad, never tried on Android, check this out http://martinkool.com/post/13629963755/firebug-on-ipad-and-iphone it must be similar on Android.
To activate it use this steps:
- Create a new bookmark or bookmark a page
- Rename the bookmark to “Firebug”
- Copy the textarea link:
javascript:(function(F,i,r,e,b,u,g,L,I,T,E){if(F.getElementById(b))return;E=F[i+'NS']&&F.documentElement.namespaceURI;E=E?Fi+'NS':Fi;Er;Er;Er;(Fe[0]||Fe[0]).appendChild(E);E=new%20Image;Er;})(document,'createElement','setAttribute','getElementsByTagName','FirebugLite','4','firebug-lite.js','releases/lite/latest/skin/xp/sprite.png','https://getfirebug.com/','#startOpened');
- Edit the Firebug bookmarklet, remove the URL and paste the
bookmarklet - Choose “Done” (on the virtual keyboard) and you’re all set
What features does Firebug have that Chrome's Developer Tools do not have?
I used Firebug from the start and it was a godsend like the invention of fire. But then Chrome came out with its debugger and I tried it. I kept using Firebug, but kept an eye on Chome's dev tools and finally could not longer come up with a reason not to switch after JSON tools were added in v12.
Chrome's DevTools kick butt because it has:
- Built in Timeline, Profiler and Heap analyzer
- Built in Audit tool
- Can access and edit Local/SessionStorage, Cookies, SqlLite DB's, WebSQL, AppCache etc...
- WebSockets network sniffing
- JS debugger has some more features (e.g. WebWorker breakpoints)
- JS debugger let's you edit JS on the fly and run it (JSFiddle w/o the fiddle)
- Each window gets a devtools window if you like; Firebug is a singleton
- Firebug perturbs the page by slowing its loading down and by injecting CSS for its inspector feature
UPDATE: 2 years later I have to congratulate the Firefox team for making huge inroads. That said, the Chrome team and debugger make huge leaps forward on a monthly basis, leading the industry. I'd update the above list, but frankly it would fill the entire page.
Firebug cd equivalent in Chrome console / developer tools
No "cd" command yet, but it seems that we'll have a "dropdown list with all iframes to allow selecting current evaluation context for console expressions" in upcoming releases.
See http://trac.webkit.org/changeset/91839
Related Topics
Display Element as Preformatted Text via CSS
Overlap Border of Parent with H2 Margin Negative
Where Is The Visual Studio HTML Designer
How to Style and Align Forms Without Tables
How to Add a Title to a HTML Select Tag
How to Conditionally Display Element Attributes Using Angular2
Position Fixed and Internet Explorer
Pure CSS 3 Image Slider - Without JavaScript or Radio Inputs
Cordova List All Files from Application Directory (Www)
Is Line-Height: 1.4 The Same as Line-Height: 140%
Why Is My Background Color Not Showing If I Have Display: Inline
CSS Vertically Align Floating Divs
Making Youtube.Com/Embed Urls Work on iOS
How to Add an Offsetted Outline to a CSS Shape
What Happens If I Don't Put a <!Doctype HTML> in My Code? Will It Make Any Major Changes