Debugging with Chrome Developer Tools

As a developer, I use the Google Chrome browser because of its cross-platform and consistent developer tools with helpful extensions.

Open Chrome Developer Tools (dev tools) on macOS by pressing option + ? + I or on Windows by pressing F12 or Ctrl + Shift + I.

As a best practice, I code with VS Code and the browser open side by side, while the dev tools are also open in the browser. There are several good reasons for practicing side-by-side development:

• Fast feedback loops: With live-reloading, you see the end result of your changes very quickly
• Laptops: A lot of developers now do most of their development on a laptop and a second monitor is a luxury
• Attention to responsive design: As I have limited space to work with, I constantly pay attention to mobile-first development, fixing desktop layout issues after the fact
• Awareness of network activity: To enable me to quickly see any API call errors and also ensure that the amount of data that is being requested remains in line within my expectations
• Awareness of console errors: To enable me to quickly react and troubleshoot when new errors are introduced

Observe how side-by-side development looks like:

Side-by-side development with live-reloading running

Ultimately, you should do what works best for you. With the side-by-side setup, I frequently find myself toggling VS Code's Explorer on and off and resizing the dev tools pane to a larger or smaller size depending on the specific task at hand. To toggle VS Code's Explorer, click on the Explorer icon circled in the preceding screenshot.

Just as you can do side-by-side development with live-reloading using npm start, you can get the same kind of fast feedback loops for unit testing using npm test.

Side-by-side development with unit testing

With the side-by-side unit testing setup, you can become very effective in developing unit tests.