🦄

開発に役立つChromeの隠し機能

2022/05/11に公開・約2,900字

Chrome

tech

全然隠してるつもりはないと思うのですが、最近Chrome周りで「へ〜、そんなのあったんだ」となった事が多かったので記事にしてみました。

セットアップ

「へ〜、そんなのあったんだ」機能、devツールの右上歯車の隣にある三点リーダーメニューをクリックした後のMore toolsの中にありがち。

CSS Overview

閲覧しているサイトのフォントや色が一瞬で一覧で見れます。

👆 色

👆 フォント

👆 メディアクエリ

Recorder

最近リリースされた割と新しめの機能です。サイト上で操作を行い、その操作をjsonファイルやPuppeteer用のファイルとして出力できます。簡易的なE2Eはこれを駆使したり修正すれば十分かもですね。

右上のReplayを押せば同じ操作が自動で行われ、Measure performanceボタンを押せばデフォで表示されるPerformanceタブで操作のパフォーマンスを測れます。

👇 jsonファイルのダウンロードはこちらから。

👇 jsonはこんな感じ。

{
  "title": "ユーザーとして本を読める",
  "steps": [
    {
      "type": "setViewport",
      "width": 604,
      "height": 820,
      "deviceScaleFactor": 1,
      "isMobile": false,
      "hasTouch": false,
      "isLandscape": false
    },
    {
      "type": "navigate",
      "url": "https://zenn.dev/",
      "assertedEvents": [
        {
          "type": "navigation",
          "url": "https://zenn.dev/",
          "title": "Zenn｜エンジニアのための情報共有コミュニティ"
        }
      ]
    },
    {
      "type": "click",
      "selectors": [
        [
          "#__next > section.View_books__LQII_ > div > div.View_booksList__aZ_2_ > div > article:nth-child(9) > a.BookLink_link__n_GFH > div > div.BookCoverImage_container__e04p5.BookCoverImage_shadow__faWLm"
        ]
      ],
      "target": "main",
      "offsetX": 31,
      "offsetY": 136.4453125
    },
    {
      "type": "click",
      "selectors": [
        [
          "#__next > aside > div > div > div > a"
        ]
      ],
      "target": "main",
      "offsetX": 55.1015625,
      "offsetY": 11.640625
    }
  ]
}