Menu
Is there a way to debug JSX files?
I am unable to see the .jsx files when I check the resources tab in either safari / chrome. Can we use a debugger ?
398
You can view this source code under source tab in browser developer tools. (If you are using chrome/firefox then in source tab you can press Ctrl + P to quickly search for the file you want to debug/analyze.)
As JSX is combination of HTML and JavaScript it is not supported by Browsers. So, if any file contains JSX file, Babel transpiler converts the JSX into JavaScript objects which becomes a valid JavaScript. Thus, browsers understands the code and executes.
When debugging a React app, I often find breakpoints to be very helpful. There are two main ways in which we can use them: By writing the debugger statement in our source code. By clicking on a specific line of the code in the Chrome web browser (or Firefox, Edge, etc.)
After you install the Chrome Extension open the devTool (f12) and you can see:
NOTE: it might be necessary to restart chrome to get it going
128
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
