Question

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

我可以在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 dev工具中对jsx debug做出反应

1 个答案: