In this post, we will see how to detect issues with the user experience of your web application with the Performance and Memory tabs in the Chrome Devtools. Chrome contains a complete web application profiler in its Performance and Memory tabs. With the Performance tab, it is possible to record everything happening in your web application. You have the ability to start a new recording with ⌘ + e (...

After our tour of the Chrome Devtools Console, we can now have a look at the Network tab. This tab will display all communication between the current page and any server. The Network tab is composed of two parts, on top you will find an overview of the timeline where all the requests that have been made can be seen. Below this overview, the Network tab shows the details of each request. Finally ab...

After having a look at the debugging of the DOM first and then all the secrets of the Console in the second part, in the third part of this analysis of the Chrome Devtools, we will detail the tooling provided by Chrome to view, edit and debug our code thanks to the Sources tab. The Sources tab is divided into four different areas, on the left, the navigator is available with various drawers like S...

After reviewing how to debug the DOM in the first part of our overview of Chrome Devtools, in this second part we will have a look at the Console. A Console tab is available both as a main tab at the top of the Devtools and as a drawer at the bottom of all the other tabs. Both versions are identical and they provide the same features. The Console allows you to type some JavaScript code, evaluate i...

Most web developers should know it by now but the Chrome web browser embeds an amazing set of development tools. The Chrome DevTools are organized thanks to a collection of tabs used to group relevant tools in categories. In this post, we will start reviewing some of those tools. You can open the Chrome Devtools by using the contextual menu on any element of the current web page and selecting Insp...