WEBブラウザのDeveloper Tools

  • 投稿日:
  • by
  • カテゴリ:
このエントリーをはてなブックマークに追加

20150621164202_blogpix.jpg

WEBブラウザのDeveloper Toolsって便利ですよね。HTMLソースの不具合、不整合を見つけたりするのに重宝してます。Safariだとメニューの「開発 -> Webインスペクタを表示」、Chromeなら「表示 -> 開発/管理 -> デベロッパー ツール」、FirefoxならアドオンのFirebugなどですね。

上記のような使い方はサイトを構築・開発する際に役立つ機能なので、文字通りデベロッパーの方に重宝すると思います。

でも、使い方によっては違った使い方ができるなと思いました。自分が便利に感じたのはWebページのキャプチャーを撮る時です。例えば下記のような映画のサイトのキャプチャーをブログで使いたい場合(厳密には著作権的に問題あると思いますが...)、赤い枠で囲まれたところはない方がいいですよね。

20150621151024_blogpix.png

赤い枠で囲ったところを非表示にしてキャプチャしたい。そんな時に役に立つのがデベロッパー・ツールです。

例えばSafariの場合、メニューの「開発 -> Webインスペクタを表示」を選択すると右側にWebインスペクタが表示されます。

20150621151723_blogpix.png

次に右上にある「検査」という項目をクリックしてアイコンが青色になったら、キャプチャーしたいWebページを表示させたブラウザで、削除したい項目の上にカーソールを持って行き、削除したい部分の色が変わったらクリックします。

20150621154733_blogpix.png

Webインスペクタ内のHTMLソースの該当部分が強調されます。

20150621155255_blogpix.png

deleteキーを押すと強調されたHTMLソースが削除されて、WEBページ上からも削除されます。これを必要がない項目の全てで繰り返します。削除前と削除を比べると下記のようになります。

削除前

20150621160530_blogpix.png

削除後

20150621160607_blogpix.png

WEBサイトの作り方によって、この方法が使えるかは決まってくるので、全てのサイトで有効ではないですが、最近のサイトでは比較的有効なのではないかと思います。