Post

How to debug React Applications

Posted
By Joey
3 min read

How to Debug React Applications

Debugging React applications can be a complex task, but with the right tools and techniques, you can streamline the process and quickly identify and fix issues. In this article, we’ll explore various methods to debug both React web and React Native applications.

Debugging with React Developer Tools

Chrome Extension

React Developer Tools is an invaluable tool for inspecting React components, editing props and state, and identifying performance problems.

  1. Installation: Install the React Developer Tools browser extension for Chrome, Firefox, or Edge.

  2. Usage: Once installed, visit a website built with React, and you will see the Components and Profiler panels, providing insights into the component hierarchy and performance metrics.

Safari and Other Browsers

For browsers like Safari, you can install the react-devtools npm package:

1
2
3
4
5

# Using Yarn
yarn global add react-devtools

# Using Npm
npm install -g react-devtools

To use it, add the following <script> tag to the beginning of your website’s <head>:

1

<script src="http://localhost:8097"></script>

After adding the tag, reload your website in the browser to view it in developer tools.

Debugging React Native

React Developer Tools can also be used to inspect apps built with React Native.

  1. Global Installation: Install React Developer Tools globally:

    1
2
3
4
5

     # Using Yarn
 yarn global add react-devtools

 # Using Npm
 npm install -g react-devtools

  2. Usage: Open the developer tools from the terminal, and it should connect to any local React Native app that’s running. If it doesn’t connect immediately, try reloading the app.

Debugging Tests

Using react-scripts

To debug tests in a React application, you can use the react-scripts package with debugging enabled.

  1. Setting Up: Modify your package.json to include a debug script:

    1
2
3
4
5
6

     {
   "scripts": {
     "test": "react-scripts test",
     "test:debug": "react-scripts --inspect-brk test --runInBand --no-cache"
   }
 }

  2. Running the Debugger: Run the test script with debugging enabled:

    1

     $ react-scripts --inspect-brk test --runInBand --no-cache src/component/button/index.test.js

  3. Connecting the Debugger: After the debugger starts, open Chrome, type about:inspect into the address bar, click inspect, and the developer tools will be ready for debugging.

With an IDE (VS Code or WebStorm)

You can also debug tests directly from an IDE like Visual Studio Code or WebStorm.

  1. Configuration: Add the following configuration to your .vscode/launch.json:

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

     {
   "version": "0.2.0",
   "configurations": [
     {
       "name": "Debug Tests",
       "type": "node",
       "request": "launch",
       "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/react-scripts",
       "args": ["test", "--runInBand", "--no-cache", "--watchAll=false"],
       "cwd": "${workspaceRoot}",
       "protocol": "inspector",
       "console": "integratedTerminal",
       "internalConsoleOptions": "neverOpen",
       "env": { "CI": "true" },
       "disableOptimisticBPs": true
     },
     {
       "name": "Debug Current File",
       "type": "node",
       "request": "launch",
       "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/react-scripts",
       "args": [
         "test",
         "--runInBand",
         "--no-cache",
         "--watchAll=false",
         "${fileDirname}/${fileBasenameNoExtension}"
       ],
       "cwd": "${workspaceRoot}",
       "protocol": "inspector",
       "console": "integratedTerminal",
       "internalConsoleOptions": "neverOpen",
       "env": { "CI": "true" },
       "disableOptimisticBPs": true
     }
   ]
 }

  2. Debugging: With the configurations in place, you can start debugging tests directly from the IDE. Set breakpoints beforehand or use the debugger statement in your test code.

Conclusion

Debugging React applications doesn’t have to be a daunting task. With the right tools and methods, you can efficiently identify and resolve issues. Whether you’re using React Developer Tools for component inspection or debugging tests with react-scripts, these techniques will help you maintain and improve the quality of your React applications.

Debugging
debugging react frontend
This post is licensed under CC BY 4.0 by the author.