Our WorkAbout UsOur ApproachThe Journal
Contact »
« Back to the journal
PHP, Javascript & React

Debugging a ReactJS Chrome Extension

By:

Mark Biek
Mark Biek

on 3/5/2018

Most of the time, all you need to debug a Redux store is the basic setup for the Redux DevTools Chrome Extension.

You configure your store according to the instructions, bring up the Chrome Developer Tools, click
the Redux tab, and off you go!

(If you’re not already using this extension, you’re missing out. Go install it and then come back here.)

That said, there are a few cases where the basic setup isn’t going to work. The most common case is using React Native.

Slightly less common, and the case we’re going to talk about here, is debugging a Redux store inside a Chrome Extension that you’re writing using React+redux.

Maybe you tried the normal setup, fired up your custom extension, and ended up with this:

2018-03-01-at-3.15.44-PM-300x181.png

which made you ?.

Have no fear! The Remote Redux DevTools are here to save you.

Add remote-redux-devtools to your project

We’re assuming you already have the basic scaffolding for a Chrome Extension setup. Maybe you even started from this handy template.

Add remote-redux-devtools to your project by doing yarn add remote-redux-devtools --save (or, if you must, npm install --save remote-redux-devtools).

Configure your project to use it

See the basic usage instructions if you’re not using any sort of middleware.
“>

In our case, we’re using the redux-saga middleware so our store setup looks like this:

Debug your Redux store

We’re assuming the latest version of your unpacked extension is already loaded into Chrome.

Step 1

Click your extension’s icon to open it. Then right-click on the extension window and click Inspect to open the Chrome Developer Tools for the extension (not the current tab!).

2018-03-01-at-3.16.06-PM.png

This is necessary because it will keep your extension window open until you close the Chrome Dev Tools. If you don’t have Dev Tools open, the extension window will close as soon as you click somewhere outside of it.

Step 2

Right-click on your extension window again and click Redux DevTools and then click Open Remote DevTools.

2018-03-01-at-3.15.54-PM-300x103.png

The Remote DevTools window will pop up and automatically connect to your Redux store!

2018-03-01-at-3.42.05-PM-300x190.png

Step 3

Happy debugging!

Share to

Related Posts

Websites
What's the JAMstack?

By:Alec Robertson

As a front-end developer in 2020, it is time that I fulfill the FEDeral mandate that I publish words regarding the JAMStack. If you follow too many developers on Twitter, it’s likely you’ve heard about the Next Big Thing in web development, but I’d like to put this trend (fad? movement?) into context to better understand what’s truly new about this approach and whether it’s worth using.

Read More »
Recursive asynchronous calls with JavaScript and ES6

By:Mark Biek on 1/30/2018

ES6 generator functions make recursive asynchronous calls (relatively) easy.

Read More »