chrome 开发者工具中的人类可读 javascript

Posted 2023-03-07

【中文标题】chrome 开发者工具中的人类可读 javascript

【英文标题】：Human readable javascripts in chrome developer tools

【发布时间】：2011-05-27 22:21:24

【问题描述】：

有人知道 Chrome 开发者工具是否可以将 javascript 格式化为人类可读的形式吗？某种美化剂会很方便。假设我正在使用一些 JS 库，我需要实例化它的对象，这样我就应该知道将什么放入构造函数中。但是在 Chrome 开发者工具用户界面中搜索这个有 4 行的庞大库非常烦人......

否则，服务器端需要负责实现“开发模式”，以提供未缩小的 javascript 文件......

【问题讨论】：

很确定这是不可能的，但我希望我错了，因为这将是一个不错的功能。

我做了，但是没有这个功能很奇怪，所以我最好在这里问

萤火虫版本：***.com/questions/4279319/…

【参考方案1】：

某些浏览器有一个 Pretty print 按钮，看起来像 ，它会根据浏览器显示为 html、JS 和/或 CSS。

Chrome 在 Sources 选项卡中有它：

Firefox 在 Debugger 选项卡中拥有它

：

这些按钮的位置可能会改变，但它应该一直在那里

【讨论】：

在 Windows 上，它是一个类似于 -> 的小图标。标题说漂亮的印刷品。

@with 感谢您提到这一点。我想知道为什么他们在 Windows/Mac OS 上实现它的方式不同。

有谁知道这个 Chrome 功能发生了什么？我想我过去在我的 Chrome 中看到过这种情况，但现在它似乎消失了。

@superjos 他们现在已将其更改为在 Mac OS 和 Windows 上相同。

嗯，但我什至无法在上下文菜单中看到它。只有“检查项目”命令在那里。见screenshot。

【参考方案2】：

难道没有漂亮的打印图标（看起来像： ），至少在 Windows 上，脚本选项卡中有一个吗？

【参考方案3】：

有http://jsbeautifier.org/ 供在线使用（您需要复制/粘贴）。

在该站点上，他们有一个指向 fiddler 的链接（一个网络调试代理）和一个 JavaScript Formatter 的链接（第三个​​扩展）。