Developer Tools

To access the browser developer tool, right-click somewhere on the page and select Inspect Element in the context-menu or press F12. When opened, the default is to embed the development tool in the browser. It can be separated from the browser and viewed in its own window.

For additional information on how to open developer tool in different browsers, see http://webmasters.stackexchange.com/questions/8525/how-to-open-the-javascript-console-in-different-browsers

For details about the Microsoft Edge F12 Dev Tools, see https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/f12-devtools-guide/

Console

Web browsers provide a JavaScript console as part of their developer tools. This console is useful for the following reasons:

  • Errors and warnings that occur on a webpage are logged into the console

  • JavaScript commands for interacting with a webpage can be executed in the console

For more information, see http://blog.teamtreehouse.com/mastering-developer-tools-console

Using the Console to Find Syntax and Other Code Errors

In most coding projects, errors usually consist of syntax, logical, or data input errors. The console view shows JavaScript errors and exceptions, as well as Document Object Model (DOM) exceptions. From inside your code, you can use the console object to send status and program error messages to the console. For example, you can add a line like

JavaScript
window.console.log("The file opened successfully");

to your JavaScript code to get the status in a script without breaking the execution. For more information about using the console, see Using the F12 Tools Console to View Errors and Status.

F12 Developer Tools Console error messages

See https://msdn.microsoft.com/en-us/library/hh180764(v=vs.85).aspx

DOM Explorer (IE) / Elements (Chrome)

This tool shows the structure of your webpage as it is being rendered in the browser and makes it possible to edit your HTML and styles (CSS) in a live page. You can do this without having to edit and reload your sources, so you can quickly solve display issues.

  • Determine why an element is not displaying at the right place or right size.

  • Figure out which CSS styles and media queries are being applied to an element.

  • Test a series of different colors for an element to see which looks best.

Fiddler

Fiddler is a free packet analyzer that captures HTTP and HTTPS traffic data between browsers and servers. It can be used for network troubleshooting, session analysis, and debugging. The tool visualizes request or response messages and data exchanged between client and server.

For more information, see http://www.telerik.com/fiddler