Developer Tools for HTML5 Programming

All the modern browsers have good developer tools now available to HTML5 and JavaScript web developers. Here is some information on how to access these tools in these browers. Remember that these browsers and tools are often changing with each new browser version, so this page may sometimes be a bit out of date.

Safari

To access the Safari Developer Tools, you first need to turn on the Develop menu. Open Safari > Preferences, and click on the Advanced Tab. Then check the box next to "Show Develop in menu bar." Once you exit Preferences, you'll see a new Develop menu appear.

Safari Preferences

Next, use Develop > Show Web Inspector to bring up the Developer tools.

Safari Develop Menu

These tools may appear in a separate window, or at the bottom of the current browser window. To see Local Storage, select Resources > Local Storage. To clear Local Storage, you can select individual items and click the X at the bottom of the window.

Safari Local Storage

You can also use the JavaScript console to access local storage, or try simple JavaScript statements. Select the console tab and type a JavaScript expression or statement at the > prompt. You can also clear local storage using the console, by typing localStorage.clear();.

Safari JavaScript console

Firefox

To access the developer tools in Firefox, use the Tools > Web Developer > Web Console menu.

Firefox Developer Tools

This will bring up a console window in the browser window. Here you can type JavaScript expressions and statements at the prompt. For example, to see local storage, you can type localStorage, and then click on the object link to see the details. To clear local storage, just type localStorage.clear();.

Firefox Local Storage

Chrome

To access developer tools in Chrome, right-click on any element or the background of a web page, and choose Inspect Element. This will bring up the developer console. It will look very similar to Safari (because both browsers are Webkit-based browsers).

Chrome Inspect Element

To see local storage, choose Resources > Local Storage.

Chrome Local Storage

You can also access the JavaScript console and other tools here. For example, you can inspect the HTML and CSS for every element in the page using the Elements tool.

Chrome Elements Inspector

Use the Resources console to clear local storage by selecting individual items in storage and then clicking the X at the bottom of the window, or by using the Console and typing localStorage.clear();.

Opera

Similar to Chrome, the best way to bring up the developer tools in Opera is to right-click on any element in your page and choose Inspect Element. This will bring up the developer console window in the browser window.

Opera Inspect Element

To access local storage, choose Storage > Local Storage.

Opera Local Storage

To remove items from local storage, you can right click on an item, and choose delete item or delete all.

Deleting an item from Opera Local Storage

IE 9

To use developer tools in IE9, first download and install the Devleoper Tool Bar. (Note these tools are not compatible with IE8, so either upgrade to IE9 (the current version of IE) or you'll need to download a different tool set).

To use the Developer Tool Bar once it's installed, press F12, or use Tools > F12 developer tools.

Until we're able to create our own guide, check out this .net article on how to use the tools.