15
20

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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

Last updated at Posted at 2021-01-19

更新履歴

  • 2024/06/05
    • 「Classic Cache Killer」を、「Cache Killer」に変更しました。
  • 2024/03/08
    • 使用していないものを削除し、新たな拡張機能を追加しました。

コーディングサポート

ColumnCopy

<table> タグ内のテキスト(列だけ、すべて)をコピーできます。

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

PxtoRem

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

PxtoRem

Snap Color Picker

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

Snap Color Picker

Page Ruler

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

Page Ruler

Dimensions

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

Dimensions

JSON Viewer

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

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

Web Maker

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

Web Maker

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

Web Developer

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

Web Developer

コーディングチェック

HTML Validator

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

HTML Validator

HeadingsMap

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

HeadingsMap

Landmark Navigation via Keyboard or Pop-up

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

Landmark Navigation via Keyboard or Pop-up

axe DevTools - Web Accessibility Testing

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

axe DevTools - Web Accessibility Testing

TDK Meta Checker

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

TDK Meta Checker

Alt & Meta viewer

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

  • <img>
    • alt の値
    • widthheight の値
  • <title> の値
  • <meta> の値
Alt & Meta viewer

Check My Links

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

Check My Links

Quick source viewer

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

Quick source viewer

HTML差分(diff)チェックツール

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

HTML差分(diff)チェックツール

表示チェック

Responsive Viewer

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

Responsive Viewer

モバイルシミュレーター

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

モバイルシミュレーター

Window Resizer

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

Window Resizer

WebP and AVIF Highlighter

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

Window Resizer

サイトチェック

Wappalyzer - Technology profiler

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

Window Resizer

その他

Chikamichi

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

Chikamichi

Cache Killer

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

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

Classic Cache Killer

Dark Reader

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

Classic Cache Killer

CopyTabTitleUrl

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

CopyTabTitleUrl

Pasty

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

DeepL翻訳

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

DeepL翻訳

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

WebP / Avif image converter

WebP/AVIF画像をPNG/JPEGに変換して保存できます。

DeepL翻訳

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

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

Material DevTools Theme Collection

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

Material DevTools Theme Collection

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

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

Toby for Chrome

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

Toby for Chrome

Session Buddy

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

Session Buddy

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

QRコード

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

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

スクリーンショット

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

  1. デベロッパーツールを開く F12
  2. コマンドパレットを表示 Ctrl + Shift + P
  3. スクリーン と入力すると撮影する範囲の候補が表示されます
コマンド 動作
スクリーンショットをキャプチャ 見えている範囲のスクリーンショットを撮る
ノードのスクリーンショットをキャプチャ 「要素」タブで選択したノードの表示部分のスクリーンショットを撮る
フルサイズのスクリーンショットをキャプチャ ページ全体のスクリーンショットを撮る
領域のスクリーンショットをキャプチャ 選択した範囲のスクリーンショットを撮る
デベロッパーツールでスクリーンショットコマンドを入力しているようす

関連記事

15
20
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
15
20

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?