更新履歴
- 2023/04/12：「モバイルシミュレーター」を掲載しました
- 2022/01/31：「Chikamichi」を掲載しました
コーディング
Web Developer
様々な状況下でのページの表示確認や動作テストを行えます。
まさに全部のせツールです。
Web Maker
ちょっとしたコードの検証にとっても便利！
Pug・Sass・TypeScriptも利用できます！
PxtoRem
フォントサイズを px から rem に変換してくれます。
ColumnCopy
tableタグ内のデータ（全て・列だけ）を簡単にコピーできます。
ColorZilla
Webページ上の色を簡単に取得できます。
Page Ruler Redux
Webページ上のサイズを簡単に測れます。
JSON Viewer
JSONが構造化されて表示されてめっちゃ見やすい！
フィルタリング、折りたたみ表示、生データ表示もできてサイコーです。
コーディングチェック
モバイルシミュレーター
色々なデバイスの表示をチェックできます！
実機での確認が一番ですが、レスポンシブの見た目を確認するのに便利です。
headingsMap
HTMLは文書構造が命！
HTML Validator
インストールするとデベロッパーツール内に「HTML Validator」という項目が増えます。
TDK Meta Checker
ページのタイトル・description・などのメタ情報を確認できます。
Check My Links
ページ内のリンクをチェックしてくれます。
HTML差分（diff）チェックツール
本番環境と開発環境のHTML差分をチェックできます。
その他
Chikamichi
ブラウザの履歴・ブックマーク・タブを検索できてめちゃくちゃ便利！
Classic Cache Killer
「あれ？ページが更新されてないんだけど？」からバイバイしましょう！
The QR Code Extension
モバイルデバイスの表示チェックに毎回URL入力なんて…
僕は嫌だ！
Tab Resize - split screen layouts
開いているタブを別ウィンドウで分割して開いてくれます。
本番環境と開発環境の確認に便利です。
Toby for Chrome
いつの間にかタブだらけ…
なんてことは日常茶飯事。
そんなタブをグループ管理できるようにしてくれます！
これはめちゃくちゃ便利です！
Session Buddy
現在開いているタブの状態を保存し、後からいつでも復元できるようにしてくれます。
突然落ちて開いていたタブが全部なくなった…
なんてことがなくなります。
Material DevTools Theme Collection
デベロッパーツールのテーマやフォント、フォントサイズを変更することができます。
設定がちょっとややこしいので以下に記載しておきます。
- Material DevTools Theme Collectionを有効化する
- デベロッパーツールを開く
- F1を押す
- Settings > Preferences > Appearance > Theme を Dark に変更する
- Settings > Experiments > Allow custom UI themes を有効にする
-
拡張機能 を開く
- Material DevTools Theme Collection を検索
- 詳細 > 拡張機能のオプション をクリック
- 設定画面が開きます
関連記事