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:
-
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.
-
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.
-
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.
Learning React can be a struggle — so many libraries and tools!
My advice? Ignore all of them :)
For a step-by-step approach, check out my Pure React workshop.
Learn to think in React
- 90+ screencast lessons
- Full transcripts and closed captions
- All the code from the lessons
- Developer interviews
Dave Ceddia’s Pure React is a work of enormous clarity and depth. Hats off. I'm a React trainer in London and would thoroughly recommend this to all front end devs wanting to upskill or consolidate.
