セットアップ - Chrome

# はじめに

[**セットアップ シリーズ**](https://qiita.com/yokarikeri/items/a4e41a36c610bb1c798b)、Chrome 編。

主に以下について。

- ショートカット
- 拡張機能
- デベロッパーツール

## Windows ユーザーは Edge に乗り換える？

[Windows 10 バージョン 20H2](https://docs.microsoft.com/ja-jp/windows/whats-new/whats-new-windows-10-version-20h2) (Windows 10 October 2020 Update) から「**Chromium ベース Edge**」が Windows のデフォルト ブラウザーとなった。
とはいえ、**今更 Google アカウントから離れるのは面倒**なので、やはり **Chrome** を使うことに。

## Chrome 拡張機能でカバーしないこと

OS やブラウザの標準機能でカバーできる用途では、Chrome 拡張機能をインストールしない。

- **カラーピッカー:**
    - Windows なら「[Microsoft PowerToys](https://github.com/microsoft/PowerToys/releases)」の `Windows` + `Shift` + `C` キー
    - macOS 標準: `Control` + `スペース` キー ➡ `d` と入力して「DigitalColor Meter」を検索 ➡ `Shift` + `⌘` + `C` キー
- **スクリーンショット:**
    - Windows 10 標準: `Windows` + `Shift` + `s` キー（「切り取り & スケッチ」アプリが起動する）
    - macOS 標準: `Shift` + `⌘` + `4`
    - 撮影するページサイズを調整したい場合は、Chrome の「デベロッパー ツール」（後述）が便利。
- **絵文字を探す:**
    - Windows 10 標準: `Windows` + `.` キー
    - macOS 標準: `Control` + `⌘` + `スペース` キー
- **検索クエリを使う:**
    - [Simple = Select + Search](https://chrome.google.com/webstore/detail/simple-select-%20-search/aagminaekdpcfimcbhknlgjmpnnnmooo) などの拡張機能を使わずとも、Chrome の「検索エンジン」の設定（後述）で事足りる。
- **QR コードを生成する:**
    - Chrome の[標準機能](https://support.google.com/chrome/answer/9979877?co=GENIE.Platform%3DDesktop&hl=ja&oco=0)に搭載された。
- **タブをグループ化する:**
    - Chrome の[標準機能](https://support.google.com/chrome/answer/2391819?hl=ja)に搭載された。

# 🔧 ショートカット

[Chrome 公式のショートカット一覧](https://support.google.com/chrome/answer/157179?co=GENIE.Platform%3DDesktop&hl=ja) は、少々分かり辛いので整理してみる。

**注意:**

- Windows の `Ctrl` キーと macOS の `command`（`⌘`）キーは、基本的にどちらも **`Ctrl` キー**と表記する。
- Windows の `Alt` キーと macOS の `option`（`⌥`）キーは、基本的にどちらも **`Alt` キー**と表記する。
- MacBook の `Delete` キーは **`Backspace` キー**と表記し、`fn` + `Delete` キーは **`Delete` キー**と表記する。

**参考:**

- [Chrome のキーボード ショートカット - パソコン - Google Chrome ヘルプ](https://support.google.com/chrome/answer/157179?co=GENIE.Platform=Desktop&hl=ja)
- [Chrome DevTools - Chrome Developers](https://developer.chrome.com/docs/devtools/)
- [Windows のキーボード ショートカット](https://support.microsoft.com/ja-jp/windows/windows-%E3%81%AE%E3%82%AD%E3%83%BC%E3%83%9C%E3%83%BC%E3%83%89-%E3%82%B7%E3%83%A7%E3%83%BC%E3%83%88%E3%82%AB%E3%83%83%E3%83%88-dcc61a57-8ff0-cffe-9796-cb9706c75eec)
- [Mac のキーボードショートカット - Apple サポート](https://support.apple.com/ja-jp/HT201236)

## 🔖 Chrome の主なショートカット

- 凡例
    - 🔥 ... Windows / macOS 間で、同じショートカットが使えない。

| 区分         | 機能                                                                                                               | ショートカット                                                                                  |
| ------------ | ------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------- |
| ウィンドウ   | 新しいウィンドウを開く                                                                                             | `Ctrl` + `N`                                                                                    |
| ウィンドウ   | 新しいウィンドウをシークレットモードで開く                                                                         | `Ctrl` + `Shift` + `N`                                                                          |
| タブ         | 新しいタブを開く                                                                                                   | `Ctrl` + `T`                                                                                    |
| タブ         | タブを閉じる                                                                                                       | `Ctrl` + `W`                                                                                    |
| タブ         | 閉じるたタブを開く                                                                                                 | `Ctrl` + `Shift` + `T`                                                                          |
| タブ         | 次のタブへ（🔥）                                                                                                   | `Ctrl` + `PgDn`（Windows）<br>`⌘` + `⌥` + `→`（macOS）                                          |
| タブ         | 前のタブへ（🔥）                                                                                                   | `Ctrl` + `PgUp`（Windows）<br>`⌘` + `⌥` + `←`（macOS）                                          |
| タブ         | 全画面モードの切り替え（🔥）                                                                                       | `F11`（Windows）<br>`⌘` + `Shift` + `F`（macOS）                                                |
| ズーム       | ページを拡大                                                                                                       | `Ctrl` + `+`<br>※ Windows のみ `Ctrl` + `;` も利用可                                            |
| ズーム       | ページを縮小                                                                                                       | `Ctrl` + `-`                                                                                    |
| ズーム       | ページの拡大/縮小をリセット                                                                                        | `Ctrl` + `0`                                                                                    |
| ページ内移動 | ページの先頭へ                                                                                                     | `Home`                                                                                          |
| ページ内移動 | ページの末尾へ                                                                                                     | `End`                                                                                           |
| ページ内移動 | 1 画面ずつ下にスクロール                                                                                           | `PgDn` or `Space`                                                                               |
| ページ内移動 | 1 画面ずつ上にスクロール                                                                                           | `PgUp` or `Shift` + `Space`                                                                     |
| ページ内移動 | 水平スクロール                                                                                                     | `Shift` + マウスホイール                                                                        |
| テキスト移動 | 次の単語へ（🔥）                                                                                                   | `Ctrl` + `→`（Windows）<br>`⌥` + `→`（macOS）                                                   |
| テキスト移動 | 前の単語へ（🔥）                                                                                                   | `Ctrl` + `←`（Windows）<br>`⌥` + `←`（macOS）                                                   |
| テキスト移動 | 前の単語を削除（🔥）                                                                                               | `Ctrl` + `Backspace`（Windows）<br>`⌥` + `Backspace`（macOS）                                   |
| アドレスバー | アドレスバーに移動する                                                                                             | `Ctrl` + `L`                                                                                    |
| アドレスバー | 自動補完の候補を削除する                                                                                           | 下矢印キーで選択して `Shift` + `Delete`<br>※アドレスバーと Web ページ内のフォームの両方で使える |
| リロード     | ページを再読み込みする                                                                                             | `Ctrl` + `R`<br>※ Windows のみ `F5` キーも利用可                                                |
| リロード     | キャッシュを無視してページを再読み込み                                                                             | `Ctrl` + `Shift` + `R`<br>※ Windows のみ `Shift` + `F5` キーも利用可                            |
| リロード     | ページの再読み込みを中止する                                                                                       | Esc                                                                                             |
| ページ内検索 | 検索バーを開く                                                                                                     | `Ctrl` + `F`                                                                                    |
| ページ内検索 | 次の検索結果へ                                                                                                     | `Ctrl` + `G`                                                                                    |
| ページ内検索 | 前の検索結果へ                                                                                                     | `Ctrl` + `Shift` + `G`                                                                          |
| 機能         | 履歴ページを開く（🔥）                                                                                             | `Ctrl` + `H`（Windows）<br>`⌘` + `Y`（macOS）                                                   |
| 機能         | ブックマーク バー表示を切り替え                                                                                    | `Ctrl` + `Shift` + `B`                                                                          |
| 機能         | ブックマーク マネージャーを開く（🔥）                                                                              | `Ctrl` + `Shift` + `O`（Windows）<br>`⌘` + `⌥` + `B`（macOS）                                   |
| デベロッパー | デベロッパー ツール表示を切り替え（🔥）<br>（最後に閉じたパネルを開き直す）                                        | `Ctrl` + `Shift` + `I` or `F12`（Windows）<br>`⌘` + `⌥` + `I`（macOS）                          |
| デベロッパー | [Element パネル](https://developer.chrome.com/docs/devtools/css/)を開く<br>（HTML と CSS のためのパネル）          | `Ctrl` + `Shift` + `C`                                                                          |
| デベロッパー | [Console パネル](https://developer.chrome.com/docs/devtools/console/)を開く（🔥）<br>（JavaScript のためのパネル） | `Ctrl` + `Shift` + `J`（Windows）<br>`⌘` + `⌥` + `J`（macOS）                                   |

## 🔖 Chrome の未使用のショートカットキー

拡張機能に新しいショートカットを割り当てたい時のために。

**設定方法:**

アドレスバーに `chrome://extensions/shortcuts` と入力すると、拡張機能のショートカット設定画面が開く。

**注意:**

- Windows と macOS 共通で利用できるキーのみを記載する。
- 拡張機能のショートカットに割り当てできないキーは記載しない。
- インストール済みのソフトウェアや OS の設定によっては、以下のショートカットも使えない可能性がある。

### C- 系

`Ctrl` + `何か` の組み合わせで、利用できるのは 1 種類のみ。

- `Ctrl` + `.`

### A- 系

`Alt` + `何か` の組み合わせは、ほとんど利用できる。

数字と英字キーなら、`D`、`E`、`F` **以外**は利用可。

### C-S- 系

`Ctrl` + `Shift` の組み合わせで、利用できるのは以下のとおり。

- `1`
- `2`
- `7`
- `8`
- `9`
- `0`
- `W`
- `E`
- `Y`
- `U`
- `P`
- `A`
- `S`
- `K`
- `L`
- `Z`
- `X`
- `V`
- `,`
- `.`
- `Home`
- `End`
- `PgUp`
- `PgDn`

### C-S-A- 系

`Ctrl` + `Shift` + `Alt` + `何か` の組み合わせは、何でも利用可。

### S-A- 系

`Shift` + `Alt` + `何か` の組み合わせは、何でも利用可。

### C-A- 系

`Ctrl` + `Alt` + `何か` の組み合わせは、**利用できない**。

# 🔧 インストール

<https://www.google.com/intl/ja_jp/chrome/> からインストーラーを入手してインストール。
つまずく点はない。

# 🔧 初期設定

## 🔖 本体設定

Chrome の設定を開くには、Windows なら「`Alt` + `f` キー ➡ `s` キー」、macOS なら「`⌘` + `,` キー」。

- 既定のブラウザに設定。
- Google アカウントと同期。
- `固定幅フォント` のデフォルトが「MS ゴシック」なので、「Source Han Code JP」などに変更。
- 起動時: `前回開いていたページを開く`
- ダウンロード先をデスクトップに。
    - デスクトップにすると、不要なファイルを削除漏れを解消できて好み。デスクトップには、`Windows` + `D` キーなどで、アクセスしやすいのも良い。
    - （Windows のみ）タスクバーを右クリック > `ツールバー` > `デスクトップ` を有効化するのと併用することで、デスクトップから Chrome へののドラッグ & ドロップが楽に。

## 🔖 新しいタブの設定

- 新しいタブを開いた画面の中央付近にある `+` ボタンからショートカット登録しておくと便利。
    - 特にブックマークバーに置くほどでもなく、アドレスバーの補完から検索し辛いページ（ドメイン名が覚えにくいページなど）を登録するのがオススメ。
- 新しいタブ > 画面右下の `✎`（鉛筆ボタン） > 背景 > 風景 > 毎日更新する

## 🔖 Google 検索のテクニック

Google 検索のテクニックを紹介する。

- **開いている Web サイト内で検索する:**
    - アドレスバー（`Windows` + `L` キー）で、先頭に `site:` と入力して、末尾にスペースを開けて「検索したいキーワード」を入力して `Enter` キー。
    - e.g. `site: https://www.postgresql.jp/document/10/html/ db_dump` ... PostgreSQL 10 のリファレンスで `db_dump` について調べる。
- **検索キーワードを工夫する:**
    - **AND 検索:**
        - キーワードをスペースで区切る。
        - e.g. `A B`
    - **OR 検索:**
        - キーワードを `OR` で区切る。
        - e.g. `A OR B`
    - **NOT 検索:**
        - キーワードの先頭に `-` を付ける。
        - e.g. `A -B`
    - **完全一致検索:**
        - キーワードを `"` で囲む。ワイルドカードを使うには `*` を使う。
        - e.g. `A "B * D"`
    - **その他:**
        - cf. [ウェブ検索の精度を高める - Google 検索 ヘルプ](https://support.google.com/websearch/answer/2466433)
- **タブを「固定」or「グループ化」する:**
    - タブを右クリックして `固定` or `タブを新しいグループに追加` に選択。

## 🔖 検索エンジンの便利な使い方

Chrome の設定 > `検索エンジンの管理` で、任意の文字列を含む URL へアクセスできる。

たとえば、以下のように検索エンジンを追加した場合、

- 検索エンジン: `Wikipedia`
- キーワード: `wiki`
- URL: `http://ja.wikipedia.org/wiki/Special:Search?search=%s`

以下の手順で、素早く **Wikipedia** を検索できる。

1. `Windows` + `L` キーなどで、アドレバスバーにフォーカス
2. キーワードの `wiki` と入力
3. `Tab` キーを入力  
   アドレバスバーに `Wikipedia を検索` と表示される
4. 検索キーワードを入力して `Enter` キー

**Redmine** や **Backlog** など、普段使う Web サービスの検索 URL などを登録しておくと便利。

個人 PC だと、Amazon の価格推移が見れる **Keepa** を登録しておくのが便利。
`https://keepa.com/#!search/5-%s` で登録して、Amazon の商品ページ上の「登録情報」に記載された「**ASIN**」（Amazon Standard Identification Number: 商品のバーコードのようなもの）で検索すると、価格推移を確認できる。

## 🔖 拡張機能を無効化する

- 拡張機能はアドレスバーに `chrome://extensions/` と入力した画面で、**有効/無効を操作**できる。
    - この画面で拡張機能ごとの `詳細` ボタン > `サイトへのアクセス` を `クリックされた場合のみ` にすることで、一時的に無効化した状態にできる。
    - この状態の拡張機能を**一時的に有効化**するには `chrome://extensions/shortcuts` で、拡張機能の**有効化ショートカット**を使うのが便利。**常用するには邪魔な拡張機能でも、必要な時にだけ起動させることができる**。
    - 割り当てるキーは「`Alt` キー + `D`、`E`、`F` 以外の**英数字キー**」が、他のキーバインドと競合しにくいのでオススメ。

# 👑 拡張機能: [Google 翻訳](https://chrome.google.com/webstore/detail/google-translate/aapbdbdomjkkjkaonfhkkikfgjllcleb)

英語が読めないので。

# 👑 拡張機能: [Language Learning with Youtube BETA](https://chrome.google.com/webstore/detail/language-learning-with-yo/jkhhdcaafjabenpmpcpgdjiffdpmmcjb)

YouTube の英語字幕を機械翻訳してくれる。
「英語字幕」と「日本語字幕」を同時表示したり、動画の「全字幕」を表示したりと非常に便利。

なお、単語をクリックすると「発音」と「意味」を確認できる。

YouTube 用は BETA 版だが、同じ開発者による [Netflix 版](https://chrome.google.com/webstore/detail/language-learning-with-ne/hoombieeljmmljlkjmnheibnpciblicm)は正式版らしく、こちらの有償版ではさらに字幕翻訳の追加オプションや、単語やフレーズの保存機能（字幕に現れるとハイライトされる）が使えるようだ。

**設定:**

- `拡張機能を管理` > `以下のサイトで自動的にアクセスを許可する` を無効化。
    - 普段は邪魔になるのでオフに。反映させるには、ページの更新が必要になるかも。

**使い方:**

- [公式リファレンス](https://languagelearningwithnetflix.com/youtube_instructions.html)参照

# 👑 拡張機能: [Mouse Dictionary](https://chrome.google.com/webstore/detail/mouse-dictionary/dnclbikcihnpjohihfcmmldgkjnebgnj)

> cf. [Chrome 拡張の高速な英語辞書ツールをつくりました\(Mouse Dictionary\) \- Qiita](https://qiita.com/wtetsu/items/c43232c6c44918e977c9)

マウスオーバーした英字テキストの「英和辞典」を表示する。

Booth で販売されている「**[英辞郎](https://booth.pm/ja/items/777563)**」を設定することで、辞書を拡張できる。

# 👑 拡張機能: [Create Link](https://chrome.google.com/webstore/detail/create-link/gcmghdmnkfdbncmnmlkkglmnnhagajbm)

「Web ページのタイトル」or「選択中のテキスト」と「URL」をコピーする。
記事を書く時に便利。

**設定:**

- `markdown` のフォーマットを `[%text_md%](%url%)` > `[%title%](%url%)` に変更する。
    - 「ページタイトル」の代わりに「うっかり選択しているテキスト」がコピーされてしまうことを防ぐ。
- ショートカットを有効化するため、`Default is currently` を **`markdown`** にして、`Configure shortcut` > `Current tab in default format` で **`Ctrl + ピリオド`** に。

**使い方:**

- Chrome の画面右上から、本拡張機能のアイコンをクリック。
- `Ctrl + ピリオド` でコピー。（上記設定をしている場合）

# 👑 拡張機能: [Video Speed Controller](https://chrome.google.com/webstore/detail/video-speed-controller/nffaoalbilbmmfgbnbgppjihopabppdk)

HTML5 オーディオ/ビデオの再生速度の変更機能を呼び出す。
倍速再生は重宝する。

**設定:**

- `拡張機能を管理` > `サイトへのアクセス: クリックされた場合のみ` に設定。
    - 普段は邪魔になるのでオフに。

# 👑 拡張機能: [Picture-in-Picture Extension (by Google)](https://chrome.google.com/webstore/detail/picture-in-picture-extens/hkgfoiooedgoejojocmhlaklaeopbecg)

Edge ではデフォルトで搭載されている「動画のピクチャ・イン・ピクチャ機能」を Chrome でも使えるように。

**使い方:**

- Chrome の画面右上から、本拡張機能のアイコンをクリック。
- Windows だと `Alt + P`、macOS では `⌥ + P`でトグルする。

# 👑 拡張機能: [Session Buddy](https://chrome.google.com/webstore/detail/session-buddy/edacconmaakjimmfgnblocblbcdcpbko)

Edge の「コレクション機能」を見て、Chrome 用のそれっぽい機能を探して見つけた。

ウィンドウ毎に「タブの状態」に名前をつけてローカル上に記録できる。（外部サービスの登録不要なのは良い）
記録した内容同士を**マージ**したり、**重複を除外**したり、記録した内容を**後から編集**したりもできる。

多少慣れがいる UI だが、必要十分な機能を持つ。

# 👑 拡張機能: [はてなブックマーク](https://chrome.google.com/webstore/detail/%E3%81%AF%E3%81%A6%E3%81%AA%E3%83%96%E3%83%83%E3%82%AF%E3%83%9E%E3%83%BC%E3%82%AF/dnlfpnhinnjdgmjfpccajboogcjocdla)

Google の検索結果で、そのページの価値が高く評価されているかの指標のひとつになって便利。

# 👑 拡張機能: [uBlock Origin](https://chrome.google.com/webstore/detail/ublock-origin/cjpalhdlnbpafiamejdnhcphjbkeiagm?hl=ja)

広告ブロッカー。

**設定:**

- `拡張機能を管理` > `サイトへのアクセス: クリックされた場合のみ` に設定。
    - Web ページの収益の広告の占める割合は大きいわけだし、基本的に広告ブロックはオフで良い派。
        とはいえ、無料版 WinSCP のダウロードページでダウンロードボタンを探す時とか面倒な時はあるので、必要に応じて使う。

**補足:**

- 「[Adblock Plus の Chrome ウェブストア上の偽物問題](https://security.srad.jp/story/17/10/11/055212/)」や「[控えめな広告の問題](https://en.wikipedia.org/wiki/Adblock_Plus#Controversies)」など、ややこしい広告ブロッカー界隈。
- 元祖の **Adblock** はもうないし、**Adblock Plus** は控えめな広告さえ許容できれば？、[**AdBlock** は買収問題](https://en.wikipedia.org/wiki/AdBlock#Sales_and_acceptable_ads) があったり、[**uBlock** は uBlock Origin に分裂したり AdBlock に買収されたり](https://en.wikipedia.org/wiki/UBlock_Origin)、結局、純粋な広告ブロッカーを求めれば **uBlock Origin** かなあ、といったところ。

> cf. [PC ブラウザ向け広告ブロッカーの歴史がややこしい - toyfish.blog](https://www.toyfish.blog/entry/2018/10/08/052056)

# 👑 その他: Web フロントエンド開発向け Chrome 拡張機能

- 👑 [Wappalyzer](https://chrome.google.com/webstore/detail/wappalyzer/gppongmhjkpfnbhagpmjfkannfbllamg)
    - Web ページの技術スタックを確認
- 👑 [WhatFont](https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm/related)
    - Web ページ上で適用されているフォントを確認
- 👑 [Google Analytics オプトアウト アドオン (by Google)](https://chrome.google.com/webstore/detail/google-analytics-opt-out/fllaojicojecljbmefodhfapmkghcbnh)
    - Google アナリティクスで、自分のサイトに自分をユーザーとしてカウントさせないように
- 👑 [JSON Formatter](https://chrome.google.com/webstore/detail/json-formatter/bcjindcccaagfpapjjmafapmmgkkhgoa)
    - JSON フォーマッター。類似の拡張機能と比べてシンプル

# 🔧 デベロッパーツール

> cf. [Chrome DevTools - Chrome Developers](https://developer.chrome.com/docs/devtools/)

デベロッパーツール（DevTools）は、Web 開発ではかかせない。
非常に高機能なので、ここでは一部の機能だけ紹介する。

残念ながら Chrome の[公式リファレンス](https://developer.chrome.com/docs/devtools/)に日本語がないので、何も把握できていない状態だと少々ハードルが高い。
（近い内に[日本語化される予定](https://www.publickey1.jp/blog/20/edgedevtoolschromium.html)はあるらしい。）

邪道ながら、**Edge**（Chromium 版）なら開発者ツール（DevTools）の[日本語リファレンス（機械翻訳を含む）](https://docs.microsoft.com/ja-jp/microsoft-edge/devtools-guide-chromium/)があるので、入門の役に立つはずだ。

また、ほとんど機能の変わらない **Firefox** の開発ツール（Developer Tools）にも[日本語リファレンス](https://developer.mozilla.org/ja/docs/Tools)がある。
Chrome とは少しだけクセが異なるが、一長一短なので、一度覗いてみるのも面白い。

## 🔖 スクリーンショットを撮影する

> cf. [Simulate mobile devices with Device Mode - Chrome Developers](https://developer.chrome.com/docs/devtools/device-mode/)
> cf. [Microsoft Edge DevTools でモバイル デバイスをエミュレートする - Microsoft Edge Development | Microsoft Docs](https://docs.microsoft.com/ja-jp/microsoft-edge/devtools-guide-chromium/device-mode/)
> cf. [レスポンシブデザインモード - 開発ツール | MDN](https://developer.mozilla.org/ja/docs/Tools/Responsive_Design_Mode)

特定の画面サイズに変更する手順は以下のとおり。

- 「デベロッパー ツール」(`Ctrl` + `Shift` + `C` キー)
    -> device toolbar を開く (`Ctrl` + `Shift` + `m` キー)
    -> ページ左上のプルダウンメニュー（[Device リスト](https://developers.google.com/web/tools/chrome-devtools/device-mode?hl=ja#device)）で、撮影したい画面サイズを指定する。
- device toolbar を切り替えるには、左上の「スマホのアイコン」をクリックすることもで可能。
- [Device リスト](https://developers.google.com/web/tools/chrome-devtools/device-mode?hl=ja#device)に、XGA (1024x768px) を追加しておくと、マニュアル作成などのスクリーンショットに便利。

スクリーンショットの撮影方法は 3 種類ある。

- ➊「デベロッパー ツール」(`Ctrl` + `Shift` + `C` キー)
    -> device toolbar を開く (`Ctrl` + `Shift` + `m` キー)
    -> More options（device toolbar 右端のボタン）
    -> `Capture screenshot` or `Capture full size screenshot`
- ➋「デベロッパー ツール」(`Ctrl` + `Shift` + `C` キー)
    -> device toolbar を開く (`Ctrl` + `Shift` + `m` キー)
    -> コマンドパレット (`Ctrl` + `Shift` + `p` キー) で `capture` と入力
    -> 以下を選択
    - `Capture area screenshot`: ページの指定範囲を撮影
    - `Capture full size screenshot`: ページ全体を撮影
    - `Capture node screenshot`: 選択した node（HTML タグ）を撮影、例えばボタンのみなど
    - `Capture screenshot`: ブラウザで表示している範囲を撮影
- ➌ Web ページ上の撮影したい要素を右クリック > `検証`
    -> device toolbar を開く (`Ctrl` + `Shift` + `m` キー)
    -> 画面上部のタブで をクリック
    -> `Element` パネルで、撮影したい node（HTML のタグ）を探して右クリック > `Capture node screenshot`

## 🔖 DOM（HTML）を変更する

> cf. [Get Started With Viewing And Changing The DOM - Chrome Developers](https://developer.chrome.com/docs/devtools/dom/)
> cf. [初級者向け DevTools: HTML と DOM の使用を開始する - Microsoft Edge Development | Microsoft Docs](https://docs.microsoft.com/ja-jp/microsoft-edge/devtools-guide-chromium/beginners/html)
> cf. [HTML の調査と編集 - 開発ツール | MDN](https://developer.mozilla.org/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML)

node（HTML のタグ）を変更したりする方法は、上記のリファレンス参照。

## 🔖 CSS を変更する

> cf. [View and change CSS - Chrome Developers](https://developer.chrome.com/docs/devtools/css/)
> cf. [初級者向け DevTools: CSS の使用を開始する - Microsoft Edge Development | Microsoft Docs](https://docs.microsoft.com/ja-jp/microsoft-edge/devtools-guide-chromium/beginners/css)
> cf. [CCS リファレンス - Microsoft Edge Development | Microsoft Docs](https://docs.microsoft.com/ja-jp/microsoft-edge/devtools-guide-chromium/css/reference)
> cf. [CSS の調査と編集 - 開発ツール | MDN](https://developer.mozilla.org/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS)

CSS の調整をする方法は、上記リファレンス参照。

## 🔖 コンソールを使う

> cf. [Console overview - Chrome Developers](https://developer.chrome.com/docs/devtools/console/)
> cf. [コンソールの使用 - Microsoft Edge Development | Microsoft Docs](https://docs.microsoft.com/ja-jp/microsoft-edge/devtools-guide-chromium/console/)
> cf. [Web コンソール - 開発ツール | MDN](https://developer.mozilla.org/ja/docs/Tools/Web_Console)

各種警告やエラーの確認や、JavaScript を試す方法は、上記リファレンス参照。

## 🔖 JavaScript デバッガーを使う

> cf. [Debug JavaScript - Chrome Developers](https://developer.chrome.com/docs/devtools/javascript/)
> cf. [Microsoft Edge DevTools での JavaScript のデバッグの開始 - Microsoft Edge Development | Microsoft Docs](https://docs.microsoft.com/ja-jp/microsoft-edge/devtools-guide-chromium/javascript/)
> cf. [デバッガー機能の使用 - Microsoft Edge Development | Microsoft Docs](https://docs.microsoft.com/ja-jp/microsoft-edge/devtools-guide-chromium/javascript/reference)
> cf. [デバッガー - 開発ツール | MDN](https://developer.mozilla.org/ja/docs/Tools/Debugger)

JavaScript のデバッグ方法は、上記リファレンス参照。

## 🔖 通信を分析する

> cf. [Inspect network activity - Chrome Developers](https://developer.chrome.com/docs/devtools/network/)
> cf. [Microsoft Edge DevTools でネットワーク アクティビティを検査する - Microsoft Edge Development | Microsoft Docs](https://docs.microsoft.com/ja-jp/microsoft-edge/devtools-guide-chromium/network/#inspect-the-details-of-the-resource)
> cf. [ネットワーク分析リファレンス - Microsoft Edge Development | Microsoft Docs](https://docs.microsoft.com/ja-jp/microsoft-edge/devtools-guide-chromium/network/reference)
> cf. [ネットワークモニター - 開発ツール | MDN](https://developer.mozilla.org/ja/docs/Tools/Network_Monitor)

通信内容の分析方法は、上記リファレンス参照。