CODEWITHSUNDEEP
javascriptreactjs
user544079
user544079

Reputation: 16629

Debugging JSX using browser / plugins

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 ?

Upvotes: 16

Views: 25999

Answers (4)

Hardik Modha
Hardik Modha

Reputation: 12746

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 :)

Upvotes: 4

Elia Weiss
Elia Weiss

Reputation: 9915

After you install the Chrome Extension open the devTool (f12) and you can see:

  1. A new react tab - use to inspecting the react elements (like the regular inspect).

enter image description here

  1. In source tab (left panel) a new App list where u can see the JSX files and set break points in side your code.

enter image description here

NOTE: it might be necessary to restart chrome to get it going

Upvotes: 11

zuo
zuo

Reputation: 1091

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.

Upvotes: 1

daniula
daniula

Reputation: 7028

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.

Upvotes: 4

Related Questions