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 ?
-
No, as the browser does execute javascript not jsx files. There might be sourcemaps, thoughBergi– Bergi2014-12-17 01:15:29 +00:00Commented Dec 17, 2014 at 1:15
-
Related post - How do I generate sourcemaps when using babel and webpack?RBT– RBT2019-04-02 06:19:21 +00:00Commented Apr 2, 2019 at 6:19
Add a comment
|
4 Answers
After you install the Chrome Extension open the devTool (f12) and you can see:
- A new react tab - use to inspecting the react elements (like the regular inspect).
- In source tab (left panel) a new App list where u can see the JSX files and set break points in side your code.
NOTE: it might be necessary to restart chrome to get it going
Comments
There is Chrome Extension which adds another tab to Developer Tools and allows debug React Components. You can see preview and read more about it in React documentation.
Other browsers doesn't have support for React Debugger, yet.
3 Comments
Elia Weiss
The chrome extension react tab is missing
daniula
@Joti Are you sure extension is installed properly and you are opening devtools on app using React? Sometimes I had to refresh whole page with devtools open to have it recognise React app. If your problem still persist, file an issue on Github.
Elia Weiss
I reinstall it and it's working - but I still cannot set break point, is there a way to debug the js code? or should I just call the js code from .js files?
If you are using webpack, then you can provide devtool configuration inside webpack.config.js.
module.exports = {
devtool: 'source-map'
// rest of the webpack configurations
}
It will maintain the original source-code. 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.)
More about webpack devtool here.
Hope this helps :)
Comments
Browserify & watchify with -d will help generate source map if you are using them to build source, then you can track which file results in the error.
