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

2017.07.19

Web系统开发

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 的开发者工具。

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（这对于使用会话监控网站可能很有用）、清除缓存以及重写用户代理。
创建一个 UI 来显示使用 D3.js 之类的工具获取的数据也很有趣！