Puppeteer 调试线上页面
本文主要是讲述Puppeteer拦截请求以及其应用场景，如果对Puppeteer基本概念不熟悉，请参考前一篇文章Puppeteer 基本概念介绍。
说明
由于 Puppeteer 可以在请求发出前进行拦截与替换，所以很方便地在本地开发解决线上Bug以及新需求。这样可以减少无谓的提交同时真实地检验其在线上环境中的效果。
应用场景
- 需要对线上页面进行调试修改
- 本地新功能开发需部署至测试环境查看效果
- 篡改目标页面
示例
这里以Baidu作为研究对象，假设我们想修改Baidu首页页面的背景色，但是不改变其它样式。
首先，我们观察一下Baidu首页所用到的CSS文件。打开Baidu页面，通过Chrome调试面板可以看到，有一个CSS的请求soutu.css。
我们可以拦截这个CSS请求，替换成我们想要的那个CSS文件。
- 将
soutu.css下载下来，保存到本地 - 修改
soutu.css，添加一行html,body{background-color: red} - 编写添加puppter库的JS文件，代码如下
const puppeteer = require('puppeteer')
const fs = require('fs')
const util = require('util')
const readFile = util.promisify(fs.readFile)
(async function start() {
const browser = await puppeteer.launch({
args: ['--disable-infobars', '--no-sandbox', '--disable-setuid-sandbox'],
// 因为我们需要直接看到UI效果，所以这里不能使用headless模式
headless: false,
// 也可以直接使用本地Chrome查看效果，不使用Puppeteer自带的Chromium浏览器
//executablePath: '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
})
let page = await browser.newPage()
// 读写本地的CSS文件
let customResponse = await readFile('./soutu.css')
try {
await page.setViewport({width: 1280, height: 620})
// 设置拦截请求
await page.setRequestInterception(true)
page.on('request', req => {
let addr = req.url()
// 根据URL拦截，这里拦截所有以CSS结尾的文件，可以自由修改
if (addr.endsWith('css')) {
req.respond({
status: 200,
contentType: 'text/css',
body: customResponse
})
} else {
// 其它请求放行
req.continue()
}
})
// 加载页面
await page.goto('https://www.baidu.com/', {waitUntil: 'domcontentloaded'})
} catch (err) {
console.error('Launch:', err.toString())
}
})()
安装完puppeteer环境后，就可以直接运行了。可以看到，首页背景色已变成红色。
总结
这里虽然以修改CSS文件为例，但是其实可以修改任何类型(如javascript, image)的请求。 在开发时使用puppeteer，就可以做到不用每改一步就需要提交一次代码来查看线上效果。