I'm looking for a tool that can:
- inspect HTML elements
- manage/debug JavaScript
- profile performance
- modify elements in real-time
Add a comment
|
6 Answers
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.
-
3There 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.– cgpJul 8, 2010 at 22:12
-
2
-
1@Mark Note, I'm using 5.0.375.99. I'm not sure if it makes a difference now or in the future though. Jul 12, 2010 at 11:02
-
1
Right-Click -> Inspect Element
-
FireBug Lite is a great tool and also works in IE, Opera, Safari and Firefox: getfirebug.com/firebuglite Jul 8, 2010 at 22:33
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
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.
answered Jul 11, 2010 at 23:13
-
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. Jul 11, 2010 at 23:34
-
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. Jul 12, 2010 at 1:49
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).
Using Speed Tracer you are able to get a better picture of where time is being spent in your application. This includes problems caused by JavaScript parsing and execution, layout, CSS style recalculation and selector matching, DOM event handling, network resource loading, timer fires, XMLHttpRequest callbacks, painting, and more.
