🗂️
web制作に便利な拡張機能
web制作に便利な拡張機能の紹介。
※利用の際は念の為安全なものか、確認してからご利用下さい。
Chrome
PerfectPixel by WellDoneCode (pixel perfect)
画像を画面に重ねることが出来る。
・デザインデータが画像の場合
・前の画面から変更がないか確認したい場合
などに使える。
Environment Marker
本番環境で間違えて作業しちゃった！なんてことが無いように、画面に分かりやすく「本番！」と表示しておけるようなツール。
JSON Formatter
APIをブラウザ上で叩いた際、JSONがダラダラと表示されるのが見辛い…という時に整頓してくれるツール
LocatorJS
画面上でaltを押しながら要素をクリックすると、該当のコードに飛んでくれる神ツール
(使い方はPCによるかもなのでドキュメントをご参照ください。)
Wappalyzer - Technology profiler
そのサイトが何のツールで出来ているのかを知ることが出来る。
信憑性は不明。
VSCode
GitLens
これはもう手放せない。コードを触ると誰がいつ編集したかが見れる。
コミットIDも出るので、それを使ってGitHub上で関連PullRequestを検索出来る。
Pretty TypeScript Errors
TypeScriptのエラーをいい感じに分かりやすくしてくれる。
vscode-icons
ファイルの拡張子を見て、アイコンをつけてくれる。
可愛いし、普通に見やすい。一回使うと手放せない。
Compare Folders
フォルダ単位で差分を比較出来る。
おまけ
テキスト比較ツール difff《ﾃﾞｭﾌﾌ》
テキストを比較するツール。安全性は不明。
TinyPNG
画像ファイルを小さくしてくれる。安全性は不明。
私のアイコンもこんなに小さく！(before → after)
Tag Assistant
Googleのタグが正しく発火しているか確認する際に利用するサイト。
リッチリザルト テスト
リッチリザルトが正しく設定されているか検証できるサイト。
リッチリザルトについて以前書いた記事
便利なツールを活用してモリモリ開発しよう！
Discussion