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

问题描述

我有一个 React 应用程序，它使用以下 .babelrc 配置通过 Babel 进行了编译

<代码>{预设":["es2015",阶段1"，反应"],插件":[变换-装饰器-遗产"]}

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

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

如果我在事件处理程序的第一行设置断点，调试器将this"的值显示为空，但将_this"显示为this"的正确值.正如我所说，代码运行干净，但调试令人沮丧，因为我不能简单地将鼠标悬停在代码中的字段上以查看它们的值.如果我将this"绑定到我的事件处理程序，我可以解决调试问题，但我不应该执行那个额外的步骤.所有这些在 Babel5 中都运行良好，并且在我们切换到 Babel6 后才出现问题.

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

插件:[新的 webpack.SourceMapDevToolPlugin({文件名:'[名称].js.map'，包括:['app.js']，列:假})],

解决方案

不幸的是，当在 Chrome 的 Babelified 代码中使用调试器时，这是一个现实.要使用 ECMAScript 规范行为实现箭头函数，需要将 this 关键字转换为不同的名称，并且目前无法告诉 Chrome 进行调试做什么.Firefox 的开发人员工具有一堆额外的逻辑来解决此类问题，因此如果您使用 Firefox 并启用映射范围"复选框，它可能会正常工作，但它也可能较慢，因为它不是微不足道的.

一种选择是尝试使用箭头函数转换的 spec 选项，这应该会使其在调试时表现得更好，但可能不适用于所有情况.

插件":[["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屋！