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

Posted 2023-03-07

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

【英文标题】：Chrome Dev Tools Issue With ES6 String Literals/Typescript

【发布时间】：2017-04-13 08:09:00

【问题描述】：

我正在使用 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 链接，并用有用的信息对其加注星标/评论，以将其转移到开发工具团队的关注点。

【问题讨论】：

你有没有找到任何东西？可能是错误报告？这也让我发疯了。

@YesMan85 发现了一个开放的错误报告 - 看起来他们仍在努力修复：bugs.chromium.org/p/chromium/issues/detail?id=659515

好的，谢谢，我昨天也在一个 repo 案例中放了一个 bug，希望他们能把它捡起来。

任何遇到这个问题的人都应该给铬错误加注星标/添加更多信息和证据。希望这很烦人

在链接中，您提供的这个问题被标记为“已修复”，但实际上它仍然存在问题。有人知道是否有指向此问题的新链接，我们可以投票以强制执行此错误修复？

【参考方案1】：

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

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

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

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

【讨论】：

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

这不是 OP 问题的解决方案，甚至与他的问题无关。

【参考方案2】：

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

【讨论】：

还是坏了。版本 64.0.3282.119（正式版）（64 位）

在版本 65.0.3325.162 中损坏。我已在crbug.com/659515

为该问题加注星标

在 68.0.3438.3 中损坏。我已在crbug.com/659515

上为该问题加注星标

在版本 70.0.3538.102（官方构建）（64 位）中损坏

仍然损坏 77.0.3865.120（官方版本）（64 位）。没人关心

【参考方案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;
      ....

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

【讨论】：

好东西！谢谢！！