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

Question

我正在使用Typescript和一些由Typescript公开的ES6特征(如ES6 String Literals)开发项目`Something ${variable} Something else`.

在调试问题时,我在我的打字稿文件中删除了一个断点,以便在源面板中逐步执行它,这通常可以正常工作.

但Chrome Dev Tools存在ES6字符串文字的问题,似乎无法识别ES6字符串文字的结尾.

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

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

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

编辑2: Bug已经打开很长一段时间了,但似乎没有被优先考虑.如果您遇到问题,请转到上面的chrome链接,并使用有用信息对其进行星标/评论,以便将其转移到Dev Tools团队的焦点.

Answer 1

对于Ubuntu中的版本69.0.3497.100(官方构建)(64位)仍然是一个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;
      ....

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

Answer 2

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

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

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

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