installation

Install the react – devtools

Find the React tool address on Github. It says “Need”

Install yarn add react-devtools. Install yarn Global add react-devtoolsCopy the code

Start the react – devtools

If global installation is direct

react-devtools
Copy the code

If it was installed in a project, I added a script in package.json

"scripts": {
    // ...
    "dev": "react-devtools"
},
Copy the code

Then yarn Run dev

After successful startup, this will appear

The react-DevTools update has a separate interface, rather than being integrated into Chrome’s debug console. I’ve been looking for this place for days, and I had no idea it was independent.

Modify the index.html of the create-react-app project

According to the documentation, you need to add in the header of the file

<script src="http://localhost:8097"></script>
Copy the code

As shown in figure:

Here I tried adding “import ‘react-devtools'” to the first line of index.js, but still failed. The hub is missing a lot of functions. I don’t understand this place. So we just add script

  • Modify index. HTML further

I went around webpack for a long time (three hours) and finally saw that htML-webpack-plugin was an EJS template. This gave me the hope that it could be configured, so I added a judgment to the script I had added before

<% if(process.env.NODE_ENV === "development"){ %>
      <script src="http://localhost:8097"></script>
<% } %>
Copy the code

The final result

Successfully ran up the official example with React-devTools. This concludes the main points of this article

The idea was that Webpack would dynamically add scripts based on the difference between development mode and production mode, but that information was not available online. Don’t know if this way is feasible, ask the big guys for help

Throw out some questions THAT I don’t understand

  1. React-devtools’ official website says it can be imported, but I failed.
  2. Webpack config html-webpack-plugin I pass title: “ABC “, then index. HTML writes
<%= htmlWebpackPlugin.options.title %>
Copy the code

3. Webpack can decide which scripts can be imported or not, depending on the environment (dev/prod), such as import react-devtools. I have found many articles and webpack official website, but there is no import according to the environment. Is it only possible to distinguish dev from Prod files in the Webpack tutorial? 4. The above article is my personal opinion, if there is a better way, I hope you can give me a link

Things to review

Last year, I used React-Devtools. It is a plugin on Chrome. Recently, I want to start the react project again. React-devtools failed because of the.foreach error. At first I looked for the Chrome plugin, but finally I found the VERSION of V3, so I looked at the version of V3 on my computer. And then you're looking for V4 or higher. The original Github address for React devTools says it has been incorporated into the React project. I tried to clone the whole thing, but it was too big. Clone failed, and then I tried to find v4. Clone --depth=1 Found package/ Chrome. Then through NPM I/YARN, basically unsuccessful, reported build is also an error. I'm going bald with worry. I feel like I've hit a dead end. I stepped back to review it and search it. React devTools NPM I/YARN I looked through the paperwork, knocked against the wall for hours, and finally got it out. Devtools V3: DevTools V3 I thought it couldn't be that stupid. So he put his head down and searched for days. I finally solved it, so I put it together. As a vegetable chicken, looking back at the sorting, the whole process is actually less than 5 minutes. If you know English and are familiar with react source code, you can do it in a minute. Why there is no relevant article on the Internet, I think it should be I will not turn over the wall, not good at using search engines. Maybe they don't even think it's necessary to write a walkthrough. Finally, I really hope that if you are free, you can help to take a time to answer the above questions, thank you ~Copy the code