Comparison of tools offered by different browsers for web developers?

How do browsers compare in terms of t开发者_Python百科ools offered to web developers? What is the browser of choice for you as a web developer? What features or extensions make it so?

I am a Google Chrome user, and have been using the Chrome Developer Tools a lot lately. It has all of the features that I could hope for, and works really well. I like the ability to edit the page's html or css on the fly, as well as the ability to see the network information and the headers for every javascript file, image, css file, AJAX request, and so on.

If you have Chrome installed, you can bring up the Tools by using the keyboard shortcut: Ctrl + Shift + I.

I just did a comparison of browser developer features for a talk I'll be giving this week: https://docs.google.com/presentation/d/1WcKbHP2khcqpAZf-JnjoNHFRMhR3efUGlahpC5DKFkA/edit

Internet Explorer 10

• still has very few compelling and differentiating developer features
• offers dodgy simulators for older versions of IE

Opera

• really powerful and complete developer tools (Dragonfly)
• moving to Chromium-based code, so may as well use Google Chrome

Safari

• only differentiating feature is integration with iOS 6: remote debugging, etc

Firefox

• cool, sexy, fun unique 3D View
• nice Responsive Web Design mode
• like Opera, the log is noisy when it encounters weird CSS and deprecated features
• still lacks features that the others have, although adding FireBug helps

Google Chrome, my personal favourite and arguably the best

• can do everything Safari can do (except the iOS stuff)
• superior performance profiling tools
• can live-preview in-browser changes to JavaScript code, not just CSS and HTML like the others
• helpful audits with best-practice suggestions
• feels like it was actually designed to help me develop better

I prefer Firefox myself, but nowadays they all quite close to each other. FF just provides far more access to its own internals and system to the extensions, so its technically possible to do more with them than with opera widgets or chrome extensions.

Firefox has Firebug, FireQuery, JSONView and Wev Developer extensions to provide you w/e you need to debug AJAX-rich apps.

Opera has Dragonfly out of the box, with similar to Firebug capabilities.

Chrome has Chrome Developer Tools, which again, is on par with Firebug.

Even IE8 got itself some fancy developer tools with basic firebug caps.

Real answer tho is all of them, since there are often browser-specific problems which need to be debugged with that browser's own tools.