Tell me more ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.
up vote 17 down vote favorite
6

I'm looking for a tool that can:

  • inspect HTML elements
  • manage/debug JavaScript
  • profile performance
  • modify elements in real-time
share|improve this question

5 Answers

up vote 21 down vote accepted

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.

share|improve this answer
It's actually Page [paper] -> Developer -> Developer Tools. I checked your answer at first and thought I was missing a plug-in ;) – Evan Plaice Jul 8 '10 at 21:36
Thanks, that's more|less what I was looking for. I thought there would be some special plug-in I'd have to download/install. – Evan Plaice Jul 8 '10 at 21:52
2  
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. – altCognito Jul 8 '10 at 22:12
Evan: You're right - not sure how I messed that up. Will edit the answer accordingly. I think in v6 it's all going underneath the wrench though - the paper button appears to be going. – Mark Hatton Jul 9 '10 at 13:44
1  
Or shift-ctrl-I for the lazy :) – Tim Post♦ Jul 9 '10 at 13:56
show 2 more comments
up vote 14 down vote

Right-Click -> Inspect Element

share|improve this answer
+1 for simplicity ;) – DisgruntledGoat Jul 13 '10 at 12:02
up vote 12 down vote

Firebug Lite for Google Chrome.

share|improve this answer
FireBug Lite is a great tool and also works in IE, Opera, Safari and Firefox: getfirebug.com/firebuglite – Nat Ryall Jul 8 '10 at 22:33
up vote 3 down vote

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.

share|improve this answer
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. – Evan Plaice Jul 11 '10 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. – JasonBirch Jul 12 '10 at 1:49
up vote 1 down vote

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.