LoginSignup
16

フロントエンドでよく利用するChrome拡張機能(随時更新)

Last updated at Posted at 2021-01-19

更新履歴

コーディング

Web Developer

様々な状況下でのページの表示確認や動作テストを行えます。
まさに全部のせツールです。

web-developer.png

Web Maker

ちょっとしたコードの検証にとっても便利!
Pug・Sass・TypeScriptも利用できます!

web-maker.png

PxtoRem

フォントサイズを px から rem に変換してくれます。

pxtorem.png

ColumnCopy

tableタグ内のデータ(全て・列だけ)を簡単にコピーできます。

columncopy.png

ColorZilla

Webページ上の色を簡単に取得できます。

colorzilla.png

Page Ruler Redux

Webページ上のサイズを簡単に測れます。

page-ruler-redux.png

JSON Viewer

JSONが構造化されて表示されてめっちゃ見やすい!
フィルタリング、折りたたみ表示、生データ表示もできてサイコーです。

json-viewer.png

コーディングチェック

モバイルシミュレーター

色々なデバイスの表示をチェックできます!
実機での確認が一番ですが、レスポンシブの見た目を確認するのに便利です。

mobile-simulator.png

headingsMap

HTMLは文書構造が命!

headingsmap.png

HTML Validator

インストールするとデベロッパーツール内に「HTML Validator」という項目が増えます。

html-validator.png

TDK Meta Checker

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

tdk-meta-checker.png

Check My Links

ページ内のリンクをチェックしてくれます。

check-my-links.png

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

本番環境と開発環境のHTML差分をチェックできます。

html-diff-check-tool.png

その他

Chikamichi

ブラウザの履歴・ブックマーク・タブを検索できてめちゃくちゃ便利!

chikamichi.png

Classic Cache Killer

「あれ?ページが更新されてないんだけど?」からバイバイしましょう!

classic-cache-killer.png

The QR Code Extension

モバイルデバイスの表示チェックに毎回URL入力なんて…
僕は嫌だ!

the-qr-code-extension.png

Tab Resize - split screen layouts

開いているタブを別ウィンドウで分割して開いてくれます。
本番環境と開発環境の確認に便利です。

tab-resize-split-screen-l.png

Toby for Chrome

いつの間にかタブだらけ…
なんてことは日常茶飯事。
そんなタブをグループ管理できるようにしてくれます!
これはめちゃくちゃ便利です!

toby-for-chrome.png

Session Buddy

現在開いているタブの状態を保存し、後からいつでも復元できるようにしてくれます。
突然落ちて開いていたタブが全部なくなった…
なんてことがなくなります。

session-buddy.png

Material DevTools Theme Collection

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

material-devtools-theme-c.png

設定がちょっとややこしいので以下に記載しておきます。

  1. Material DevTools Theme Collectionを有効化する
  2. デベロッパーツールを開く
  3. F1を押す
  4. Settings > Preferences > Appearance > Theme を Dark に変更する
  5. Settings > Experiments > Allow custom UI themes を有効にする
  6. 拡張機能 を開く
    1. Material DevTools Theme Collection を検索
    2. 詳細 > 拡張機能のオプション をクリック
    3. 設定画面が開きます

material-devtools-theme-c_setting.png

関連記事

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
What you can do with signing up
16