String Chrome开发工具存在ES6字符串文本/类型脚本问题

我正在使用Typescript和Typescript公开的一些ES6特性（如ES6字符串文字）进行一个项目，例如

`Something${variable}Something`

在调试一个问题时，我在我的typescript文件中放置了一个断点，以便在源代码面板中逐步完成它，这通常可以正常工作

但是Chrome开发工具在ES6字符串文本方面存在问题，并且似乎无法识别ES6字符串文本的结尾

相反，字符串文字后面的所有代码都被标记为红色（在调试器中突出显示字符串），并被阻止进行变量检查，因为chrome调试器似乎认为这都是一个巨大的字符串

是否有人遇到过这个问题，找到了解决方案，或者知道这是否在谷歌的Chrome开发工具路线图上

编辑1:
看起来Chromium团队目前正在处理此问题。有关更新，请参阅问题报告：

编辑2:

---

这个Bug已经存在了很长一段时间，但似乎并没有被优先考虑。如果您遇到了这个问题，请转到上面的chromium链接，用有用的信息对其进行点评，以将其转移到开发工具团队的关注点

如果您使用的是Typescript，您可以通过将代码编译到ES2015并使用源代码映射来解决此问题。这样，反勾号插值字符串将转换为良好的ol'

“string”+变量+“string”

，但您仍可以在查看带有反勾号的原始typescript代码时进行调试

这需要将以下内容添加到tsconfig.json中：

{
    "compilerOptions": {
        "target": "ES2015",
        "sourceMap": true, 
        ...
    }
    ...
}

---

如果您在本地提供生成的源代码映射文件（

.js.map

）以及生成的

.js

文件，那么您应该能够在chrome开发工具的“Sources”下用

Ctrl-p

打开typescript文件。DevTools团队的评论说，他们更新了DevTools中使用的CodeMirror版本，这个问题现在应该解决了。在Chrome64和更高版本中，它应该可以工作。在Chrome的早期版本中，它仍然会被破坏。您可以在

chrome://version

至于Ubuntu版本69.0.3497.100（官方版本）（64位）仍然是一个bug

作为一种解决方法，您可以开始在包含模板字符串的行末尾添加：

/`

，这将修复chrome sources选项卡中的格式设置

下面是我的jsx代码的一些示例

---

在组件道具中：

  <Field
    name={`${fields.name}[${index}].comments`}// `
    component="input"
    type="text"
  />

---

我真的希望他们能尽快解决这个问题。

你处理好了吗？找到什么了吗？也许是一个bug报告？这也快把我逼疯了。@YesMan85发现了一个开放的bug报告-看起来他们还在修复：好的，谢谢，我昨天也在回购案例中加入了一个bug，希望他们能发现。任何遇到这个问题的人都应该对chromium bug进行标记/添加更多信息和证据。希望这个问题在链接中被发现，因为它很烦人，你提供了这个问题被标记为“已修复”，但实际上它仍然是坏的。有人知道这个问题是否有一个新的链接，我们可以投票强制执行这个bug修复吗？问题是语法突出显示在带有反勾号的TS源映射上不起作用。你的方法最终仍然会在Chrome调试器中显示一个带有反勾号的TypeScript文件。这不是OP问题的解决方案，它甚至与OP的问题无关。仍然损坏。版本64.0.3282.119（官方版本）（64位）在版本65.0.3325.162中中断。我已经在68.0.3438.3版的《破碎》中为本期配角。我已经在70.0.3538.102版（官方版本）（64位）中发布了这个问题，但仍在77.0.3865.120版（官方版本）（64位）中发布。没人关心伟大的东西！非常感谢。

  <label>
    {`${t('Condone')}  `}{/* ` */}
  </label>

  switch (DEBTTYPE) {
    case DEBTTYPE_MACHINE_PRODUCT:
      id = `machine_product_difference_row_${row.id_productdebt}`;// `
      break;
      ....