Open VS Code (or your editor of choice) and run your code – npm start – so that you have your website running and ready to debug. I use Chrome for all of my development and debugging, and mostly work on a PC, so I’ll focus on that browser only. Once you are in Chrome, press Ctrl + Shift + I (PC) or Option + Shift + I (Mac). To be more precise, hold down the Ctrl key, and at the same time hold down the Shift key, and at the same time hold down the I key (I for India). You’ll see the Chrome Developer Tools open open up in your browser, either next to your website, or below it, depending on your browser settings. Here’s what mine looks like, with the dev tools show to the right hand side:
What to use the Chrome dev tools for
Most of the time I use the Chrome dev tools to :
- Inspect elements in the browser using the Chrome element inspector
- Instantly switch css styles on and off
- View debug messages in the console
Inspect elements in the browser using the Chrome Element Inspector
With the dev tools open, click the Elements tab at the top of the Dev Tools area, then click the icon which is top left that shows an arrow in a square – once this has been clicked you can move your mouse over your website and clicking on an element will allow you to inspect it, rather than interact with it. You’ll see the relevant markup highlighted in the html, and you’ll see the appropriate css shown also. I often use this to switch style properties on and off from css classes to check the styling of an element. This short screen recording shows me using the developer tools to do just that.
Using debug messages in the Chrome debug console
Breakpoints provide a similar benefit to using console messages but are more useful, because whenever a breakpoint has been hit, you can view the Scope at that moment. By Scope, you can see the value of any variable that is ‘in scope’ at that point.
Chrome have a really useful tutorial about the Chrome dev tools too which I’d recommend reading.
Debug a React Native App
If you are working in react Native, rather than React JS, then you’ll want some debug information specific to that, as it is slightly different.