What is the Google Chrome equivalent to Firebug?

Question

I'm looking for a tool that can:

• inspect HTML elements
• manage/debug JavaScript
• profile performance
• modify elements in real-time

Solution 1

It's built in. Page [paper] -> Developer -> Developer tools (in Chrome v5 and under). It is likely to be different in v6 since the Page button appears to be disappearing in that version.

Solution 2

Right-Click -> Inspect Element

Solution 3

Firebug Lite for Google Chrome.

Solution 4

It's been 4 years since the original question was asked. Chrome (stable) is now at version 38. For a long time it has included a full set of Developer Tools that are roughly equivalent to Firebug for Firefox (though incidentally Firefox even has a built-in inspector too).

A few things Chrome's Developer Tools allow you to do:

• Inspect the DOM
• Inspect CSS
• Access a JavaScript Console
• Debug JavaScript
• View network requests, timings, and responses
• View rendering, JavaScript, and CSS performance
• Inspect local storage and cookies

The dev tools can be accessed in a variety of ways.

• Chrome Menu -> Tools -> Developer Tools

• Ctrl + Shift + I in Windows or Cmd + Shift + I on a Mac

• F12 on Windows

• Right-click anywhere on a page and select Inspect Element

Solution 5

The in-browser tools are great at their job and are usually your best first choice, but sometimes they don't provide enough technical detail on the HTTP request/response payloads, or are too page-specific.

In these cases, you may find that a dedicated HTTP inspection tool like Fiddler or one of the Linux alternatives will provide more insight.

If you really need to get bare-metal, Wireshark goes beyond HTTP to full network traffic analysis, but be prepared to be overwhelmed at first.

View more solutions

Comments

[cgp]

There are some drawbacks to Google's tool -- viewing ajax requests is not as easy, there's no multiline mode that's convenient, you can't edit HTML in a window, it doesn't show the padding/margins on hover in the HTML tree, you simply can't navigate the actual DOM (just the HTML tree) and last but not least, I find the CSS editing features just clunkier -- there's no autocomplete in Google's for one thing. It's still very much usable, but Firebug is just better.

[Nat Ryall]

FireBug Lite is a great tool and also works in IE, Opera, Safari and Firefox: getfirebug.com/firebuglite

[nedruod]

Or shift-ctrl-I for the lazy :)

[Evan Plaice]

I can't say that I'm familiar with fiddler but Wireshark is definitely excessively bare-metal. Wireshark is really only useful if you need to see the lower level protocols details.

[JasonBirch]

Fiddler is closer to firebug / chrome developer tools for usability. One of the places I've found it most handy is when publishing KML files on my website; you can see the requests and responses from Windows desktop applications like Google Earth, not just web browsers. I've used Wireshark a couple times, but agree that it isn't generally useful for day-to-day webmaster stuff.

[Evan Plaice]

@Mark Note, I'm using 5.0.375.99. I'm not sure if it makes a difference now or in the future though.

[enobrev]

In v6 it's Wrench -> Tools -> Developer Tools