GoogleChromeの便利な拡張機能

雑記

GoogleChromeの便利な拡張機能

Web Developer

Firefoxで有名な「Web Developer」のChrome版
Firefox版と違い日本語化出来ない様なので、使い慣れるのに多少苦労するが機能はほとんど変わらない。
使い方はアドレスバー横の歯車のマークをクリックすると各メニューが出てくるので、その中から使いたい項目を選択する。

今のところ良く使うであろう機能は以下の通り
CSS

  • Disable All Styles(全てのスタイルを無効にする)☆
  • Disable Browser Default Styles(ブラウザ標準のスタイルを無効にする)
  • Disable Embedded Styles(エンベットで指定されたスタイルを無効にする)
  • Disable Linked Styles（linkで指定されたスタイルを無効にする）
  • View CSS(CSSを表示する)☆

images

  • Disable Images(画像を無効にする)
  • Display Image Dimensions(画像のサイズを表示する)
  • Display Image Paths(画像のパスを表示する)
  • Find Broken Images(問題のある画像を探す)
  • Outline All Images(全ての画像を枠で囲う)
  • Outline Background Images(背景画像を枠で囲う)
  • View Image Information(画像の情報を表示する)☆

infomation

  • Display Div Dimensions(ブロック要素のサイズを表示する)
  • Display Div Order(div要素の順序を表示する)
  • Display Element Information(要素の情報を表示する)☆
  • Display Id & Class Details(idとclass属性を表示する)
  • Display Link Details(リンクのパスを表示する)
  • View Color Information(色情報を表示する)☆
  • View JavaScript(JavaScriptの情報を表示する)☆
  • View Link Information(link情報を表示する)☆

Miscellaneous

  • Display Line Guides(ガイドラインを表示する)
  • Mark All Links Unvisited(全てのリンクを未訪問にする)
  • Mark All Links Visited(全てのリンクを訪問済みにする)

Outline

  • Outline Block Level Elements(ブロックレベル要素を枠で囲う)☆

Resize

  • View Responsive Layouts(レスポンシブレイアウトで表示する)☆

Tools

  • Validate CSS(W3CのCSSバリデート)☆
  • Validate HTML(W3CのHTMLバリデート)☆
  • Validate Link(W3Cのリンクチェッカー)☆

各項目の使い方は直感的にわかる

HTML5 Outliner

ページの文書構造(Outline)を表示してくれる拡張機能
アドレスバー内のアイコンをクリックすることでアウトラインを表示出来る

表示された各項目を選択すると、その場所までジャンプし選択中の要素が点滅する

MeasureIt!

選択した範囲の大きさを測れる拡張機能
アドレスバー横の定規のアイコンをクリックすると画面がマスクされた状態になり使用出来る

画像や要素のサイズはWebDeveloperで表示したほうが正確だが、任意の大きさを測るときはこれが便利

ColorZilla

選択した場所の色を抽出コピーしてくれる拡張機能
アドレスバー横のスポイトのアイコンをクリックすると使用できる

画面上部にカーソルが乗っている場所の色がリアルタイムに表示され、抽出したい場所でクリックするとカラーコードがクリップボードにコピーされる
スポイトのアイコンをクリックしたメニューの中には抽出した色をRGBでコピーやカラピッカー表示、グラデーションジェネレータなどが用意されている

Awesome Screenshot

ページの一部またはまるごとキャプチャを出来る拡張機能

表示されている領域、選択された領域、１ページ全ての３種類でキャプチャできキャプチャしたあとは簡単な編集が可能
又、ローカルはもちろんソーシャルなどのオンライン上にそのままアップデートすることも出来る

ただしアップロード前のhtmlファイルをChromeで表示したものをキャプチャすることは出来ないので、その場合Firefoxの「Pearl Crescent Page Saver」というアドオンをおすすめします

Note AnyWhere

Webページ上に付箋を残してくれる拡張機能

Webページを閲覧中、ページの好きな場所に付箋をつけコメントを挿入して残しておくことが出来る
記事を読んでいて重要な箇所や解らなかった箇所に注釈付きで付箋をつけたり、動画ページに付箋を残し何分まで見たとコメントしておけば後でそのページを訪れた時に付箋があるのですぐに確認出来る、またページ内の画像もドラッグ＆ドロップで付箋に残すことが出来る

付箋をつけた場所はアイコンを右クリックし、オプションからNotesSummuryから行くことが出来るのでブックマークの変わりに出来る