React App Not Working? 4 Quick Debugging Tips

Decided to try out a new library? Maybe wrote a new component? Or maybe this is the first React app you’ve worked with, and things just aren’t working. (Or really, any JavaScript library: Angular 1 or 2, Backbone, Ember, heck, even jQuery)

The screen is blank.

Or it loaded half-way, but nothing is working.

What to do?!

Check The Console!

This should be your very first step if your app is not working: check the browser console.

So that you have no excuse, here are the keyboard shortcuts to open the console in every major browser across Mac and Windows:

	Mac	Windows
Chrome	⌘ Cmd + ⌥ Opt + J	Ctrl + Shift + J
Firefox	⌘ Cmd + ⇧ Shift + K	Ctrl + Shift + K
Safari	⌘ Cmd + ⌥ Opt + C	–
IE	–	F12, click Console tab

Are there any errors? Fix those straight away. If you don’t know what they mean, just paste them into Google.

Still Broken?

You checked the console, found no errors (or fixed them) and it’s still not working? Here are a few other things to try:

1. Check the dev server console - If you’re running Webpack’s dev server (or using Create React App or a similar tool), look at that terminal window for clues. Syntax errors will break the compiler, which means your changes will not appear until you fix those errors.

2. Refresh the page - Manually refresh the page. Hit Cmd + Shift + R (Mac) or Shift + F5 (Windows). The Shift is to prevent caching. The refresh is to make sure nothing is stale, and that you’re seeing a real error, against the latest version of your code.

3. Check the Network tab - Still got that console open? Click the Network tab and make sure there are no errors. It may be empty – just refresh the page (step 2) and make sure you don’t see any red.

I’ll leave you with one final tip:

Leave The Console Open!

You never know when the next error will crop up. It can be easy to forget to check the console. Avoid that problem entirely by leaving it open.

By the way, did you know there is an HTML5 kbd element? And that it’s for representing keyboard keys? That’s what I love about writing this blog, there’s always more to learn.

Also, sorry (not sorry) about the blinking. But, seriously, check the console. It will save you so much time.

React App Not Working? 4 Quick Debugging Tips was originally published by Dave Ceddia at Angularity on August 25, 2016.