Debug with Chrome DevTools
The Console serves two objectives at least: the display of your application’s logs plus runtime errors and the ability to execute custom JS code. Developers may be logging messages using console.log() to inspect the value of some variable or simply ensure their code is executing in the right order. Warnings and the majority of runtime errors get also printed here.
This is where your entire application’s network activity will be logged. All resources, whether downloaded or uploaded, are available for inspection in the Network panel. These resources are listed chronologically with information such as HTTP response code, loading time, initiator, state, and size. The footer contains a summary of the total number of requests and the size of all resources.
This is by far the most powerful tool available in DevTools, and you can find it under the Sources tab. This is a faster and cleaner alternative to using console.log() when looking for bugs. It allows for a quick inspection of the piece of code being executed and the values of all variables at that moment in time. The execution comes to a halt as soon as it reaches the breakpoint. And you can set many of them at the same time. From there you can deep dive into your code using the different options at hand:
Who doesn’t hate losing chances whenever you hit that reload button? Local Overrides were made to overcome this. Specify a directory in Sources Overrides and let DevTools save your changes. It works in most situations.
The Audits tab is where you can look for bottlenecks hurting your page’s loading speed. Open your application in incognito mode as some browser plugins may interfere with the auditing workflow. Start with an audit as it creates a baseline to measure your changes against, but also gives you some actionable tips on how to improve. The available options let you run different categories of audits: SEO, accessibility, or performance-oriented. It also helps simulate how your application behaves on a mobile device.