1 概述
在无头浏览器中开发应用时,界面状态通常不可见。这时我们可以通过debug模式启动无头浏览器[1],并新打开一个有界面浏览器来访问无头浏览器,这样就可以在有界面状态下看到无头浏览器的情况。
2 配置
- debug模式启动一个无头浏览器,并在9222端口监听
chrome
--remote-debugging-port=9222
--headless
--disable-gpu
- 打开有界面chrome浏览器并在地址栏输入
http://localhost:9222/json/list
所有无头浏览器可用的websocket连接都会显示在界面上
将devtoolsFrontendUrl标识的地址复制到地址栏
"devtoolsFrontendUrl": "/devtools/inspector.html?ws=localhost:9222/devtools/page/8FE35484E1E232BF281854A54BCA02B2",
"id": "8FE35484E1E232BF281854A54BCA02B2",
http://localhost:9222/devtools/inspector.html?ws=localhost:9222/devtools/page/8FE35484E1E232BF281854A54BCA02B2
我们将会在界面上看到无头浏览器的运行状态,这样就方便了我们调试与观察。从console中的输出也可以看到无头浏览器的userAgent。此外当在红色方框上的地址栏即是无头浏览器对应的地址栏,输入新地址可改变无头浏览器的页面。
此外也可以通过json/version[2]来查看版本信息。
http://localhost:9222/json/version
此外通过chrome://inspect/#devices可以查看无界面浏览器,
4 修改无头浏览器参数并观察结果
如果希望改变无头浏览器默认属性,那么可以在启动前注入脚本来实现。
可以通过插件形式,或第三方库来实现。第三方库可以参照参考资料1.
第三方库,例如通过puppeteer-api来修改页面。加载前修改属性,然后通过界面观察状态。
const puppeteer = require('puppeteer-core');
const util = require("./browserUtil");
(async () => {
const browser = await puppeteer.launch({
args: [
'--disable-setuid-sandbox',
'--no-sandbox',
'--ignore-certificate-errors',
'--enable-features=NetworkService',
'--window-size=1440,900',
'--remote-debugging=9222'
],
ignoreHTTPSErrors: true,
headless: true,
executablePath: "xxx",
});
let page = await browser.newPage();
await page.evaluateOnNewDocument(() => {
Object.defineProperty(navigator, 'languages', {
get: () => ["zh-CN", "zh", "en"]
});
Object.defineProperty(navigator, 'language', {
get: () => "zh-CN"
});
});
let gPromise = await page.goto("https://www.baidu.com/", {timeout:10000});
})();
5 通过远程机器调试无头浏览器
当打开chrome远程调试端口,默认会绑定localhost地址接收请求。这样可以在本地环境下通过界面观察无头浏览器的页面状态。但当chrome部署在单独的服务器上,默认仅打开远程调试端口,则会出现无法访问的情况,因此需要配置远程调试地址。这是通过–remote-debugging-address选项配置即可。
'--remote-debugging-address=ip'
const browser = await puppeteer.launch({
args: [
'--disable-setuid-sandbox',
'--no-sandbox',
'--proxy-server=proxyIp',
'--ignore-certificate-errors',
'--remote-debugging-address=ip',
'--remote-debugging-port=9222',
'--disable-web-security'
],
ignoreHTTPSErrors: true,
headless: true,
executablePath: "/Users/xx/xxx",
});
6 参考资料
[1]chrome无头浏览器,https://developers.google.com/web/updates/2017/04/headless-chrome
[2]chrome devtools协议,https://chromedevtools.github.io/devtools-protocol/
[3]手机浏览器远程调试工具weinre,https://github.com/nupthale/weinre
[4]远程调试地址配置,https://codereview.chromium.org/1920773003/#ps20001