Visual Studio 代码 Chrome 调试器不会在 React 中的生成器函数内设置断点
Visual Studio Code Chrome Debugger doesn't set breakpoints inside generator function in React
我正在使用最新的 Visual Studio 代码和 Chrome 调试器扩展,我的代码是 React SPA。
当我尝试在 generator functions 中设置断点时
(即 function* ),断点被移动到函数的顶部,我想停都停不下来。
Step Over 也行不通,但让我转到一些低级别的库。
对于正常功能,断点工作正常。
我错过了什么吗?这是已知的限制还是错误?是否有任何工具(例如 Edge/Firefox 或本机 Chrome 调试器)可以更好地调试生成器函数?
我目前遇到了同样的事情,正在寻找解决方案。这是我目前所发现的,可能会有一些帮助。
在我们的例子中,我们使用 babel 来转换我们的代码,查看 babel 生成的代码,我们可以看到生成器正在为 @babel/preset-env
读取的 browerslist 所针对的浏览器进行转换。因此,作为初始测试,我们从开发版本中删除了 @babel/preset-env
,并在 Chrome 70 中进行了本地测试。生成器不再被转译,我们可以在 VSCode 中成功设置断点。
所以对我们来说,解决方案是不为开发版本转译,而为我们的目标浏览器转译生产版本。
作为参考,这是我们用来测试此解决方案的 babel 配置:
module.exports = {
presets: [
'@babel/preset-react'
],
plugins: [
[
'@babel/plugin-proposal-object-rest-spread',
{
useBuiltIns: true
}
],
'@babel/plugin-proposal-class-properties',
'@babel/plugin-transform-modules-commonjs'
],
env: {
production: {
presets: [
[
'@babel/preset-env',
{
debug: false,
useBuiltIns: 'usage'
}
]
],
plugins: [
'@babel/plugin-transform-runtime'
]
}
}
}
我们可以在任何想要针对我们支持的浏览器的生产 npm 脚本中设置 BABEL_ENV=production
。
{
"name": "testapp-ui",
"version": "1.0.0",
"private": true,
"scripts": {
"build": "rm -rf dist && mkdir dist && NODE_ENV=production BABEL_ENV=production npm run build:webpack",
"build:dev": "rm -rf dist && mkdir dist && NODE_ENV=development npm run build:webpack",
"build:webpack": "webpack --progress --debug",
...
感谢 , I’ve updated the .babelrc configuration file ( one of possible formats as described in https://babeljs.io/docs/en/configuration).
它允许在开发环境中设置断点。
.babelrc 中修改的行被注释掉:
{
"presets": [
//[
// "es2015",
// {
// "modules": false
// }
//],
"react",
"stage-0"
],
"env": {
"test": {
"presets": ["react"]
"prod": {
"presets": [["es2015"], "react"]
}
}
}
要为开发和生产使用不同的配置,您应该设置例如
BABEL_ENV=prod 并且在“env”元素中有不同的部分(来自
How do you configure babel to run with different configurations in different environments )
相关链接:
How to debug ES6 NodeJS with VSCode
Debugging with babel-register + NodeJs does not work #5728
我正在使用最新的 Visual Studio 代码和 Chrome 调试器扩展,我的代码是 React SPA。
当我尝试在 generator functions 中设置断点时
(即 function* ),断点被移动到函数的顶部,我想停都停不下来。
Step Over 也行不通,但让我转到一些低级别的库。
对于正常功能,断点工作正常。
我错过了什么吗?这是已知的限制还是错误?是否有任何工具(例如 Edge/Firefox 或本机 Chrome 调试器)可以更好地调试生成器函数?
我目前遇到了同样的事情,正在寻找解决方案。这是我目前所发现的,可能会有一些帮助。
在我们的例子中,我们使用 babel 来转换我们的代码,查看 babel 生成的代码,我们可以看到生成器正在为 @babel/preset-env
读取的 browerslist 所针对的浏览器进行转换。因此,作为初始测试,我们从开发版本中删除了 @babel/preset-env
,并在 Chrome 70 中进行了本地测试。生成器不再被转译,我们可以在 VSCode 中成功设置断点。
所以对我们来说,解决方案是不为开发版本转译,而为我们的目标浏览器转译生产版本。
作为参考,这是我们用来测试此解决方案的 babel 配置:
module.exports = {
presets: [
'@babel/preset-react'
],
plugins: [
[
'@babel/plugin-proposal-object-rest-spread',
{
useBuiltIns: true
}
],
'@babel/plugin-proposal-class-properties',
'@babel/plugin-transform-modules-commonjs'
],
env: {
production: {
presets: [
[
'@babel/preset-env',
{
debug: false,
useBuiltIns: 'usage'
}
]
],
plugins: [
'@babel/plugin-transform-runtime'
]
}
}
}
我们可以在任何想要针对我们支持的浏览器的生产 npm 脚本中设置 BABEL_ENV=production
。
{
"name": "testapp-ui",
"version": "1.0.0",
"private": true,
"scripts": {
"build": "rm -rf dist && mkdir dist && NODE_ENV=production BABEL_ENV=production npm run build:webpack",
"build:dev": "rm -rf dist && mkdir dist && NODE_ENV=development npm run build:webpack",
"build:webpack": "webpack --progress --debug",
...
感谢
它允许在开发环境中设置断点。
.babelrc 中修改的行被注释掉:
{
"presets": [
//[
// "es2015",
// {
// "modules": false
// }
//],
"react",
"stage-0"
],
"env": {
"test": {
"presets": ["react"]
"prod": {
"presets": [["es2015"], "react"]
}
}
}
要为开发和生产使用不同的配置,您应该设置例如 BABEL_ENV=prod 并且在“env”元素中有不同的部分(来自 How do you configure babel to run with different configurations in different environments )
相关链接:
How to debug ES6 NodeJS with VSCode
Debugging with babel-register + NodeJs does not work #5728