16

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 ?

Dmitry Shvedov
  • 3,169
  • 4
  • 39
  • 51
user544079
  • 16,109
  • 42
  • 115
  • 171
  • No, as the browser does execute javascript not jsx files. [There might be sourcemaps, though](https://github.com/facebook/react/pull/833) – Bergi Dec 17 '14 at 01:15
  • Related post - [How do I generate sourcemaps when using babel and webpack?](https://stackoverflow.com/q/30870830/465053) – RBT Apr 02 '19 at 06:19

4 Answers4

11

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

Elia Weiss
  • 8,324
  • 13
  • 70
  • 110
4

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.

daniula
  • 6,898
  • 4
  • 32
  • 49
  • The chrome extension react tab is missing – Elia Weiss May 30 '16 at 09:14
  • @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. – daniula May 30 '16 at 14:44
  • 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? – Elia Weiss Jun 01 '16 at 08:45
4

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

Hardik Modha
  • 12,098
  • 3
  • 36
  • 40
1

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.

zuo
  • 1,061
  • 1
  • 12
  • 27