MEMO REC

雑記帳兼php、mysql、html、css、javascript等の備忘録です。

【Chrome】Web開発で使えるオススメ拡張機能10選

Web開発においておすすめするChrome拡張機能をまとめましたので、メモします。

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

起動させるとページ内のリンクにアクセスしてリンクの状態を色別で表示してくれます。
起動させすぎるとアタックと勘違いされてアクセス先のサイトからアクセス拒否される事もあるので、使う際は気を付けてください。

正常
タイムアウトまたはエラー
デッドリンクまたはエラー

chrome.google.com

Redirect Path

起動するとリダイレクト設定しているサイトが表示されるまでに、どのようなレスポンスコードでどういう経路でリダイレクトして表示されているかなどが確認できます。
クライアントのページがどのように表示されているかなどを確認する際に活躍します。
f:id:gontora:20180919113022j:plain
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