How to debug react project at Google

How to debug react projects on Google: First use Chrome to open the React page that needs to be debugged, and open "Developer Tools"; then click the react tab on the far right of the toolbar above "Developer Tools"; finally check The nested relationship between each component and the events, properties, status and other information of each component are enough.

The operating environment of this tutorial: windows7 system, react17.0.1&&chrome87.0 version, thinkpad t480 computer.

Recommended: "react video tutorial"

How to debug react projects in Google Chrome?

(1) First use Chrome to open the React page that needs to be debugged, and open "Developer Tools".

(2) There will be a react label on the far right side of the toolbar above "Developer Tools". Click this tab to see the structure of the current application.

Through React Developer Tools, we can easily see the nested relationship between various components as well as the events, properties, status and other information of each component.

(3) React Developer Tools will automatically detect React components. However, in webpack-dev-server mode, webpack will automatically put React components into iframe, causing React component detection to fail. The workaround is webpack -dev-server can be configured in --inline mode:

webpack-dev-server --inline

(4) So far there is almost no The browser natively supports the es6 standard. For this situation, chrome introduces the source-map file to identify which line of es6 code before transcoding corresponds to the es5 code. The only thing to do is to configure webpack to automatically generate the source-map file. This also It's very simple, just add a line of configuration to webpack.config.js (you need to restart webpack-dev-server to make the configuration take effect)

(5) Modify somewhere as an error, and then observe the result

For more React-related technical articles, please visit the React Q&A column to learn!

The above is the detailed content of How to debug react project at Google. For more information, please follow other related articles on the PHP Chinese website!