Debugging a React Application-Part 1

It is essential for a developer to learn about the way of debugging an application in his language of choice.Knowing that not only allows you to easily find sources of errors in your code, but also teaches you about the inner working of the language thus preventing you from making the same error in the future.I will focus on a technique to be useful when debugging a ReactJS application.

Test environment:-
NodeJs version : v8.8.1
NPM version : 5.4.2
Web Browser:Google Chrome
Operating system: Ubuntu 16.04

-Enabling source maps

Usage of source maps makes the debugging easier in ReactJS applications.NPM is used as the build tool and it is all working in the package.json file and creating custom scripts in the scripts object file.To enable the source maps and configure breakpoints, follow the steps given below.

Pre-requisites -Specify the scripts in the package.json file for “npm run build”,“npm run dev”

Step 01:- Move into the directory and type the commands “npm run build” and “npm run dev”.(It will create two files as bundle.js(minified file) and bundle.js.map file)

Step 02:-Replace the bundle.js file of the product with the newly created bundle.js file.Place the bundle.js.map file also in the same location.

Step 03:-Open up the your ReactJS page using the browser ,find your source file using ctrl+p in the Sources panel and place the breakpoints to start debugging with the original source code.

Conclusion

Here we have learnt about how start debugging a react application by configuring the source maps properly.In the next article I will talk more about debugging process with the available source.

Please report any questions or errors in the article, thanks!