Using debugging tools in the browser
We will use the application we wrote in the last section to explore major features of the browser's debugging tools. Fortunately, the major browsers have all taken a very similar approach to this, so a lot of what we will cover will be applicable to Edge, Chrome, Safari, and Firefox. For example, on a Windows machine, pressing F12 will access the browser tools in each browser.
Let's look at the tabs shown in the browser tools. We are going to have a look at Elements, Console, Sources, Network, and Application, as indicated in Figure 11.9:
Figure 11.9 – Developer tools tabs
In the following sections, we will look at the tabs indicated in more detail. For additional information, including information on the tabs we are not covering, please see the Further reading section at the end of the chapter.
The Elements tab
The Elements tab provides insights into the document object model (DOM) including CSS...
