Chrome开发者工具在处理ES6字符串字面量/Typescript方面存在问题

Question

我正在使用TypeScript来开发一个项目，其中使用了一些由TypeScript公开的ES6特性，比如ES6字符串模板，例如`Something ${variable} Something else`。

在调试代码时，我将断点设置在TypeScript文件中，以便在源代码面板中逐步执行代码，通常情况下都能正常工作。

但是Chrome Dev Tools对于ES6字符串模板存在问题，似乎无法识别ES6字符串模板的结尾。

因此，所有跟随该字符串模板后面的代码都会被标记为红色（在调试器中用于字符串高亮显示），且无法检查变量，因为Chrome调试器似乎认为它们都是同一个大字符串。

是否有人遇到过这个问题，找到了解决方法或者知道这个问题是否在谷歌Chrome Dev Tools的路线图中？

编辑 1:
看起来这个问题目前正在被Chromium团队处理。要获取更新，请参阅问题报告：
bugs.chromium.org/p/chromium/issues/detail?id=659515

编辑 2: 这个Bug已经存在相当长的时间，但似乎没有得到优先处理。如果您遇到了这个问题，请转到上面提到的Chromium链接，并在其中加星或评论，为Dev Tools团队提供有用的信息。

- Anton v B

---

你有找到任何东西吗？也许是一个错误报告？这也让我感到疯狂。 - Roger Far

@YesMan85发现了一个公开的错误报告-看起来他们仍在修复中：https://bugs.chromium.org/p/chromium/issues/detail?id=659515 - Anton v B

好的，谢谢。昨天我也提交了一个带有复现步骤的 bug，希望他们能够解决。 - Roger Far

遇到这个问题的人应该为Chromium的错误添加星标/提供更多信息和证据。希望它能得到解决，因为它非常恼人。 - darudude

在您提供的链接中，此问题被标记为“已解决”，但实际上它仍然存在问题。是否有人知道是否有一个新链接可以投票以强制修复此错误？ - Oleg Pro

Answer 1

对于在Ubuntu上的版本69.0.3497.100（官方构建）（64位），仍存在错误。

作为一种解决方法，您可以开始添加：//`到包含模板字符串的行的末尾，这可以修复Chrome源选项卡中的格式。

以下是我工作的JSX代码的几个示例。

---

在组件属性中：

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

作为子元素:

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

在一份声明中：

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

我真的希望他们能尽快解决这个问题，该问题与IT技术有关。

- Rodrigo García

---

太棒了！谢谢！！ - Marco Faustinelli

@Rodrigo，你是一个黑客。谢谢。它起作用了。 - joyBlanks

Answer 2

这篇来自DevTools团队的2017年12月14日评论表示，他们已经更新了DevTools中使用的CodeMirror版本，问题应该已经解决了。在Chrome 64及以上版本中，它应该可以正常工作。在早期版本的Chrome中，它仍然会出现问题。您可以在chrome://version中检查您的版本。

- Kayce Basques

---

依然有问题。版本号为64.0.3282.119（正式构建）（64位）。 - AlexMcG

版本号为65.0.3325.162的问题已经发现。我在https://crbug.com/659515上标记了这个问题。 - nickstaroba

在版本号为68.0.3438.3的Chrome浏览器中出现了故障。我已经在crbug.com/659515上给这个问题加了星标。 - Benjamin Toueg

在版本70.0.3538.102（官方构建）（64位）中出现故障。 - chad steele

仍然无法正常工作 77.0.3865.120（官方版本）（64位）。没有人在意。 - AlexMorley-Finch

Answer 3

如果您正在使用TypeScript，您可以通过将代码编译为ES2015并使用源映射来解决此问题。这样，反引号插值字符串将被转换为传统的"string " + variable + " string"，但您仍然可以在查看带有反引号的原始TypeScript代码时进行调试。

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

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

如果您在本地服务生成的源映射文件（.js.map）以及生成的.js文件，您应该能够在Chrome开发工具中的“Sources”下使用Ctrl-p打开TypeScript文件。

- Yaar Hever

---

问题在于语法高亮不适用于带有反引号的TS源映射。您的方法最终仍会在Chrome调试器中显示带有反引号的TypeScript文件。 - rikkit

这不是 OP 问题的解决方案，甚至与他所询问的内容无关。 - Rodrigo García