Web製作者向けChromeの便利ツールまとめ

##はじめに


利用者の多いブラウザGoogle Chromeのプラグインについて
用途別にまとめてみました。

あくまでも一言で概要を紹介したものなので、
詳細は各プラグインのウェブストアページをご参照下さい。



##WEBページ制作

WEBページの制作や確認に役立つツールをまとめました。


・ViewImgInfo
画像サイズを手軽に調べられる
[Chromeウェブストア](https://chrome.google.com/webstore/detail/view-image-info-propertie/jldjjifbpipdmligefcogandjojpdagn?hl=ja)
![viewimg.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482202/a3d92913-609f-de79-ccb2-21769789f182.png)


・Color Picker
ページ上要素の色を見たいだけの場合は楽
[Chromeウェブストア](https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg)
![colorpicker.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482202/c9e94c89-a79b-bf30-01de-cf8e528dba6c.png)


・HTMLエラーチェッカー
楽にHTML文法エラーを見つけられる
[Chromeウェブストア](https://chrome.google.com/webstore/detail/html%E3%82%A8%E3%83%A9%E3%83%BC%E3%83%81%E3%82%A7%E3%83%83%E3%82%AB%E3%83%BC/ohdllebchmmponnofchalfkegpjojcaf?hl=ja)
![htmlerrorchecker.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482202/a6a668c5-e947-ec84-dc97-9fc8453b6d9e.png)


・Clear Cache
キャッシュを消す動作を簡単に
[Chromeウェブストア](
https://chrome.google.com/webstore/detail/clear-cache/cppjkneekbjaeellbfkmgnhonkkjfpdn?hl=ja)
![clearcache.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482202/e4b9079a-7442-efd1-ac59-5e8ebb1d4453.png)


・Web Maker
少しコード（HTML、JS、CSS)を直して試したい場合に便利
[Chromeウェブストア](https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh)
![webmaker.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482202/813b6b45-ab79-3a20-858e-b893ddf4d08f.png)



・Page loadtime
ページのスピードをさくっと計測
[Chromeウェブストア](https://chrome.google.com/webstore/detail/page-load-time/fploionmjgeclbkemipmkogoaohcdbig?hl=ja)
![loadtime.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482202/c95544a8-b32f-7cac-bdd7-aae74b84ccd2.png)



・The QR Code Extension
スマホサイトアクセス用QRコードを表示し実機アクセスを楽に
[Chromeウェブストア](
https://chrome.google.com/webstore/detail/the-qr-code-extension/oijdcdmnjjgnnhgljmhkjlablaejfeeb?hl=ja)
![qr.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482202/3ce8634b-ff7b-847e-9cac-6982e350a227.png)



・Awesome ScreenShot
サイトのスクリーンショットを取る際に便利　注釈をつけたりもできる
[Chromeウェブストア](
https://chrome.google.com/webstore/detail/awesome-screenshot-screen/nlipoenfbbikpbjkfpfillcgkoblgpmj?hl=ja)
![AwesomeScreenShot.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482202/014f3494-7bfc-cdc8-98fb-74f68aa7a738.png)



##情報収集の効率化
IT業界に関わらず情報社会で生活する上で便利なツールを
まとめてみました。

・Save to Pocket
後で読もうと思った記事を一時的に入れておくなどの使い方に便利(
Pocketユーザ向け)
[Chromeウェブストア](
https://chrome.google.com/webstore/detail/save-to-pocket/niloccemoadcdkdjlinkgdfekeahmflj)
![savepocket.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482202/d277f9e8-8c14-cc8c-1097-07bd3a5af4b9.jpeg)



・Evernote Web Clipper
Evernoteユーザー向けの拡張機能(Evernoteユーザ向け)
[Chromeウェブストア](https://chrome.google.com/webstore/detail/evernote-web-clipper/pioclpoplcdbaefihamjohnefbikjilc?hl=ja)
![evernote.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482202/9c7c1d80-301a-5550-54db-ab88263a0cd0.png)


・OneNote Web Clipper
記事の一部を切り取ってメモなどに便利
[Chromeウェブストア](https://chrome.google.com/webstore/detail/onenote-web-clipper/gojbdfnpnhogfdgjbigejoaolejmgdhk?hl=ja)
![onenote.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482202/0b4b3e4f-4960-bcf8-2873-ca3603cdaeb2.png)



・どこでも翻訳
部分的に翻訳したい場合など
[Chromeウェブストア](
https://chrome.google.com/webstore/detail/translate-anywhere/hhimhiimpaicidimabokfbdokhpcnmoh?hl=ja)
![TR.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482202/a3b0612d-8f7a-bc9f-3086-9bacd1459868.png)


・Weblio
オンマウスで英単語の意味を見られる
[Chromeウェブストア](https://chrome.google.com/webstore/detail/weblio%E3%83%9D%E3%83%83%E3%83%97%E3%82%A2%E3%83%83%E3%83%97%E8%8B%B1%E5%92%8C%E8%BE%9E%E5%85%B8/oingodpdjohhkelnginmkagmkbplgema?hl=ja)
![TRpop.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482202/e81e21da-e8fb-c014-6401-0916bfe52932.png)


・ato-ichinen
Google検索結果を1年以内のものに限定
[Chromeウェブストア](https://chrome.google.com/webstore/detail/ato-ichinen/pojaolkbbklmcifckclknpolncdmbaph?hl=ja)
![atoichinen.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482202/de982ec9-ad2c-5d27-3d2a-17f566eb15f2.png)


・Better History
ブラウズ履歴を見やすく、探しやすくする
[Chromeウェブストア](
https://chrome.google.com/webstore/detail/chrome-better-history/aadbaagbanfijdnflkhepgjmhlpppbad)
![BetterHist.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482202/baf66c3f-861e-dbc5-096e-40a491296c60.png)




・TinEye Reverse Image Search
google以外の画像検索を試したいとき
[Chromeウェブストア](https://chrome.google.com/webstore/detail/tineye-reverse-image-sear/haebnnbpedcbhciplfhjjkbafijpncjl)
![SerchIMG.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482202/cfed7945-04d2-c481-f8c4-2b29db7d99d8.jpeg)




##その他検証・セキュリティなど
・Betternet Unlimited
IP偽装を簡単にする　簡易的にVPN接続したいとき
[Chromeウェブストア](
https://chrome.google.com/webstore/detail/betternet-unlimited-free/gjknjjomckknofjidppipffbpoekiipm?hl=ja)
![BetternetUnlimited.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482202/3eb59542-d48f-aee3-4f2a-bdc76b93f647.png)


・Unshorten.link
危険な短縮URLを踏まないために
[Chromeウェブストア](
https://chrome.google.com/webstore/detail/unshortenlink/gbobdaaeaihkghbokihkofcbndhmbdpd?utm_source&utm_medium&utm_campaign&hl=ja
)![unshorten.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482202/b7e2207c-1086-902a-baa4-0f3f10a14702.jpeg)


・Web of Trust
サイトの信頼性を知りたいとき
[Chromeウェブストア](https://chrome.google.com/webstore/detail/wot-web-of-trust-website/bhmmomiinigofkjcapegjjndpbikblnp?hl=ja)
![Trust.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482202/fd66fba8-ae15-b7e1-dd98-7bc59604558d.png)



##その他効率化関連
・Print Friendly & PDF
サイトを紙の資料やPDFにする際便利
[Chromeウェブストア](https://chrome.google.com/webstore/detail/print-friendly-pdf/ohlencieiipommannpdfcmfdpjjmeolj?hl=ja)
![PRINTfriendry.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482202/1ff00dba-0878-fbc0-7858-239db7e83c11.png)



・Any.do
タスクやリストの整理に
[Chromeウェブストア](https://chrome.google.com/webstore/detail/anydo-extension/kdadialhpiikehpdeejjeiikopddkjem?hl=ja)
![anydo.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482202/44f556c8-c6a3-8d35-8724-e7a76d6eecfc.jpeg)


・HabitLab
サイトのブラウズ（滞在時間）を表示
時間活用効率化の指標として使えるかも？
[Chromeウェブストア](https://chrome.google.com/webstore/detail/habitlab/obghclocpdgcekcognpkblghkedcpdgd)
![HabitLab.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482202/2d79e34a-123f-304c-1fb0-331425fbcf90.jpeg)




参考：
https://saruwakakun.com/it/web/chrome-extensions
https://www.tomsguide.com/us/pictures-story/283-best-google-chrome-extensions.html