Google chrome devtools 在chrome开发工具中进行react jsx调试
我正在使用Electron(Node.js 7.4,chrome 51)和chrome开发工具(带有react和redux扩展) 我可以在react选项卡中看到react代码,但是当我在JSX源代码中设置断点时(点击它们),它们没有正确映射 我将babel与内联源代码映射一起使用,因此我可以看到输出js(es2015预设和react预设) 我没有使用捆绑机(因为这是一个电子项目) 还有其他人见过这个吗 package.jsonGoogle chrome devtools 在chrome开发工具中进行react jsx调试,google-chrome-devtools,electron,react-jsx,Google Chrome Devtools,Electron,React Jsx,我正在使用Electron(Node.js 7.4,chrome 51)和chrome开发工具(带有react和redux扩展) 我可以在react选项卡中看到react代码,但是当我在JSX源代码中设置断点时(点击它们),它们没有正确映射 我将babel与内联源代码映射一起使用,因此我可以看到输出js(es2015预设和react预设) 我没有使用捆绑机(因为这是一个电子项目) 还有其他人见过这个吗 package.json { "version": "0.2.0", "con
{
"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)
我是从http://而不是file://加载呈现页面的。如果您愿意,您仍然可以在Electron项目中使用捆绑包。它仍然是一个在env这样的浏览器中运行的web应用程序。如果我们能看到配置,可能会更有帮助。你用什么?你看到原始源了吗,或者仅仅是传输源了吗?@Gideon,我不使用绑定器,因为我看不出在electron中需要它们。我将添加package.json。我可以看到原始代码和传输的代码。是的,我真的很喜欢electron compile,但我还没有安装它,所以我仍然使用带手表标志的Babel。见:
{
"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
},