在 chrome 开发工具中反应 jsx 调试

Question

我正在使用 Electron（Node.js 7.4，chromium 51）和 chrome 开发工具（带有 React 和 redux 扩展）

我可以在 react 选项卡中看到 react 代码，但是当我在 JSX 源代码中设置断点时，（点击它们）它们没有正确映射。

我正在使用带有内联源映射的 babel，所以我可以看到输出 js（es2015 预设和反应预设）。

我没有使用捆绑器（因为这是一个 Electron 项目）

还有其他人遇到过这个吗？

package.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Main Electron Process",
            "program": "${workspaceRoot}/main.js",
            "stopOnEntry": false,
            "args": [],
            "cwd": "${workspaceRoot}",
            "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd",
            "runtimeArgs": [
                "."
            ],
            "env": {},
            "sourceMaps": false
        },
        {
            "name": "Launch Chrome against localhost",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost/NodeWork//window.html",
            "webRoot": "${workspaceRoot}"
        },
        {
            "name": "Attach to Chrome",
            "type": "chrome",
            "request": "attach",
            "port": 9222,
            "webRoot": "${workspaceRoot}"
        }
    ]
}

launch.json（我用的是VSCODE）

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Main Electron Process",
            "program": "${workspaceRoot}/main.js",
            "stopOnEntry": false,
            "args": [],
            "cwd": "${workspaceRoot}",
            "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd",
            "runtimeArgs": [
                "."
            ],
            "env": {},
            "sourceMaps": true
        },

Answer 1

我从 http:// 而不是 file://

加载渲染页面

在 chrome 开发工具中反应 jsx 调试

react jsx debug in chrome dev tools

google-chrome-devtools

react-jsx

electron