ES6 字符串文字/打字稿的 Chrome 开发工具问题

Question

我正在使用 Typescript 和 Typescript 公开的一些 ES6 功能（例如 ES6 String Literals）开展一个项目，例如`Something ${variable} Something else`.

在调试问题时，我在我的打字稿文件中放置了一个断点，以便在源代码面板中单步执行它，这通常可以正常工作。

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

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

是否有人遇到过此问题、找到了解决方案或知道这是否在 Google 的 Chrome 开发工具路线图上？

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

编辑 2： 错误已经开放了很长一段时间，但似乎没有被优先考虑。如果您遇到问题，请转到上面的 chromium 链接，并用有用的信息对其加注星标/评论，以将其转移到开发工具团队的关注点。

Answer 1

如果您使用的是 Typescript，则可以通过将代码编译为 ES2015 并使用源映射来解决此问题。这样，反引号内插字符串将转换为良好的 ol'"string " + variable + " string"，但您仍然可以在查看带有反引号的原始打字稿代码时进行调试。

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

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

如果您在本地提供生成的源映射文件 (.js.map) 以及生成的 .js 文件，您应该能够使用 Ctrl-p 在“源”下的 chrome 开发工具中打开 typescript 文件。

Answer 2

来自 DevTools 团队的 December 14, 2017 评论说他们更新了 DevTools 中使用的 CodeMirror 版本，现在应该修复该问题。在 Chrome 64 及更高版本中它应该可以工作。在早期版本的 Chrome 中，它仍然会被破坏。你可以在chrome://version查看你的版本。

Answer 3

至于版本 69.0.3497.100 (Official Build) (64-bit) 在 Ubuntu 中仍然是一个 bug。

作为一种解决方法，您可以开始在包含模板化字符串的行末尾添加：//`，这会修复 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;
      ....

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