如何快速定位未知网页js代码中的函数？

发布于2021年01月11日作者：苏南大叔来源：平行空间笔记本~

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

大家都知道，网页的前端代码都是运行在客户端的浏览器里面的。如果说想保密代码逻辑的话，是很困难的。如果另外的一个程序员诚心去分析你的代码的话，基本上来说，是防不住的。当然，后来有了代码混淆的概念，使得这种情况有所缓解。即使没有办法保密代码，也会使得第三方试图分析代码的行动，变得异常困难。

本文中，苏南大叔将利用chrome的开发者工具，对一些js函数进行定位。当然，这些方法并不是百试百灵的，需要具体问题具体分析，这里就是提供一个思路而已。测试环境是chrome@86.0.4240.75。本文说的是分析别人的线上代码，自己没有完整代码，对可分析的代码，也是一无所知的。

基本代码

这里以下面的html代码来举个例子吧。假设可以看到函数名称是：execute_javascript()。

<button type="button" onclick="execute_javascript('online-run-code-1', this)">run</button>

那么，就可以在js代码中，查找execute_javascript关键词来定位，但是.js代码众多，很难查找。以前，苏南大叔都是把代码另存为本地，然后在利用编辑器全局查找的。不过，这不是本文的主要思路。

如何打开开发者模式，这里就不说了啊，不会的自己去面壁。通过查看dom节点，一般来说，可以看到你的目标函数名称。但是，却无法通过点击等方式，快速跳转到函数定义。这个时候，可以在当前页面的开发者工具里面，输入如下代码（execute_javascript是目标函数名）：

console.log(execute_javascript)

然后点击出来的函数体，就可以快速定位到函数定义了。很简单是吧。大多数情况下，操作到这里就可以解决问题了。

如果您所分析的代码，并没有明显地表述出函数名称。也就是说，通过js文件，动态绑定事件或者匿名函数的情况。那么，您可能无法快速获得函数名称，那么，您可以选取合适的事件进行拦截。比如click事件。切换到sources标签，定义要拦截的事件吧。如下图所示：

或者利用xhr的地址，设置断点。如下图所示：

定义好断点事件后，比如最常见的点击事件是mouse > click，再去手工触发你要观察的页面事件，然后就可以断点到对应的函数。当然，可能您看到的并不是您想要的，那么请使用步进等调试功能，进行代码查看。

同时，您还可以利用代码格式化功能，使得代码更加容易查看。

主要有以下几个功能，大家自己试试。

在步进的过程中，您可能会发现进入一些没有啥意义的代码中，扰乱视线。这里，可以利用这个blackbox功能，可以排除特定的js文件，注意：这里的屏蔽单位是某个具体的js文件。

比如：大多数情况下，jquery就是个应该被blackbox的文件。否则，会强烈干扰视线。

如果切换到被拦截的.js文件的时候，在界面顶部，有解除的按钮。右键菜单，也有stop blackbox的菜单。

当然，也可以在设置菜单里面，查看到所有的blackbox信息，并删除对应的设置。

在本文中，苏南大叔主要阐述的是一种思路，可以用于分析第三方网页的未知逻辑。辅助分析而已，希望会对你有帮助。

更多chrome的文章，还请查看苏南大叔的博客：

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。

本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。

【绝密】秘籍文章入口，仅传授于有缘之人 chrome