debugbrowser.com

With web developer extensions, you can debug broken web pages and provide better feedback to web developers.

Browsers


More Information


Need to learn JavaScript?


A project by Tom MacWright


Safari

Safari includes built-in developer tools - you don't need to install anything to debug issues in the browser.

home page, Apple's documentation for using the Web Inspector Panel

keybinding: ⌘⌥i

Select Preferences in the Safari menu

Select Preferences in the Safari menu

Check the Show develop in the menu bar option

Check the Show develop in the menu bar option

Click Show Web Inspector in the Develop Menu

Click Show Web Inspector in the Develop Menu

Google Chrome

Chrome includes built-in developer tools - you don't need to install anything to debug issues in the browser.

home page, using chrome developer tools documentation

Apple OS X keybinding: ⌘⌥i (Cmd+Option+I)

Windows keybinding: Ctrl+Shift+I

Click Developer Tools in the wrench menu, tools, and Developer Tools

Click Developer Tools in the wrench menu, tools, and Developer Tools

Once you're in, watch this handy YouTube video on the functionality of the tools.

Mozilla Firefox

home page, Toolbox documentation

Apple OS X keybinding: ⌘⌥i (Cmd+Option+I)

Windows keybinding: Ctrl-Shift-I

Download Firebug at http://getfirebug.com/

Download Firebug

Start Firebug at Tools / Firebug / Open Firebug

Start Firebug at Tools/Firebug/Open Firebug

iOS 5.0 Mobile Safari (iPhones & iPads)

for advanced debugging, see weinre

Touch Settings on the home screen

Touch Safari on the settings screen


Touch Advanced on the safari screen


Toggle debug console to true

A debug bar will now appear at the top of each webpage in mobile Safari.

iOS 6.0 Mobile Safari (iPhones & iPads)>

You can debug issues on your new iPhone, but only with a connected computer - the built-in console was replaced in version 6.

Touch Settings on the home screen

Touch Safari on the settings screen


Touch Advanced on the safari screen


Toggle debug console to true

Connect your Device to a Computer

Select Preferences in the Safari menu

Select Preferences in the Safari menu

Check the Show develop in the menu bar option

Check the Show develop in the menu bar option

In Safari on a Computer, select Develop, and then the appropriate Device

Internet Explorer

Discovering Internet Explorer Developer Tools

keybinding: F12

One option is installing the Internet Explorer Developer Toolbar from Microsoft. Firebug Lite is a decent, open-source option. DebugBar is a closed-source option that's slightly more complete than Firebug Lite.

Opera

home page

keybinding: ⌘⌥i

Tools → Advanced → Opera Dragonfly