How to break points in react code

How to break points in react code: first open the extension in the chrome browser; then click "Extensions->Open Chrome Web Store"; then search for react developer tools and install them; Finally, just break the point in the react code.

The operating environment of this article: windows7 system, Dell G3 computer, react17.0.1&&chrome87.0.

Recommended: "react video tutorial"

1. Install the React Developer Tools debugging tool

First of all Install React Developer Tools debugging tool in Chrome

React Developer Tools is a useful Chrome browser extension developed by facebook. When debugging with React Developer Tools, you can view your application's React component hierarchy instead of the more arcane browser DOM representation.

Note: This plug-in is only valid for ReactJS development. If it is React Native, you cannot use this plug-in to debug.

1), click the three dots in the upper right corner of the chrome browser-More Tools->Extensions (or enter chrome://extensions/ directly in the browser to enter the extensions)

2), click [Extensions]-[Open Chrome Web Store] in the upper left corner

##3), search for react developer tools, select install and add Just go to Chrome.

#4. After the installation is complete, open the extension management page. Check "Allow access to file URLs" in React Developer Tools.

5. Use

#2. Break points in react code

(2) F8 to continue debugging;

(3) F11 to enter the function body debugging in Javascript;

(4) F10 enters the next line;

f10 is to execute the next line of js code

f11 is to enter the current line method

f8 allows the code to continue running

The above is the detailed content of How to break points in react code. For more information, please follow other related articles on the PHP Chinese website!