16. Browser Developer Tools

Throughout this book, I have explained how professional JavaScript developers use advanced coding techniques, take advantage of language and browser capabilities, and apply tooling to their workflow and their code in order to produce high-quality, maintainable JavaScript code for the benefit of the end users of their applications and other developers working alongside them. The main frontier of web development is the browser, the platform for running our applications in the wild for the general public to access. While we can run a plethora of tools against our code to check its quality in advance, there really is no substitiute for running that code within a web browser to ensure not only that it runs correctly but also that it is performant and memory-efficient. We can measure and debug our code within the browser environment using the sets of developer tools built into all the major browsers for an under-the-hood look at what’s happening while our code is executed. We can use the data gleaned from these tools to improve our code, adding the final polish to our JavaScript to ensure it will perform efficiently for our end users. In this chapter, I will take you through the browser developer tools that will help ensure that your code is performant and accurate.