chrome插件网页抓取(Chrome开发工具中的逻辑代码进行拆解和分析和经验技巧)

　　chrome插件网页抓取(Chrome开发工具中的逻辑代码进行拆解和分析和经验技巧)

　　简介本文章主要介绍使用Chrome和插件抓取数据（示例代码）及相关经验技巧，文章约3442字，258页浏览量，2个赞，值得参考！

　　工具Chrome

　　Chrome浏览器是目前最流行的浏览器。它与大多数 w3c 标准和 ecma 标准兼容。为前端工程师在开发过程中提供了devtools、插件等工具，使用起来非常方便。在爬取数据的过程中，应该使用开发工具中最常用的Element、Source和Network函数来分别查看DOM结构、源码和网络请求。同时，还有很多基于 Chrome 浏览器的插件，为我们提供了浏览器级别的数据处理能力。

　　篡改猴子

　　Tampermonkey 是一个 chrome 插件、一个免费的浏览器扩展和最流行的用户脚本管理器。简单来说就是可以指定在进入某些页面时调用指定的JS代码，这样我们就可以将页面中的一些数据整理出来保存到localStorage或者indexeddb中。

　　再资源

　　ReRes是一个chrome插件，支持将一个在线的JS重定向到另一个JS，即将原页面中的JS替换成另一个JS。在这个新的 JS 中，我们可以修改一部分逻辑来满足我们的需求。

　　爬取过程

　　如上图所示，抓取分为三个步骤，分别是观察、解构和抓取。

　　观察到的

　　首先是观察。我们需要通过 devtools 中的 Elements 和 Network 选项卡阅读要抓取的页面。数据可能在 DOM 元素中，也可能直接通过 Ajax 接口返回。简而言之，找到最合适的地方来获取数据。.

　　当然，如果是ajax接口返回的数据，就很容易抓取了，但是有时候我们可能会遇到比较复杂的网站，它对数据进行加密，返回一个乱码，这个时候就需要剖析一下了代码。

　　解剖学

　　也就是对页面中的逻辑代码进行反汇编分析，找到关键代码供我使用。通常，网站 的 JS 代码是经过混淆和压缩的。我们可以使用 Chrome 开发工具中的 Source 工具对代码进行格式化，使其更易于阅读。然后简单介绍一下我的找关键码的方法：

　　元素标签搜索方法 元素事件搜索方法 Ajax 接口名称搜索方法

　　当然，在这里查找关键字的时候，需要用到Chrome开发者工具的搜索功能。

　　元素标签搜索

　　当我们找到一个关键的 DOM 元素时，你认为页面 JS 会对这个元素进行操作，比如取值、删除等，你可以通过这个元素自带的 id 或 class 进行搜索。通常，这些 id 和 class 名称不会混淆，可以直接找到。

　　元素事件搜索

　　当我们认为某个元素绑定了点击或其他事件，并且意义重大时，我们可以在Elements面板的Event Listeners中找到最有可能发生的事件，然后查看对应的JS代码。

　　当然，如果直接在 Elements 面板中的 DOM 结构上标注方法名，如下图，可以直接全局搜索【CheckInput】。

　　Ajax接口名称搜索方法

　　当我们找到想要的接口时，可以在Network中找到该接口的名称，直接全局Seach，或者通过Initiator中JS调用的栈信息找到具体的调用代码。

　　通过这三个步骤，我们基本上已经能够找到我们需要的业务代码了，剩下的就是在此基础上继续寻找加解密的逻辑，也是通过中断点，然后在里面寻找函数调用Source面板栈中的Callbacks，然后找到其他逻辑。

　　抓住

　　抓取数据无非就是以自动化的方式提取数据并将其保存到指定位置。

　　在这里，我们将依赖我们的两个插件 TamperMonkey 和 ReRes。我一般是把key JS保存在本地进行修改，然后用ReRes把网上的JS映射到本地的JS，然后就可以为所欲为了，比如用封装好的解密函数解密数据，然后把数据保存到索引数据库。

　　TamperMonkey 主要用于定义一些全局变量并启动爬取过程，如遍历 DOM 节点、模拟点击事件、记录爬取数据的位置等。

　　总结

　　依靠Chrome浏览器抓取数据只是一种方便快捷的抓取数据的方式。当然不是很实用，因为Chrome不能直接操作数据库。我们的数据仍然缓存在浏览器中，导出需要一些时间。本文只讲了部分抓取数据的思路。具体可以使用Puppeteer、Phantomjs等工具来抓取。