How To Use React Developer Tools In NW.js Without Pain

NW.js is used to develop cross-platform desktop applications. The best side of NW.js is you can use html, css, and javascript for development.

All web frontend and nodejs libraries are readily available to use as you like.

From these libraries, React, is the indispensable frontend framework, which has a significant adoption from web developers.

Therefore using NW.js with React could be a great duo from a productivity standpoint.

Using React for a web project is a pleasure for developers. It has a great development workflow and also many tools that make you productive.

The React Developer Tools Chrome extension is one of them.

By using React Developer Tools, you can inspect your react components at runtime. Unfortunately, it is not comfortable and pain-free using in another environment like NW.js.

Official NW.js documentation gives some instruction:

  1. Copy react devtools chrome extension directory to a known place.
  2. Modify manifest.json of the extension to add extra permission (chrome-extension://*)
  3. Run nw.js with –load-extension parameter.

Very easy and clear, except it does not work. React tab is shown successfully, but it can’t connect to the application.

So I decided to try another method. Standalone react developer tools application works flawlessly.

https://github.com/facebook/react-devtools/tree/master/packages/react-devtools

Let me explain step by step how I enable react developer tools for my NW.js project.

I’m using the N-PUZZLE project from (NW.js documentation) as a sample project.

Download the sample project from this link.

1) Install React Developer Tools as a standalone package.

npm install -g react-devtools

2) Run the command below from the terminal to launch the standalone DevTools app:

react-devtools

DevTools application pops up:

react developer tools

3) Add the URL, http://localhost:8097 to the index.html file of the NW.js project.

Updated index.html file:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="author" content="Sherub Thakur" />
        <link rel="stylesheet" href="css/bundle.css" />
        <title>N-Puzzle</title>
        <script src="http://localhost:8097"></script>
    </head>
    <body>
        <div id="n_puzzle">
        </div>
        <script src="build/build.min.js"></script>
    </body>
</html>

4) Run your NW.js project (You are at the root folder in terminal):

nw .

Now you can inspect your React components.

n-puzzle application:

n-puzzle sample application

React Developer Tools:

React Developer Tools connected with application

As you see devtools application connects automatically with your NW.js application.

Conclusion

The sure-fire way to use react-devtools in an NW.js project is the standalone react developer tools package.

If you have any idea or comment, please share.

Leave a Comment