string - ES6 字符串文字/Typescript 的 Chrome 开发工具问题

Question

我正在开发一个使用 Typescript 和 Typescript 公开的一些 ES6 特性的项目，例如 ES6 字符串文字，例如`Something ${variable} Something else`.

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

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

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

是否有人遇到过此问题、找到了修复程序或知道这是否在 Google 的 Chrome 开发工具路线图上？

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

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

Answer 1

至于版本69.0.3497.100(官方构建)(64位)在Ubuntu中仍然是一个bug。

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

这里是我工作的 jsx 代码的一些示例。

---

在组件 Prop 中:

  <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;
      ....

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