A Closer Look at Web Browser Developer Tools

In the previous chapter, we had a brief introduction to working with browser developer tools. We'll expand on our exploration of browser developer tools and examine a sample of the most used views when it comes to working with JavaScript in the web browser.

Of course, there are many other views and options than what will be mentioned here and, while we are examining these from within Google Chrome, they will differ in both overall look and functional use from browser to browser. This should give you a good idea of what is possible, though, no matter what your preferred browser is.

Note

To access Developer Tools in Google Chrome, press the F12 key.

The Elements View

The primary view that you'll be presented with when exploring browser developer tools for the first time will most likely be the Elements view. This view is super useful as it presents all the elements of a web document and the associated content and attributes in a very structured way. You will also notice that the various styles and event listeners will be available for you to explore within this view. Selecting an element will display both the CSS rules and any associated event listeners:

Figure 2.24: Web document Elements view

While you may think that there is no useful content being displayed in this view in terms of JavaScript, you actually have access to the entire DOM structure here and can monitor this structure and the associated attributes to verify and explore changes you are making via code.

The Console View

This is the developer tools view that we've had the most interaction with thus far and is likely to be the most important view when writing and testing JavaScript code. Any errors and warnings will be displayed within this view and you can also get the output on whatever data you wish as your code executes within the document. Using a JavaScript method such as console.log() will display output of all sorts of useful data for you to explore within the Console view, and you can even customize exactly the sort of data that is shown through various options associated with the view itself:

Figure 2.25: Browser console output

Every web browser has a Console view and even though specific use of this view may differ between browsers, the fundamental usage remains the same.

The Sources View

When it comes to any sort of programming, the ability to set breakpoints to effectively pause code execution and debug your program at a certain state is critical. Using the source view, we can do this effectively, right within the web browser itself.

This view provides a way for us to choose to view the source code for any HTML or JavaScript files that are currently running and set breakpoints at specific lines in order to cause the runtime to pause when the breakpoint is encountered. Once paused, we can then use additional tools within the source's view to examine our code in certain ways:

Figure 2.26: Debugging JavaScript in the web browser

In the preceding screenshot, we have set a breakpoint at line 39 of our HTML file, which includes embedded JavaScript code. With the code execution paused at this specific line, we can examine the state of our program in a very detailed way.

The Network View

The final developer tools view that we'll look at before moving on is the Network view. This allows you to keep tabs on everything being transferred as part of your application. HTML documents, JavaScript files, CSS files, and even invisible content such as XMLHttpRequests (XHR) and other behind the scenes data transmissions are all logged and measured here for you to inspect. If you want to see a specific type of network activity and hide all the others, there is even a handy filter along the top:

Figure 2.27: Viewing network activity in the web browser

One of the important aspects of the Network view that you'll want to note is that Disable cache is a tool option. Disabling the browser cache is an especially good idea if you are making many changes to externally loaded .js files while testing your program as it will prevent these files from being cached by the browser while testing.

In this section, we spent some more time getting familiar with some of the helpful views within web browser developer tools.

In the next section, we'll look at a hands-on activity that allows for the direct manipulation of HTML elements and their attributes through JavaScript code.