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

【问题标题】：How to force Chrome debugging tools to debug in pretty code?如何强制 Chrome 调试工具以漂亮的代码进行调试？
【发布时间】：2015-07-18 06:33:59
【问题描述】：

虽然我使用了漂亮的代码并在“漂亮的代码”选项卡中设置了断点，但调试器仍然在缩小代码中工作。（我无法确切地看到我在哪里，需要在源代码和“漂亮代码”之间不断切换）。在具有相同脚本的相同页面上，它有时有效，有时无效。我找不到原因或激活它的方式有什么不同。

有没有办法强制调试器使用“漂亮代码”？任何想法或其他问题？是否应该将此报告为错误？

编辑：我仍然不明白发生了什么，但有一个解决办法。因此，当这种情况发生时，只需编辑脚本并添加“调试器；”光标后的关键字。它将创建一个断点。然后，如果您使用“漂亮代码”，调试器将留在美化代码中。正如我所说，我不明白为什么会发生这种情况，所以我仍在等待答案。

编辑：当前浏览器版本是 42.0.2311.135（64 位）。

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

【问题讨论】：

我假设您使用的是 41 版，但我问是因为这是 39 中的一个已知问题，似乎在 V 40 中已解决。
你有这个bug的链接吗？
我指的不是这个，而是code.google.com/p/chromium/issues/detail?id=415406
谢谢，这个问题好像是一样的。正如我在那里看到的，它不是固定的吗？有点老了，出现在v37。
我提交了被提及的 Chromium 错误。问题发生的时间非常不一致。不同站点上使用的相同脚本文件不一定会出现问题。问题当然仍然存在：我今天在 Chrome 43 (OS X) 上再次遇到问题

标签： javascript debugging google-chrome-devtools minify javascript-debugger

【解决方案1】：

你可以称之为错误。你可以称之为困境。

Open ticket from Aug 9, 2013 （Chrome v. 28）

Bug Reporter 的观察

我已经花了一些时间调试这个，并熟悉自己以及如何在本地开发开发工具；我不确定这一切是否有帮助，但这是我到目前为止所看到的内容的一个脑筋急转弯和一些预感：

在原始 .js 文件中附加断点时，UI 似乎感到困惑并将断点分配给关联的 .coffee 或每个 sourceMap 关联的 .ts 文件 [参见 image-1，附加]

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

在我看来，在 WebInspector.CompilerScriptMapping.rawLocationToUILocation 或 WebInspector.CompilerScriptMapping.uiLocationToRawLocation

Open ticket from Sep 21, 2014 (Chrome v. 37)

Chromium 开发者观察

这不是一件容易解决的事情。断点 manager 是围绕始终显示断点的想法构建的在“最好的”用户界面位置，这是未编译的源，以防万一的源地图。解决这个问题需要我们使用断点主要 ui 位置作为应显示位置的提示。而且因为执行行将显示在未编译的源代码中默认情况下，我们必须不断在其中显示断点也是。所以这一切最终都需要显示断点（和执行行）同时在几个 ui 位置上。所有动作与这些位置应该可以顺利工作等。

这是一项重大的努力，听起来不像是“GoodFirstBug” 对我来说。

结论：

Prettify 似乎没有创建新的非缩小版本。而是呈现。这是有道理的。对于所有不同的框架和风格（例如 Coffee），如果调试器创建了一个新文件，则很有可能出错。

断点 manager 是围绕始终显示断点的想法构建的在“最好的”用户界面位置，这是未编译的源，以防万一源地图。

我认为这意味着 Chrome 浏览器和调试器将继续从缩小版本运行。当您在“漂亮”文件中设置断点时，调试器会将其设置在缩小文件中，并为开发人员提供调试器逐步通过缩小文件的“漂亮”呈现。

调试器要管理的内容很多，而且可能相当脆弱。我们可以将其称为错误或非常雄心勃勃的功能，很多事情都可能出错。

**

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

**

【讨论】：

【解决方案2】：

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

【讨论】：

正如我所说，我正在使用 {}，它工作正常。但是，在某些情况下，调试器只能在缩小的源代码中工作。如果我在“跳过”上切换到“漂亮代码”，它将更改选项卡，再次打开缩小版本并跳过。
我知道您对此投了反对票，但拥有这张照片真是太棒了！谢谢。
我认为您错过了帖子的重点。 OP 询问断点和代码步骤并不总是遵循“美化”样式显示的内容

【解决方案3】：

截至 2020 年，在特定情况下仍会出现类似行为：

您打开一个源映射文档，即它在窗口底部显示“（源映射自...）”
你美化它
您在美化版本中放置断点
调试器将停止在丑陋的源映射文件中

解决方案似乎是转到您映射的原始源，对其进行美化，然后将断点放在那里。

铬 79.0.3945.88 ; Webpack 4.41.2

【讨论】：

这是我做的，但没有工作

【解决方案4】：

似乎您正在单击底部面板中的“{ }”（漂亮打印）图标并在那里设置断点，而没有附加原始文件的source map。

当给定一个 .map 文件时，Chrome 开发工具会使用 .map 文件中的数据将每行已执行的缩小代码映射到原始源文件。否则，它会尽力缩进/格式化缩小的文件。

我建议你使用 grunt uglify 或类似的工具来缩小你的 js，它会自动生成一个映射文件进行调试。有关如何执行此操作的更多信息，请参阅以下链接。

http://blog.teamtreehouse.com/introduction-source-maps

Javascript .map files - javascript source maps

【讨论】：

感谢您的回答。我知道源映射以及应该如何使用它们，但是我在询问源映射不可用时调试工具的行为。假设我正在尝试调试一些第三方脚本。
@Ante 如果您正在调试第三方脚本并且您正在引用一个缩小脚本，您将始终看到它被缩小。这发生在我第一次尝试调试 angularjs 时。将脚本引用添加到非缩小版本已解决。 :)
我正在调试我自己的缩小脚本以跟踪生产中的错误。我不想在生产站点上发布地图文件。有没有办法将映射和源文件保存在不同的位置？

【解决方案5】：

这个怎么样？：生成“min”版本的漂亮打印版本并使用“min”版本名称保存：用“min”替换漂亮的“one”

【讨论】：

像其他人一样，Chrome 开发工具似乎不一致，目前拒绝漂亮地打印我的缩小代码，因此我无法设置调试行。您的想法通过横向思考帮助了我，所以我只是将我的缩小器设置为保持换行符并重新运行调试会话。谢谢

【解决方案6】：

只需将 debugger; 放在 js 代码的顶部即可。

例如：

function add(n1, n2) {
  debugger;
  let sum = n1 + n2;
  return sum;
}

【讨论】：

【解决方案7】：

在本地开发过程中调试第三方 npm 库。

从“node_modules[package_name]\package.json”更新 package.json

"main": "dist/package-minified.js" -> "main": "dist/package-formatted.js"
重建你的项目

您将能够为第三方 js 库设置断点。

通常，库带有格式化和缩小的 js 文件。您将在 node_modules[package_name]

下找到它们

dist/[包名]-src.js
dist/[包名]-min.js

【讨论】：