Webページのチェックをしているとき、「画像の読み込みが遅い…何KBあるの?」と思ったことや、
素敵なサイトにふと出会ったとき、「このサイト、どうやって作られているんだろう?」と気になった経験はありませんか?
Webの企画や制作に関わっているとよく浮かぶ疑問だと思いますが、なるべく時間をかけずに調べたいですよね。
そこで、Web確認時の手間が省けるGoogle Chromeの拡張機能をご紹介します。
◆画像の容量、サイズが知りたい!
View Image Info (properties)
https://chrome.google.com/webstore/detail/view-image-info-propertie/jldjjifbpipdmligefcogandjojpdagn
画像の情報が知りたいとき、Chromeは右クリックで確認できない……。という悩みを解決する拡張機能。
画像の上で右クリックし「View Image Info (properties)」を選択すると画像の詳細情報が確認できます。
◆修正したはずなのに変わっていない!
Clear Cache
https://chrome.google.com/webstore/detail/clear-cache/cppjkneekbjaeellbfkmgnhonkkjfpdn?hl=ja
「修正したので確認してください」と言われたけど自分のブラウザでは変わっていない、という状況、Web制作現場ではよくあります。
まず試したいのが”ブラウザキャッシュの削除”ですが、手間なく行うために、ワンクリックでキャッシュを削除する拡張機能が便利です。
(社内のWindowsユーザーは[Ctrl]+[F5]のショートカットキーもよく使っています。)
◆ここの文字サイズいくつ?
WhatFont
https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm
文字サイズの違いは目視で判別しづらく、ブラウザの開発ツールで調べるのも大変ですが、拡張機能なら一発で解決します。
アイコンをクリックし、調べたい文字にマウスオン(またはクリック)で文字サイズ、フォントの種類、カラーコードなどの情報が見られます。
◆一気に複数のURLを開きたい!
Pasty
https://chrome.google.com/webstore/detail/pasty/hdjihnnclpjhfdbbinmgoiehhoehhlgf/reviews?hl=ja
Excelやテキストで大量にURLが送られてきたとき、1つ1つリンクを開く、もしくはブラウザにURLをコピー&ペーストする前に!こちらをインストールしましょう。複数行にわたるURLをコピーして、Pastyのアイコンをクリックすると、自動で複数のページを開いてくれます。
◆このページ、Wordpress使ってる?
Library Sniffer
https://chrome.google.com/webstore/detail/library-sniffer-for-googl/fhhdlnnepfjhlhilgmeepgkhjmhhhjkh
サイトでWordpressを使っているかどうかはページのソースを見ればわかるのですが、もっと素早く確認したいときに使える拡張機能。アイコンをクリックすると、そのページで使われているCMSやライブラリが確認できます。
以上、Web確認時に便利な拡張機能を5つご紹介しました。調べる頻度の多いものはどんどん時短して、快適なWebライフを送りましょう!