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:

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="https://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:

React Developer Tools:

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.

1 düşünce - “How To Use React Developer Tools In NW.js Without Pain”

  1. Pingback: How to build an NW.js App using Create React App - Onbirkod

Yorum Gönder

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Scroll to Top