Chrome开发工具问题ES6字符串Literals/Typescript

Question

我正在使用Typescript和ES6字符串文字的类似字体公开的一些ES6功能，例如， `Something ${variable} Something else`。

虽然调试一个问题，我放弃了断点到我的打字稿文件通过它在源面板，通常工作正常步骤。

但Chrome浏览器开发工具与ES6字符串文字的问题似乎并没有认识到一个ES6字符串文字的结束。

，而不是按照字符串文字所有的代码标记为红色（字符串凸显调试器）和可变检查堵塞铬调试器似乎认为这完全是一个巨大的字符串。

有人曾经遇到过这个问题，找到了解决或知道这是否是在谷歌的路线图，Chrome开发工具？

编辑1：
貌似是目前正由铬团队合作在这个问题上。请参阅更新问题报告：
bugs.chromium.org/p/chromium/issues/detail?id=659515

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

Answer 1

如果使用的是打字稿，您可以通过编译代码到ES2015和使用源地图解决此问题。这样，反插插入的字符串将被转换为好的'"string " + variable + " string"，但您仍然可以在反向查看原始打印代码的同时进行调试。

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

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

如果你在本地提供生成的源映射文件（.js.map）旁边的产生.js文件，你应该能够打开打字稿使用Ctrl-p的“Sources”下的chrome dev工具中的文件。

Answer 2

从DevTools队这December 14, 2017评论说，他们更新DevTools使用的CodeMirror版本，这个问题现在应该是固定的。在Chrome 64及更高版本中，它应该可以工作。在早期版本的Chrome中，它仍然会被破坏。您可以在chrome://version查看您的版本。