記事の詳細

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

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

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

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

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

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

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

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

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

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

長押し

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

長押しで表示される

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

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

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

他のアイコンの意味

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

20150727_chrome_05

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

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

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

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

The following two tabs change content below.
三宅 崇之

三宅 崇之

代表取締役インクループ株式会社
代表取締役。京セラ株式会社 機器研究開発本部に配属後、EV-DO通信プロトコルの開発、北海道洞爺湖サミットにおけるマルチワンセグメントサービスの実証実験用端末の開発、京セラ初のHEMSとなる「ハウスマイルナビィ」の企画・ソフトウェア開発を経て、現在ではインターネット時代におけるWEBサイトの活用・運用に関する企画・提案、セミナー等においてこれまで培ってきたノウハウの提供に力を入れている。

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

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

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

AD

ページ上部へ戻る