フロントエンドコーディング時に便利なChrome拡張機能（随時更新）


## 更新履歴

* 2024/06/05
  * 「Classic Cache Killer」を、「[Cache Killer](#cache-killer)」に変更しました。
* 2024/03/08
  * 使用していないものを削除し、新たな拡張機能を追加しました。

## コーディングサポート

### ColumnCopy

https://chromewebstore.google.com/detail/columncopy/lapbbfoohlcmlbdaakldmmallcbcbpjb

:::note info
`<table>` タグ内のテキスト（列だけ、すべて）をコピーできます。
:::

|ショートカット|動作|
|:-|:-|
|`Alt` + `Click`|`<table>` 内のマウスカーソルが乗っている列のテキストをコピー|
|`Shift` + `Alt` + `Click`|`<table>` タグ内のすべてのテキストをコピー|

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/91dbc6a1-d0bb-801a-f85e-c303329c0b27.png" width="1280" height="800" decoding="async" loading="lazy">

### PxtoRem

https://chromewebstore.google.com/detail/pxtorem/ldbemkmafmibhpncgagpegmhbhpolnlp

:::note info
`px` で指定された数値を `rem` に変換できます。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/19f604b5-649c-d3ef-0f2c-65d924229ce0.png" width="1280" height="800" alt="PxtoRem" decoding="async" loading="lazy">

### Snap Color Picker

https://chromewebstore.google.com/detail/snap-color-picker/nbpljhppefmpifoffhhmllmacfdckokh

:::note info
マウスカーソルが乗っている位置の色を取得できます。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/8c11165c-af7b-b1a9-3042-14067e727335.png" width="1280" height="800" alt="Snap Color Picker" decoding="async" loading="lazy">

### Page Ruler

https://chromewebstore.google.com/detail/page-ruler/jcbmcnpepaddcedmjdcmhbekjhbfnlff

:::note info
ページ内のドラッグした範囲の位置とサイズを確認できます。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/03afd3e8-ae86-bb91-43a0-3c65590d9e2c.png" width="1280" height="800" alt="Page Ruler" decoding="async" loading="lazy">

### Dimensions

https://chromewebstore.google.com/detail/dimensions/baocaagndhipibgklemoalmkljaimfdj

:::note info
要素と要素の距離を測れます。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/9fda6811-da5d-6a3a-a4a9-e2c7f38a06e6.png" width="1280" height="800" alt="Dimensions" decoding="async" loading="lazy">

### JSON Viewer

https://chromewebstore.google.com/detail/json-viewer/efknglbfhoddmmfabeihlemgekhhnabb

:::note info
JSONファイル表示時に以下機能が追加され、めちゃくちゃ見やすくなります！

* 構造化表示
* シンタックスハイライト
* テーマ
* 保存
* コピー
* 検索
* 折りたたみ表示
* 生データ表示
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/764308a3-bd91-0da3-d54a-b98d3d782b76.png" width="1280" height="800" alt="JSON Viewer" decoding="async" loading="lazy">

### Web Maker

https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh

:::note info
ちょっとしたHTML、CSSの検証ができます！
Pug、Sassも利用できます！
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/e2d29883-fd30-35d5-28c2-078e0a5b6f18.png" width="1280" height="800" alt="Web Maker" decoding="async" loading="lazy">

:::note warn
Chromeのバージョンアップに伴い、JavaScriptのプレビューが動作しなくなったようです。
JavaScriptも利用したい場合は、Web Makerのウェブアプリを利用してください。
:::

https://webmaker.app/app/

### Web Developer

https://chromewebstore.google.com/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm

:::note info
さまざまな状況下でのページの表示確認や動作テストができます。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/191f5d97-6581-951d-0af4-6852ae070e4f.png" width="1280" height="800" alt="Web Developer" decoding="async" loading="lazy">

## コーディングチェック

### HTML Validator

https://chromewebstore.google.com/detail/html-validator/mpbelhhnfhfjnaehkcnnaknldmnocglk

:::note info
インストールするとデベロッパーツールに「HTML Validator」タブが追加され、バリデーションチェックができます。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/aac9b1b3-ea26-844d-e3bc-cbe4a4ff98a5.png" width="1280" height="800" alt="HTML Validator" decoding="async" loading="lazy">

### HeadingsMap

https://chromewebstore.google.com/detail/headingsmap/flbjommegcjonpdmenkdiocclhjacmbi

:::note info
見出しの構造を確認できます。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/2aa45384-e8e0-d428-dbb3-e5650b4e9c68.png" width="1280" height="800" alt="HeadingsMap" decoding="async" loading="lazy">

### Landmark Navigation via Keyboard or Pop-up

https://chromewebstore.google.com/detail/landmark-navigation-via-k/ddpokpbjopmeeiiolheejjpkonlkklgp

:::note info
WAI-ARIAのランドマークを確認できます。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/533eef90-1a0c-49db-ddcc-ead23c6c2d9c.png" width="1280" height="800" alt="Landmark Navigation via Keyboard or Pop-up" decoding="async" loading="lazy">

### axe DevTools - Web Accessibility Testing

https://chromewebstore.google.com/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd

:::note info
開発者ツールのタブに「axe DevTools」タブが追加され、表示しているページのアクセシビリティチェックができます。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/7627f1f4-c8fa-e2f9-d4d8-014e4ab9914b.png" width="1280" height="800" alt="axe DevTools - Web Accessibility Testing" decoding="async" loading="lazy">

### TDK Meta Checker

https://chromewebstore.google.com/detail/tdk-meta-checker/kjiieeppkcjgdigogiafneikdhpagpbc

:::note info
ページのタイトル、description、OGPなどのメタ情報を確認できます。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/48797b1d-165c-d99e-3e09-11edfbbedc9c.png" width="1280" height="800" alt="TDK Meta Checker" decoding="async" loading="lazy">

### Alt & Meta viewer

https://chromewebstore.google.com/detail/alt-meta-viewer/jjcjblcbnjhgjlnclhficglfjedhpjhl

:::note info
HTML内の以下要素の値が確認できます。
画像の `alt` 確認用に利用しています。

* `<img>`
  * `alt` の値
  * `width` と `height` の値
* `<title>` の値
* `<meta>` の値
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/edfd379a-acb5-da17-eea5-463e9924c9eb.png" width="1280" height="800" alt="Alt & Meta viewer" decoding="async" loading="lazy">

### Check My Links

https://chromewebstore.google.com/detail/check-my-links/ojkcdipcgfaekbeaelaapakgnjflfglf

:::note info
ページ内のリンク切れをチェックできます。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/8c6d9c92-4b54-3069-5f8b-9fafda73b94b.png" width="1280" height="800" alt="Check My Links" decoding="async" loading="lazy">

### Quick source viewer

https://chromewebstore.google.com/detail/quick-source-viewer/cfmcghennfbpmhemnnfjhkdmnbidpanb

:::note info
ページのHTML、JavaScript、CSSを確認できます。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/0bb34977-b07d-be2d-e11f-5e14009b8041.png" width="1280" height="800" alt="Quick source viewer" decoding="async" loading="lazy">

### HTML差分（diff）チェックツール

https://chromewebstore.google.com/detail/html差分diffチェックツール/fjbonpakihikkocmockbkndhooihpijo

:::note info
HTML差分をチェックできます。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/9f57eb72-2a6e-f81a-c42b-0b97b1021326.png" width="1280" height="800" alt="HTML差分（diff）チェックツール" decoding="async" loading="lazy">

## 表示チェック

### Responsive Viewer

https://chromewebstore.google.com/detail/responsive-viewer/inmopeiepgfljkpkidclfgbgbmfcennb

:::note info
複数の画面を表示し、レスポンシブデザインの見栄えを同時に確認できます。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/895603c4-1816-ef85-d238-76c958434c1d.png" width="1280" height="800" alt="Responsive Viewer" decoding="async" loading="lazy">

### モバイルシミュレーター

https://chromewebstore.google.com/detail/モバイルシミュレーター-レスポンシブテストツール/ckejmhbmlajgoklhgbapkiccekfoccmk

:::note info
さまざまなデバイスの表示をチェックできます。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/9685c329-363b-5e9d-163b-9401cf09fa4d.png" width="1280" height="800" alt="モバイルシミュレーター" decoding="async" loading="lazy">

### Window Resizer

https://chromewebstore.google.com/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh

:::note info
ブラウザウィンドウを任意のサイズに変更できます。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/665ada0f-36af-b342-f9bd-bbce44bb5e14.png" width="1280" height="800" alt="Window Resizer" decoding="async" loading="lazy">

### WebP and AVIF Highlighter

https://chromewebstore.google.com/detail/webp-and-avif-highlighter/aonapkfkfneahhaonjjpmcabpnbdmojl

:::note info
ページ内のWebP、AVIF画像を枠線で囲んでくれます。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/bddee5e3-fc9e-cf37-38cd-86c267c362be.png" width="1280" height="800" alt="Window Resizer" decoding="async" loading="lazy">

## サイトチェック

### Wappalyzer - Technology profiler

https://chromewebstore.google.com/detail/wappalyzer-technology-pro/gppongmhjkpfnbhagpmjfkannfbllamg

:::note info
サイトで利用しているCMS、解析ツール、広告配信システム、OS、サーバなどを確認できます。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/f98b99e8-f302-71e9-916e-8aecedb508da.png" width="1280" height="800" alt="Window Resizer" decoding="async" loading="lazy">

## その他

### Chikamichi

https://chromewebstore.google.com/detail/chikamichi-quickly-find-a/gkhobepjbiepngbeikhbpnfgjcjgmgha

:::note info
ブラウザの履歴、ブックマーク、タブのあいまい検索ができます。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/c0991b55-b0d9-0426-fd82-4a6b1dd65a85.png" width="1280" height="800" alt="Chikamichi" decoding="async" loading="lazy">

### Cache Killer

https://chromewebstore.google.com/detail/cache-killer/mobkodffjnomdafehbljjphjaipbenpm

:::note info
ページを読み込む前に、ブラウザのキャッシュを自動的に削除してくれます。
:::

:::note warn
以前は「Classic Cache Killer」という名称でしたが、マルウェアが含まれているという警告が表示されるようになり、「Cache Killer」とい名称で新しくなったようです。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/9bfaef67-42ad-43ab-4730-fa96d4cdd50c.png" width="1280" height="800" alt="Classic Cache Killer" decoding="async" loading="lazy">

### Dark Reader

https://chromewebstore.google.com/detail/dark-reader/eimadpbcbfnmbkopoojfekhnkhdbieeh

:::note info
ダークテーマ非対応のページにダークテーマを適用します。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/1b5edacd-dfbd-49c6-9181-834d2d67003a.png" width="1280" height="800" alt="Classic Cache Killer" decoding="async" loading="lazy">

### CopyTabTitleUrl

https://chromewebstore.google.com/detail/copytabtitleurl/lmgbdjfoaihhgdphombpgjpaohjfeapp

:::note info
タブのページのタイトル、URLをクリップボードにコピーします。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/6532b633-b7f5-d2de-33fe-8822159bc30d.png" width="1280" height="800" alt="CopyTabTitleUrl" decoding="async" loading="lazy">

### Pasty

https://chromewebstore.google.com/detail/pasty/hdjihnnclpjhfdbbinmgoiehhoehhlgf

:::note info
コピーした複数のURLをブラウザで一気に開くことができます。
:::

### DeepL翻訳

https://chromewebstore.google.com/detail/deepl%E7%BF%BB%E8%A8%B3/cofdbpoegempjloogbagkncekinflcnj

:::note info
選択したテキストを翻訳してくれます。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/80a195f6-2f1e-4ce5-bd87-125b230043cc.png" width="1280" height="800" alt="DeepL翻訳" decoding="async" loading="lazy">

Windowsの場合はChrome拡張機能よりアプリ版のインストールがオススメです。
インストールしておくとブラウザ以外のテキストも翻訳できて便利です。

https://www.deepl.com/ja/windows-app/

### WebP / Avif image converter

https://chromewebstore.google.com/detail/webp-avif-image-converter/pbcfbdlbkdfobidmdoondbgdfpjolhci

:::note info
WebP／AVIF画像をPNG／JPEGに変換して保存できます。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/f47e000e-3c65-56eb-c5fc-fb8e75543684.png" width="1280" height="800" alt="DeepL翻訳" decoding="async" loading="lazy">

画像の保存方法は以下となります。

1. 保存したいWebP／AVIF画像の上で右クリック
2. 表示されたコンテキストメニュー内の `code Convert and save image as` をクリック

### Material DevTools Theme Collection

https://chromewebstore.google.com/detail/material-devtools-theme-c/jmefikbdhgocdjeejjnnepgnfkkbpgjo

:::note info
デベロッパーツールのテーマやフォント、フォントサイズを変更できます。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/c4f4c631-a040-a7f8-967d-f870bea62cbf.png" width="1280" height="800" alt="Material DevTools Theme Collection" decoding="async" loading="lazy">

使い方は以下となります。

1. Material DevTools Theme Collection を有効化する
2. デベロッパーツールを開く `F12`
3. `設定` > `試験運用版` > `Allow extensions to load custom stylesheets` を有効にする
4. デベロッパーツールを閉じ、再度開く

### Toby for Chrome

https://chromewebstore.google.com/detail/toby-for-chrome/hddnkoipeenegfoeaoibdmnaalmgkpip

:::note info
タブをコレクションごとに管理できるようになります。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/f0c24fa0-c180-74a9-9a27-dc8ccfb06eb8.png" width="1280" height="800" alt="Toby for Chrome" decoding="async" loading="lazy">

### Session Buddy

https://chromewebstore.google.com/detail/session-buddy/edacconmaakjimmfgnblocblbcdcpbko

:::note info
現在開いているタブの状態を保存し、後から復元できるようになります。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/92cc71a0-eaaa-eada-f852-92503c0dd0a6.png" width="1280" height="800" alt="Session Buddy" decoding="async" loading="lazy">

## 拡張機能からChromeの機能へ移行したもの

### QRコード

QRコードの表示方法は以下となります。

1. QRコードを表示したいページ内で右クリック
2. 表示されたコンテキストメニュー内の `このページのQRコードを作成` をクリック

### スクリーンショット

デベロッパーツールのコマンドでスクリーンショットを撮ることができます。

1. デベロッパーツールを開く `F12`
2. コマンドパレットを表示 `Ctrl` + `Shift` + `P`
3. `スクリーン` と入力すると撮影する範囲の候補が表示されます

| コマンド | 動作 |
| :--- | :--- |
| スクリーンショットをキャプチャ | 見えている範囲のスクリーンショットを撮る |
| ノードのスクリーンショットをキャプチャ | 「要素」タブで選択したノードの表示部分のスクリーンショットを撮る |
| フルサイズのスクリーンショットをキャプチャ | ページ全体のスクリーンショットを撮る |
| 領域のスクリーンショットをキャプチャ | 選択した範囲のスクリーンショットを撮る |

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/833a878d-50fe-0f6e-5265-28171350c29d.png" width="1280" height="800" alt="デベロッパーツールでスクリーンショットコマンドを入力しているようす" decoding="async" loading="lazy">

## 関連記事

<!-- フロントエンドコーディング時に便利なジェネレーターサイト（随時更新） -->
https://qiita.com/taqumo/items/7df0c4dfaca6bd6436a3

<!-- フロントエンドコーディング時に便利な Visual Studio Code 拡張機能（随時更新） -->
https://qiita.com/taqumo/items/cdd7a9ecd631ecc37793

<!-- フロントエンドコーディング後によく利用するチェックサイト（随時更新） -->
https://qiita.com/taqumo/items/c5d20a6339045021f395