記事の詳細

Googleが提供している無料ブラウザのChromeはパソコン版、モバイル版(スマホ、タブレット)などに対応する最新の技術が詰め込まれたブラウザです。

最近は利用者も増えてきましたが、やはりChromeはまだまだIT技術に詳しい人の利用がメインユーザーのようです。

WEB開発するなら手放せないデベロッパーツール

このChromeブラウザに搭載されている機能の中で、WEBサイトやWEBアプリを制作する時に非常に活躍するのが右クリックするとコンテキストメニューの中にある「要素の検証」(デベロッパーツール)です。

WEB系の開発者なら誰もがお世話になる便利すぎるツールです。

このツールはF12を押すか、右クリックしてコンテキストメニューから表示することができます。

※下段に表示されているのがデベロッパーツールです。
要素の検証は標準だと下に表示されます

デベロッパーツールを右側に表示するためには「長押し」が必要

このツールは標準では下側に表示されるのですが、最近のフルHDのディスプレイのような横長サイズだと右側に表示したほうが個人的には使いやすいと思います。

右側に表示するためには、下の赤枠の位置にあるアイコンを

長押し

すると、赤枠で囲んだデベロッパーツールを右側に表示するためのアイコンが表示されます。

長押しで表示される

このアイコンを選択するとデベロッパーツールが右側に表示されます。

デベロッパーツールが右側に表示された図

この「長押し」をいつも忘れてしまうんですよね。。。

他のアイコンの意味

右側表示以外にも、標準の下側表示(上のアイコン)、また別ウインドウ表示(下のアイコン)もあります。

20150727_chrome_05

環境に応じて使い分けるとさらに便利にデベロッパーツールを活用することができると思います。

デベロッパーツールの使い方についてはまた次の機会にでも紹介したいと思います。

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。


ほかの投稿も読んでみませんか?

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

相模原のお店やサービスをどんどん紹介!

行ってみよう相模原 相模原市のお店限定

飲食店

ページ上部へ戻る