"this"的值使用Chrome Devtools调试Babel转译的React时不正确 [英] Value of "this" is incorrect when debugging Babel transpiled React with Chrome Devtools

问题描述

我有一个使用以下.babelrc配置与Babel一起编译的React应用程序

{
  "presets": [
    "es2015",
    "stage-1",
    "react"
  ],
  "plugins": [
    "transform-decorators-legacy"
  ]
}

应用程序编译并运行正常.但是，当我调试事件处理程序(故意写为箭头函数)时，Chrome调试器将"this"的值显示为null.这是一个示例事件处理程序

handleNext = (event) => {
    event.preventDefault();
    this.gotoPage(this.state.page + 1);
}

如果我在事件处理程序的第一行上设置了一个断点，则调试器将"this"的值显示为null，但将"_this"显示为"this"的正确值.就像我说的那样，代码运行得很干净，但是调试令人沮丧，因为我不能简单地将鼠标悬停在代码中的字段上以查看其值.如果将"this"绑定到事件处理程序，则可以解决调试问题，但我不必执行此额外步骤.所有这些在Babel5中都运行良好，并且自从我们切换到Babel6以来一直是一个问题.

我正在使用webpack捆绑代码并创建源地图.这是我的webpack.config.js的摘录，用于配置源地图

plugins: [
new webpack.SourceMapDevToolPlugin({
  filename: '[name].js.map',
  include: ['app.js'],
  columns: false
})
],

解决方案

不幸的是，在Chrome的Babelified代码中使用调试器时，这确实是事实.要使用ECMAScript规范行为实现箭头功能，必须将this关键字转换为其他名称，并且目前尚无办法告诉Chrome调试方法. Firefox的开发人员工具具有很多额外的逻辑来解决此类问题，因此，如果您使用的是Firefox并启用了地图范围"复选框，它可能会正常工作，但它也可能会变慢，因为它并不简单.

一种选择是尝试使用箭头函数转换的spec选项，这应使其表现出更好的调试效果，但可能并非在所有情况下均有效.

"plugins": [
    ["transform-es2015-arrow-functions", {spec: true}]
]

I have a React application that is transpiled with Babel using the following .babelrc configuration

{
  "presets": [
    "es2015",
    "stage-1",
    "react"
  ],
  "plugins": [
    "transform-decorators-legacy"
  ]
}

The application transpiles and runs fine. However, when I debug event handlers (purposely written as arrow functions), the Chrome debugger displays the value of "this" as null. Here is a sample event handler

handleNext = (event) => {
    event.preventDefault();
    this.gotoPage(this.state.page + 1);
}

If I set a breakpoint on the first line of the event handler, the debugger displays the value of "this" as null but displays "_this" as the correct value for "this". As I said, the code runs clean, but debugging is frustrating since I cannot simply hover on fields in the code to see their value. I can work around the debugging issue if I bind "this" to my event handler, but I should not have to do that extra step. All of this worked fine in Babel5 and has only been an issue since we switched to Babel6.

I am using webpack to bundle the code and create the sourcemaps. Here is an excerpt from my webpack.config.js for sourcemaps configuration

plugins: [
new webpack.SourceMapDevToolPlugin({
  filename: '[name].js.map',
  include: ['app.js'],
  columns: false
})
],

解决方案

Unfortunately this is a fact of life when using the debugger in Babelified code with Chrome. To implement arrow functions with the ECMAScript spec behavior, the this keyword needs to be transformed into a different name, and there's currently no way to tell Chrome what do to for debugging. Firefox's developer tools have a bunch of extra logic to address issues like this, so it may work properly if you're using Firefox and enable to "Map Scopes" checkbox, but it can also be slower because it isn't trivial.

One option would be to try to use the spec option of the arrow function transformation, which should make this behave better for debugging, but may not work in all cases.

"plugins": [
    ["transform-es2015-arrow-functions", {spec: true}]
]

这篇关于"this"的值使用Chrome Devtools调试Babel转译的React时不正确的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！