Question

我正在开发一个使用Typescript的项目，以及一些由Typescript公开的ES6特征，例如ES6 String Literals，例如`Something ${variable} Something else`。

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

但Chrome Dev Tools存在ES6字符串文字的问题，并且似乎无法识别ES6字符串文字的结尾。

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

是否有人遇到此问题，找到了修复程序或知道这是否在Google的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

DevTools团队发表的December 14, 2017评论说他们更新了DevTools中使用的CodeMirror版本，现在应该修复这个问题。在Chrome 64及更高版本中应该可以使用。在早期版本的Chrome中，它仍然会被打破。您可以在chrome://version检查您的版本。

Answer 3

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

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

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

如果您在本地提供生成的源地图文件（.js.map）以及生成的.js文件，则应该能够使用{{在“源”下的chrome dev工具中打开typescript文件。 1}}。

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

3 个答案: