【Chrome】Web開発で使えるオススメ拡張機能10選
Web開発においておすすめするChromeの拡張機能をまとめましたので、メモします。
- ColorZilla(カラーピッカー)
- Awesome Screenshot(スクリーンショット取得)
- jsoff(JSをOFFにする)
- The QR Code Extention(QRコード生成)
- Link Checker(リンク切れチェック)
- Redirect Path
- One Tab
- テキストエンコーディング
- JSONview(Jsonビューア)
- Proxy SwitchyOmega(Proxy切り替えツール)
ColorZilla(カラーピッカー)
起動するとカーソルが表示されて、
カーソルが合った場所の色情報を取得する事ができます。
取得した色情報(カラーコード)はクリップボードに保存されているので、
Ctrl+vなどでcssに貼り付ければそのまま利用できます。
chrome.google.com
Awesome Screenshot(スクリーンショット取得)
Chromeで開いているサイトの画面キャプチャを取得する事が出来ます。
単純に見えている部分、スクロールが必要な見えない部分も含めた全体、範囲指定など様々な取得方法が選択できます。
キャプチャした後の画像に対して編集なども出来るので、とても便利です。
また動画での撮影も出来る為、色んな用途に使えます。
chrome.google.com
jsoff(JSをOFFにする)
その名の通りアイコンをクリックして起動させるとJSをオフにできます。
F5などで更新するとJSオフ状態でページを再読み込みします。
もう一度アイコンをクリックすればオンに戻ります。
WEBページ開発時や確認時にJSをオフにして確認する事がよくある為、シンプルなアドオンですが重宝しています。
chrome.google.com
The QR Code Extention(QRコード生成)
起動すると表示しているページのURL情報をQRコードにしてくれます。
スマホにQRコード読み込みアプリをインストールしておけば、スマホで動作確認する際にQRコードを読み込むだけでアクセスできるのでURLを打ち込む手間が省けます。
chrome.google.com
Link Checker(リンク切れチェック)
起動させるとページ内のリンクにアクセスしてリンクの状態を色別で表示してくれます。
起動させすぎるとアタックと勘違いされてアクセス先のサイトからアクセス拒否される事もあるので、使う際は気を付けてください。
緑 | 正常 |
青 | タイムアウトまたはエラー |
赤 | デッドリンクまたはエラー |
Redirect Path
起動するとリダイレクト設定しているサイトが表示されるまでに、どのようなレスポンスコードでどういう経路でリダイレクトして表示されているかなどが確認できます。
クライアントのページがどのように表示されているかなどを確認する際に活躍します。
chrome.google.com
One Tab
一つのブラウザで作業を進めているとタブがいつの間にかどんどん増えて、PCのメモリを食いつぶし始めて動作が重くなるといった事があると思います。
そんな時にこのアドオンを起動すると開いていた複数のタブを一つのタブにリンクとしてまとめてくれます。
chrome.google.com
テキストエンコーディング
文字コードを変更できます。
最近はブラウザが賢くなって文字化けとかも自動で直してくれるので、使用頻度は低いですがたまに使います。
chrome.google.com
JSONview(Jsonビューア)
このアドオンを入れておくだけでjsonファイルを表示する際に自動で綺麗に整形して表示してくれます。
データの確認する時などに役立ちます。
chrome.google.com
Proxy SwitchyOmega(Proxy切り替えツール)
開発環境と本番環境をPROXYを使って切り替える時などに使います。
インターネットのプロパティなどを開いて切りかえるのは本当に面倒ですが、このアドオンで設定さえしておけばワンクリックですぐPROXYを切り替える事が出来ます。
chrome.google.com