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
• Firefox
• Chrome
• Opera
• IE

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.

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

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.

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();.

Firefox

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

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();.

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).

To see local storage, choose Resources > 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.

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.

To access local storage, choose Storage > Local Storage.

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

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.