窥探我的内心是非常危险的事情 ——卫庄 《秦时明月之万里长城》

0x00 前言
无论代码写的好与坏,相信没有哪个程序员愿意主动让别人”欣赏”自己的代码。对于做后端开发的同学这完全不是问题,用户(或者不怀好意的人)很难直接接触到他们所写的代码。而对于搞前端开发的同学来说,这却是一个几乎无解的难题,因为他们所写的JavaScript代码是要在用户浏览器上执行的,总不能把这些代码也藏在服务器上吧?

所以,某些“邪恶”的前端工程师想到,既然一定要把代码给别人看,何不干脆把代码搞的恶心一点,增加别人阅读和分析代码的难度。

于是乎,就有了这样的一篇文章,本文介绍了几种我在实际中用到的Chrome调试技巧,适用于那些想“窥探”前端工程师内心的人,当然也适用于做爬虫的同学们。默认读者已经熟知JavaScript的各种语法和灵活的用法,并且会使用Chrome开发人员工具。

0x01 将JavaScript中的对象保存到本地
在某些场景中,一些JavaScript的对象非常复杂,虽然可以使用Chrome开发人员工具进行查看,但在这个小小的界面中查看还是有诸多不便。如果能够将这个对象保存到本地,直接使用文本编辑查看就非常方便了。

另一种场景是,当我们使用JavaScript编程时,希望将一些运算结果导出,虽然现在HTML5中提供了localStorage这样的特性,但有的时候依然不够方便。记得在制作某一期课程时,使用JavaScript实现了一个强化学习算法,最后一直苦于无法将训练好的Q矩阵导出到文件中,最后无奈只得先保存到localStorage中,再一点点Ctrl+C复制出来。

说了这么多,遗憾的是,Chrome调试器并没有这样的一个功能。

还好,已经有可爱的外国网友实现了这样的一个功能,在Chrome的console中输入如下代码:

(function(console){

console.save = function(data, filename){

if(!data) {
console.error(”)
return;
}

if(!filename) filename = ‘console.json’

if(typeof data === “object”){
data = JSON.stringify(data, undefined, 4)
}

var blob = new Blob([data], {type: ‘text/json’}),
e = document.createEvent(‘MouseEvents’),
a = document.createElement(‘a’)

a.download = filename
a.href = window.URL.createObjectURL(blob)
a.dataset.downloadurl = [‘text/json’, a.download, a.href].join(‘:’)
e.initMouseEvent(‘click’, true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
a.dispatchEvent(e)
}
})(console)

当我们调试到某一行,希望将某个对象保存到本地时,直接在console中输入 console.save(ObjName, FileName)即可,该对象即以json文本的形式存储到默认的下载目录中了。

0x02 前端调试时断点设置技巧
对爬虫工程师来说,网页中的静态内容都比较好获取,直接读取网页源码即可。而在动态网页中,一些内容是动态加载的,需要分析其数据来源并找到相应的Javascript代码。而在前端加载的js文件较多时,代码量非常庞大,逐行阅读既不现实也不必要,在这种情况下,如何快速定位到关键代码,断点的设置技巧就显得尤为重要。

简单的断点设置方法就不多说了,在Sources页面打开想调试的Javascript文件,在行号上点击一下就设置好了断点。这里主要介绍两种我常用的方法。

标签断点
先举一个简单的例子,假设查看网页源码时有这样一段代码

而在页面渲染完成后,通过右键审查元素时发现代码变成如下形式

keyinformation

其中keyinformation是我们需要采集的内容,这时即可采用标签断点的方式快速定位到相应的Javascript代码段,方法非常简单,在审查元素的选项卡最下方有一个断点选项,如图所示

标签断点三个选项

根据实际情况选择相应的断点,对刚才我们所举的例子,选择第一项即可。然后在网页上进行操作,当有Javascript代码尝试修改该标签及其子孙结点时就会断下,这样我们就定位到关键代码了。

事件断点
事件断点的类型就非常丰富了,基本你能想到的断点都包含在内,如下图所示。做前端开发的同学应该会比较熟悉这些功能。

事件断点截图

对于爬虫工程师而言,主要关注Script和XHR这两个选项下的事件就行了。XHR不用多说,即XMLHttpRequest,大家一般也比较关注它,很多关键数据都是通过它拿到的,与XHR相关的操作这里基本都囊括了。

重点看下Script选项下的事件,有一个断点叫Script First Statement,即在脚本第一次申明的时候断下来,通俗来说就是遇到

发表评论