I'm looking for a tool that can:
- inspect HTML elements
- profile performance
- modify elements in real-time
Webmasters Stack Exchange is a question and answer site for pro webmasters. It only takes a minute to sign up.Sign up to join this community
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.
Right-Click -> Inspect Element
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:
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
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.
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.
You can also try Google's open source Speed Tracer - http://code.google.com/webtoolkit/speedtracer/
Speed Tracer is a tool to help you identify and fix performance problems in your web applications. It visualizes metrics that are taken from low level instrumentation points inside of the browser and analyzes them as your application runs. Speed Tracer is available as a Chrome extension and works on all platforms where extensions are currently supported (Windows and Linux).