我尝试使用谷歌浏览器的无头模式，因为这样似乎可以详细监控外部外观。

2017.07.19

网络系统开发

1 准备
2 示例脚本
3 概括

你好。
我是Mandai，负责Wild 开发团队。

Beyond Co., Ltd. 是一家 MSP（托管服务提供商），因此我们根据客户订单执行各种监控任务。

其中包括外部监控，即以用户访问网站时相同（或类似）的方式访问网站，并检查页面是否正确显示。

有很多工具可以用来访问网站并检查数据是否正常收集，也可以使用 curl 等工具自行检查，但是通过这些方法，只有当收到各种监控工具警报的人访问网站时，才能发现原因。

这没问题，但这次我想探索一下，通过使用谷歌 Chrome 的无头模式，是否可以通过 DevTools 获取有关哪些内容检索时间过长的详细信息，从而在不查看网站的情况下确定原因。

准备

首先，请准备好所有测试所需的材料。
稍后还会提供一个示例，您可以复制粘贴使用。

Google Chrome

首先，安装以无头模式运行的 Google Chrome（版本 59 或更高版本）。
此版本的 Google Chrome 已经稳定，因此您可以像往常一样使用安装程序进行安装。
如果启用了自动更新，则更新应该已经安装完毕。

Node.js

这次我使用的是最新版本 8.0.0，但我认为即使是比较旧的版本也应该没问题。

以下模块通过 npm 安装：

chrome启动器
chrome远程接口

chrome-launcher 用于从 Node.js 启动 Google Chrome。chrome
-remote-interface 用于从 Node.js 访问 Google Chrome DevTools。

npm install chrome-launcher chrome-remote-interface

示例脚本包含一个进程，该进程会在每次启动应用程序时启动 Google Chrome，并在应用程序关闭时停止它。但是，如果您认真使用它，让 Google Chrome 保持运行可能也没问题（尽管内存使用量似乎会继续增加，因此可能需要定期重启）。

安装好这两个工具后，就可以开始使用了。

有关使用 Google Chrome 无头模式的基本信息，请参阅“
让我们体验一下 Google Chrome 59 中的无头模式（现已成为标准功能）”。有关从 Node.js 使用 Google Chrome 无头模式的基本信息，请参阅“从 Node.js 使用无头 Google Chrome

示例脚本

我们已准备了以下样品，请随意使用！

const ChromeLauncher = require('chrome-launcher'); const CDP = require('chrome-remote-interface'); function launchChrome(headless = true) { ChromeLauncher.launch({ port: 9222, autoSelectChrome: true, chromeFlags: [ '--disable-gpu', headless ? '--headless' : '', '--no-sandbox', ], }).then(launcher => { CDP(protocol => { setTimeout(() => { protocol.close(); launcher.kill(); process.exit(); }, 10000); const {Page, Network} = protocol; Promise.all([ Page.enable(), Network.enable(), ]).then(() => { Page.navigate({url : 'https://beyondjapan.com/blog/2017/07/headless-chrome-networks'}); Network.responseReceived(res => { console.log(r) }) }) }) }) } launchChrome();

它不会自动终止，所以我使用 setTimeout 在 10 秒后终止它。
如果一个页面上有很多通信，就会有很多输出，但如果你提取一个输出，它就会只输出一部分。

{ requestId: '30371.7375', frameId: '30371.1', loaderId: '30371.190', timestamp: 1197407.412915, type: 'Document', response: { url: 'https://beyondjapan.com/', status: 200, statusText: 'OK', headers: { Date: 'Tue, 18 Jul 2017 04:16:02 GMT', 'Transfer-Encoding': 'chunked', Server: 'nginx', Connection: 'keep-alive', Link: '<https://beyondjapan.com/cms-json/> ; rel="https://api.w.org/"', Vary: 'Accept-Encoding', 'Content-Type': 'text/html; charset=UTF-8' }, mimeType: 'text/html', connectionReused: false, connectionId: 5394, remoteIPAddress: '122.218.102.93', remotePort: 80, fromDiskCache: false, fromServiceWorker: false, encodedDataLength: 253, timing: { requestTime: 1197406.917743, proxyStart: -1, proxyEnd: -1, dnsStart: 0.944999977946281, dnsEnd: 2.30200006626546, connectStart: 2.30200006626546, connectEnd: 7.89500004611909, sslStart: -1, sslEnd: -1, workerStart: -1, workerReady: -1, sendStart: 7.98300001770258, sendEnd: 8.11700010672212, pushStart: 0, pushEnd: 0, receiveHeadersEnd: 494.426999939606 }, protocol: 'http/1.1', securityState: 'neutral' } }

开发者工具“网络”选项卡中的大部分信息似乎都可用。
所有时间戳似乎都以毫秒为单位。

它似乎还能做到 DevTools 能做的所有事情，例如删除或添加 cookie（这对于监控使用会话的网站可能很有用）、清除缓存、重写用户代理等等。
创建一个显示使用 D3.js 之类的工具获取的数据的 UI 也很有趣！