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 ...

Get Angular 6 for Enterprise-Ready Web Applications now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.