Click here to Skip to main content
13,191,040 members (67,980 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as

Stats

2.4K views
1 bookmarked
Posted 25 Aug 2016

React App Not Working? 4 Quick Debugging Tips

, 25 Aug 2016
Rate this:
Please Sign up or sign in to vote.
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

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?!

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 + JCtrl + Shift + J
Firefox⌘ Cmd + ⇧ Shift + KCtrl + Shift + K
Safari⌘ Cmd + ⌥ Opt + C
IEF12, 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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Dave Ceddia
United States United States
Dave is a Software Engineer in the Boston area and writes about AngularJS and other JavaScript things over at daveceddia.com

You may also be interested in...

Comments and Discussions

 
-- There are no messages in this forum --
Permalink | Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.171016.2 | Last Updated 26 Aug 2016
Article Copyright 2016 by Dave Ceddia
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid