后台，因为项目中最近发生了页面中的静态资源丢失。其中以图片居多，因为页面比较多，往往是客户发现图片少了，然后开始定位缺失的图片资源，然后进行补救。因此，我基于puppeteer写了一个简单的node.js脚本，用于抓取页面上的图片资源，用于排查问题。优点：可以通过配置配置要检查的页面的URL地址，按照顺序一一检查，错误的静态资源详情持久化。无需服务端支持，可在本地灵活配置使用。被动型不足的可以手动查看启动脚本，或者添加定时任务根据时间段进行查看。无法主动监控页面丢失的文件，无法在第一时间发现错误的静态资源。概念&流程目前项目中图片资源主要有两种使用方式：html的img标签和css文件的background-image，两种使用方式采用不同的策略：img标签的使用是基于单一的页面，爬取HTML并使用puppeteer的page.evaluate()方法匹配页面所有![]()
标签中的src属性写入数组。通过node.js的https模块循环访问抓包数组中的src。如果出现404，则表示缺少静态资源，将资源的详细信息写入错误图片log/*/ERRIMGFILE.js的log日志中。css文件也是利用HTML爬取页面的标签的rel属性写成一个数组，同样作为一个页面单元。（需要注意的是，一般来说，页面上的css引用都是通过标签引用的，反之则不一定。比如页面上的一些图标也是使用link标签引入的，所以我们需要执行抓取的链接标签过滤器）。根据当前项目的特点，css文件有一个版本是经过服务器压缩合并的，所以需要对这类样式文件进行拆分，使其成为一个单独的css文件，可以对外访问。这里我以汽车之家汽车商城主会场引用的服务器的合并css为例进行分析：//x.autoimg.cn/com/co.ashx?path=|mall|2015|pc|js|swiper|swiper-3.4.2.min-6af34.css,|mall|topic|2017|9|hbyy|pc|css|game-8a737.css,|mall|2015|pc|css|index-all-d010e.css分析一下，我们需要的单个css文件应该是//x.autoimg.cn/mall/2015/pc/js/swiper/swiper-3.4.2.min-6af34.css//x.autoimg形式的集合。cn/mall/2015/pc/css/index-all-d010e.css//x.autoimg.cn/mall/topic/2017/9/hbyy/pc/css/game-8a737.css根据目标，我们先分解合并后的css后半部分的co.ashx?path=得到3个css文件的字符串，字符串传递，拼接，内部都是用|分隔的路径，所以经过一些拆分和替换，并放将前面的域一起得到一组可以用于访问的css路径集合。当然除了服务器处理的css之外，页面上还有一些单独的引用，我们也将这些路径添加到上面处理过的css路径集合中。现在我们有了所有的css路径，我们开始逐个检查每个文件中使用的图片。通过puppeteer提供的方法page.goto('css文件地址')打开一个新页面，分析页面上的结构，抓取css的全部内容，匹配/\/\/.+?\.(jpg|png|gif)/g显示里面的所有图片。通过node.js的https模块循环访问数组中的src。如果出现404，说明静态资源缺失，资源详情写入log/*/ERRCSSSIMGFILE.js中错误图片的log日志。目录&文件log/*/*.js的作用是存放脚本产生的日志文件。文件名说明LOGFILE.js存放脚本执行的操作。包括：页面总共引用的img标签，页面引用的css文件，所有css文件引用的图片，每个css文件引用的图片路径。ERRIMGFILE.js存储了错误的html![]()
标签来导入资源。包含的字段有：错误资源个数；错误资源详细信息列表。ERRCSSIMGFILE.js存储被错误的css文件引用的图片资源。包含的字段有：错误资源个数；错误资源详细信息列表。config.json添加的故障排除任务页面。字段介绍taskAlias任务别名：可以输入中文作为索引快速查看log日志。taskName任务名称：中文不能输入。taskUrl任务地址：脚本执行的路径，爬虫从该地址开始爬取内容。config.js脚本的配置文件。该字段引入cdnPath静态资源存放的域名。cssPath保存在css文件中的域名，有约定。cssFilter合并的css参数主要用于匹配合并后的cssimgReg匹配图片资源规则。CDN迁移需要同步修改cdnPath、cssPath等字段。模拟测试文件是基于tms搭建的测试地址的html页面。如果html中引用了多张图片，错误的img资源一定不少于2个。如果引用多个css文件，则需要一个合并的css文件。并且每个合并后的文件都需要有多个errorimg资源。TODOS通过配置文件统一检查添加的页面地址。解析新的CDN路径，移植到新的CDN环境。添加一些更友好的用户体验。参考资料puppeteer中文文档源码GitHub:puppeteer-demo
