Developer Tools Tutorials
This content refers to an older version of F12 developer tools. Please visit our latest F12 tools documentation.
The Developer Tools tutorials will show you how to use the Developer Tools to inspect and resolve webpage issues. To establish a context for these scenarios, a starting webpage is provided. Each tutorial is focused on resolving a specific issue in order to make this webpage better, and is designed to provide a simple and safe environment for experimenting with the many features of the Developer Tools. For more on F12 tools in Windows Internet Explorer 9 see How to use F12 Developer Tools to Debug your Webpages.
- The Context
- The Tutorials
- Related topics
The Context
The primary focus for these tutorials is to answer the basic question: "How do I use the Developer Tools to accomplish X?" Where "X" is the type of task you want to perform. The tutorial's Table of Contents provide a list of these tasks to help you get started.
The following setup will further define the context for these tutorials.
You are developing a shopping website to sell video games. The core of your website is the products listing page, where you list the items you offer for sale. Here is what you want this page to do:
- List all items available for sale in a table. Note In the real world, this page would be generated from the server side, but for the simplicity of these tutorials this page is presented as a static page.
- Provide a picture of the item, a description of the item, and a price.
- Provide a checkbox to allow a user to select the item to buy. When a user selects this checkbox, two things must happen:
- The row that has just been selected needs to be highlighted.
- The price of the selected item needs to be added to a running total at the bottom of the listings table. When the user clears the checkbox, you must undo the two actions above.
- When a user hovers over the item's picture, display additional information about the item.
- Provide a submit button to allow a user to place an order.
The Tutorials
As you head over to the tutorials, keep the following points in mind:
- Once you get to the tutorial page, you will need to load the Developer Tools by pressing F12, if they are not loaded already.
- If the state of the webpage is out of sync with the tutorial you are working on, try refreshing the webpage and restarting the tutorial.
- We want your feedback. If you encounter any issues with the tutorials, or you have suggestions for improvement or for new tutorial topics, navigate back to this reference page and send us your feedback.
You are now ready to get started. Click here to get to the tutorials: Developer Tools Tutorials
Related topics
Discovering Internet Explorer Developer Tools
Debugging HTML and CSS with the Developer Tools
Debugging Script with the Developer Tools
Profiling Script with the Developer Tools