記事の詳細

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

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

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

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

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

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

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

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

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

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

長押し

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

長押しで表示される

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

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

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

他のアイコンの意味

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

20150727_chrome_05

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

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

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

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

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

三宅 崇之

取締役/ストックマーケティング事業部長インクループ株式会社
研究大好き。WEBサイトを通し集積したデータを分析することで、現状を正確に把握し、次の一手を生み出すことを目的としたマーケティングを実行し、より良い企画・計画を提案することを得意としています。

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

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

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

お知らせ

平成28年度補正予算 小規模事業者持続化補助金

特集

エクセルトラブルと解決策のまとめ アクセス数を増加させるための方法まとめ 初心者向けWordPressの設定方法まとめ

AD

ページ上部へ戻る