Web制作者のためのおすすめChrome拡張15
普段使っているChromeをより便利にしてくれる拡張機能。私も様々なものを入れていますが、その中でもWeb制作時に使える便利拡張をいくつか紹介します。Firefoxに対応しているものもありますよ！
↑私が10年以上利用している会計ソフト！
Web Developer
Chrome拡張｜Firefox Add-on｜GitHub｜公式サイト
Webに携わる人は入れておいて損はない拡張のひとつ！長年利用させていただいてます。1クリックでCSSやJavaScriptを無効化したり、画像の非表示、様々なデバイスサイズでの表示、クラスやID名の表示、定規やカラーピッカーまで揃っています！カラーピッカーはCSSで定義されたものだけでなく、画像からも抽出できるのがすごい。日本語版もあるので試してみてくださいね。
CSS Peeper
UIの美しさが魅力のデザイナー向け拡張。今開いているサイトで使われているフォント、配色、画像など調べられます。グラデーションカラーのチェックもできるのが素敵。要素のボックスモデルも確認できます。
Web Maker
HTMLやCSS、JavaScriptのコードを書けば、リアルタイムでプレビュー表示できるChrome拡張。オフラインでも使えます！詳しい使い方は過去記事「CodePenっぽいコードプレビュー・管理のできるChrome拡張【Web Maker】」で紹介しています。
WhatRuns
開いているWebサイトが使用しているCMSやそのプラグイン、ウィジェット、JavaScriptライブラリー、Webサーバーなど、様々な情報を1クリックで閲覧できます。Webサイトの調査が楽になりますよ！
FireShot
Webサイトの一部、または全画面のキャプチャーが撮影できる拡張。PDF/JPEG/GIF/PNGで保存できます。Webデザインギャラリーページ作成時に大活躍しています！画面キャプチャーはChromeのデベロッパーツールでも使えますが、固定要素があるとうまく撮影できないことがあるのでこちらの拡張がおすすめです。
Create Link
現在開いているWebサイトのURLを、HTMLやマークダウンなど様々な形式でコピーできます。ブログを書き始めてからずっと重宝している拡張のひとつ。Webサイトを紹介する機会が多いブロガーさんには特におすすめ！
GetTabInfo
ひとつのサイトだけではなく、今開いているすべてのタブのWebサイトのURLをコピーしたい時におすすめの拡張。全タブのタイトルとURLを一括取得可能です。テンプレートで自由に出力内容を編集できます。ちなみにこんな経緯で開発されましたw
CodeCopy
Chrome拡張｜Firefox Add-on｜GitHub
GithubやStack Overflow、MDNなどのWebサイトに掲載されているコードをクリックひとつでコピーできるようになります。地味に便利。
ChromeLens
目の不自由な方がどのように見えているのかを検証できるDeveloper Toolの拡張。インストールするとDeveloper Toolに「Chrome Lens」のタブが表示されます。「Enable Lens」にチェックを入れて視覚の種類を選択すると画面全体の表示が変わります。
PrintWhatYouLike
Webページの不要なところを削除し、必要な部分だけを選択して印刷できるスグレモノ。私は印刷ではなく、必要な部分だけをEvernoteに保存する時に使っています。
WhatFont
カーソルを合わせるだけで何のフォントかを表示してくれます。クリックするとサイズや太さ、色などの詳細とフォントのサンプルが表示。デベロッパーツールでも確認できますが、この拡張を使えばもっと手軽にできちゃいます。
JSON Viewer
JSON形式のファイルをWeb上で表示する時に読みやすくしてくれます。テーマは選択可能。長いURLが折りたたまれているだけでも見やすいですね。
Clear Cache
ブラウザーのキャッシュをはじめ、履歴やパスワードなど、あらゆるデータをクリックひとつで消去する拡張。デフォルト機能でもできることですが、こちらはダイアログなどが出ないので本当に楽ちんです。
GitHub File Icon
Chrome拡張｜Firefox Add-on｜GitHub
GitHubのファイル一覧ページに、各ファイル毎にアイコンを付与できる拡張。アイコンがないとめちゃくちゃ困る…というわけでもないですが、あると見やすくなりますね。GitHubをよく使う人は導入してみては？
xvg
Webサイト上で使用されているSVGのパスやアンカーポイントが視覚的に見えるようになります。カーソルを合わせると拡大表示されます。
どれもより便利に開発が進められる便利ツールばかり！手軽に試せるのもいいですよね。お気に入りは見つかりましたか？おすすめがあれば教えてくださいね！
