如何在Google Chrome中查看页面的JavaScript函数与变量？

当然有办法啦！浏览器开发者工具里除了你熟悉的Elements面板，还有专门用来处理JavaScript的功能模块，下面给你分享几个最常用且高效的方法：

一、使用Console面板快速查看全局内容 #

• 直接在控制台输入全局对象window，按下回车后展开这个对象，就能看到页面上所有的全局变量、函数以及浏览器内置的属性和方法。
• 如果想快速列出所有全局属性名，可以执行Object.keys(window)，控制台会返回一个包含所有全局属性的数组，方便你快速检索。
• 要是想查看某个特定函数的定义，直接输入函数名（比如myCustomFunction），控制台就会展示该函数的源码（如果代码没有被压缩混淆的话）。

二、通过Sources面板深入查看代码细节 #

这个面板是调试JavaScript的核心工具，能帮你完整浏览和分析页面的JS代码：

• 左侧的文件列表会展示页面加载的所有JS文件，点击对应的文件就能查看完整代码，里面的所有函数、变量定义都一目了然。
• 按Ctrl/Cmd + F唤起搜索框，输入函数或变量名，就能快速定位到它们在代码中的位置。
• 开启断点调试后（点击代码行号即可打断点），右侧的Scope面板会显示当前执行上下文里的所有变量、函数，包括局部作用域内的内容，这对查看非全局的函数和变量特别有用。

三、Memory面板查看内存中的所有对象（进阶用法） #

如果需要排查复杂场景下的变量或函数，Memory面板能帮你获得更全面的信息：

• 点击面板里的“Take snapshot”生成内存快照，加载完成后，你可以在快照中搜索、筛选所有存在于内存中的对象、函数，甚至能看到它们的引用关系。

实用小技巧 #

• 如果页面的JS代码被压缩混淆了，在Sources面板左下角点击{}按钮（Prettify code），就能把代码格式化，变得清晰易读。
• 对于局部作用域里的函数和变量，最直观的方式就是在该代码块附近打个断点，当代码执行到断点时，Scope面板会实时展示当前作用域的所有内容。

内容的提问来源于stack exchange，提问作者frosty