This is the third day of my participation in the August More text Challenge. For details, see: August More Text Challenge

React Native debugger

  • The React Native debugging

Preface:

When running a React project, the browser console will remind you to install the React DevTools debugger

Download the React DevTools for a better development experience: https://fb.me/react-devtools

The author is currently using two RN debugging tools: React Devtools and React-native Debugger. The biggest difference between the two tools is that React Devtools starts faster, while React-Native Debugger is relatively slow to start. However, only the React-Native debugger tool can observe network requests.

Install the React Devtools plugin.

Download the Google plugin directly

Download address

Pack your own Google add-on

1, React-Devtools-Github repository address

2. Install the dependencies in the React-Devtools-master folder.

yarn
or
npm i 
Copy the code

3. Pack the Google add-on.

NPM run build:extension:chromeCopy the code

When the packaging is complete, a new folder will be generated in your project directory, the React-devtools -> Shells -> Chrome -> Build -> Unpacked folder

Open chrome:// Extensions /, load the unpacked extension and select the unpacked folder you created in Step 3. A new extension called React-devtools will be added, with a react logo in the upper right corner of your browser indicating success.

React-native debugger installation (observable network requests)

  • React-native debugger Github repository address

  • Windows execution program download address

  • Enabling Network Monitoring

When react-native debugger is started by default, network request observation is not enabled. Debug the backend API if you need to observe network requests. To listen for network requests, set defaultNetworkInspect in the configuration file to true.

Pay attention to

  • Note: Network requests in React Native cannot currently be observed using the Chrome debug plugin. You can use a third-party React-Native debugger to do so.

  • Debug tool, use this command to install is not the latest version.

npm install -g react-devtools
Copy the code

The debug mode of the mobile phone is enabled

adb shell input keyevent 82
Copy the code