如何强制Chrome调试工具以漂亮的代码进行调试？

Question

虽然我使用漂亮的代码并在"漂亮代码"选项卡中设置了断点,但调试器仍然使用缩小的代码.(我无法确切地看到我的位置,需要在源和"漂亮的代码"之间不断切换).在具有相同脚本的相同页面上,它有时可以工作,有时不工作.我无法找到原因或我激活方式的任何差异.

有没有办法强制调试器使用"漂亮的代码"？任何想法或其他问题？这应该报告为错误吗？

编辑:我仍然不明白发生了什么,但有一个解决方案.所以当这种情况发生时,只需编辑脚本并添加"调试器"; 光标后的关键字.它将成为一个断点.然后,如果你使用"漂亮的代码",调试器将保留在美化代码中.正如我所说,我不明白为什么会这样,所以我还在等待答案.

编辑:当前浏览器版本是42.0.2311.135(64位).

编辑:戴夫指出,有一个非常相似的事情报告错误.https://code.google.com/p/chromium/issues/detail?id=415406它说这与文件大小有关但我无法确认.我改变了标题以反映这些发现.

Answer 1

你可以称之为bug.你可以称之为dillema.

2013年8月9日开放门票 (Chrome v.28)

Bug Reporter的观察结果

我花了一些时间来调试这个,并熟悉如何在本地开发devtools; 我不确定这一切是否有所帮助,但这是我迄今为止所看到的以及一些预感的一个标题:

在原始.js文件中附加断点时,UI似乎感到困惑,并根据sourceMap关联将断点分配给关联的.coffee或.ts文件[见图1,附件]

但是,取消选中断点以禁用时,UI会正确更新以在.js文件中的正确位置显示断点.[见图2,附件]

在我看来,在WebInspector.CompilerScriptMapping.rawLocationToUILocation或WebInspector.CompilerScriptMapping.uiLocationToRawLocation中发生了不正确的查找.

2014年9月21日开放门票 (Chrome v.37)

铬开发商的观察

这不是一件容易解决的问题.断点管理器是围绕断点始终显示在"最佳"UI位置的想法构建的,在源映射的情况下,该位置是未编译的源.解决这个问题需要我们使用断点的主要ui位置作为它应该显示的位置的提示.此外,由于默认情况下执行行将显示在未编译的源中,因此我们必须继续在其中显示断点.所以这一切都需要在几个ui位置同时显示断点(和执行线).这些地点的所有行动都应该顺利进行.

这是一项重大的努力,对我来说听起来不像是"GoodFirstBug".

结论:

Prettify似乎没有创建一个新的非缩小版本.而是它被渲染.这是有道理的.使用所有不同的框架和风格(例如Coffee),如果调试器创建了一个新文件,则存在很大的错误可能性.

断点管理器是围绕断点始终显示在"最佳"UI位置的想法构建的,在源映射的情况下,该位置是未编译的源.

我将此解释为Chrome浏览器和调试器将继续从缩小版本运行.当您在"漂亮"文件中设置断点时,调试器会将其设置在缩小文件中,并为开发人员提供"漂亮"的调试器渲染步骤,逐步缩小文件.

调试器需要管理很多,而且可能相当脆弱.我们可以称之为一个错误或一个非常雄心勃勃的功能,许多事情都可能出错.

**

我已将此线程添加到两个错误中,并通过电子邮件发送给分配给它的开发人员.

**

Answer 2

在 Chrome 和 Safari 中，只需选择“脚本”选项卡，找到相关文件，然后按底部面板中的“{}”（漂亮的打印）图标。