Chrome DevToolで表示時間を出力し、PowerShellで集計する

6276 ワード
ChromeDevTool PowerShell PowerShell テキストリンク

サイトの表示に時間がかかるが手元に測定できるツールがない。そんなときでもChromeがあれば右クリックして「検証」を選び、「Network」タブを開けば何に時間がかかっているか確認することができる。（下図の①）

これをHARという形式で保存することができる。先頭だけ抜粋すると、こんな感じのJSONファイルになっていてリクエストで送信したパラメータやCookie、時間など多くの情報が含まれている。

{
  "log": {
    "version": "1.2",
    "creator": {
      "name": "WebInspector",
      "version": "537.36"
    },
    "pages": [
      {
        "startedDateTime": "2021-05-21T14:42:21.112Z",
        "id": "page_1",
        "title": "https://www.google.co.jp/",
        "pageTimings": {
          "onContentLoad": 1403.932999999597,
          "onLoad": 3186.3129999983357
        }
      }
    ],
    "entries": [
      {

HARを読むのは大変なので、特定のフォルダにharファイルをまとめて、timeだけ抜き出して表示するPowerShellスクリプトを書いた。

$path = "C:\Users\user\Documents\powershell\*.har"

Get-ChildItem -Path $path | ForEach-Object {

    $json = Get-Content $_.FullName -Encoding UTF8 -Raw
    $temp = ConvertFrom-Json $json

    $startedDateTime =  $temp.log.pages[0].startedDateTime

    foreach($entry in $temp.log.entries ){
        if ( $entry.request.url -eq "https://www.google.co.jp/" ) {
            Write-Output("{0},{1}" -f $startedDateTime,$entry.time)
        }
    }

}

timeのほかに、timing.waitという値もある。Chromeのサイトを見るとTTFB(Time To First Byte)、つまりブラウザがリクエストを投げてからサーバが最初の１バイトを返すまでの時間のようだ。これも併せて記録すると有用だろう。