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 ?

回答1:

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

回答2:

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:

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

回答4:

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.

来源：https://stackoverflow.com/questions/27516580/debugging-jsx-using-browser-plugins

标签

javascript

reactjs

react-jsx