デベロッパーツールをのぞいてみよう！

デベロッパーツールとは

Chromeの開発者ツールのことです。 これはエンジニアの開発現場ではとてもよく使われているようで、エンジニア父ちゃんもよく使っています。 例えばブラウザ上でコードを編集して検証することなどができるので、修正箇所などがある時に役立つのですね。 またこの機能を使うことで、他の人が作ったサイトのコードを読んで、理解して、ちょっとコードを変えて、さらに理解を深めて、と学習にもなるのです。 このデベロッパーツールを使って、JavaScriptを学んでいこうと思います。 今回は、デベロッパーツールはどんなものなのかをご紹介いたします。

デベロッパーツールの開き方

まず開きたいサイトの余白部分で右クリックをし、”検証”をクリック。

すると右側にこんな画面が表示されます。

この出てきたものがデベロッパーツールです。 今回は見やすいように、このデベロッパーツールを少し拡大した状態で説明していきます。 拡大方法は、デベロッパーツールの淵の部分にカーソルを当て、⇔が出たところでドラッグすると拡大・縮小することができます。

見やすいように配置を変えられる

右側に出てきましたが、このデベロッパーツールを置く場所は変えることができます。 この赤い枠の中にある、︙をクリックしてみましょう。

そうすると、このような表示が出てきます。

このボタンの形が、さまざまな画面表示を示しています。 試しに右から二番目のマークをクリックしてみましょう。

このような上下に分かれた画面になります。

サイトの中の要素をみてみる

「このページのこの部分、どんなふうなコードで書いてるんだろう？」となった時に知るための方法です。 ここの矢印マークを押してみましょう。

サイトにカーソルを当てると、要素ごとに色が変わり、どのタグの中に何のタグがあるか入れ子構造がわかるように表示されます。

Elementsをみてみよう

h1タグにカーソルを当ててクリックしてみましょう。 デベロッパーツールのElementsではh1タグのところが青く表示されています。

「カーソル当てた部分はHTMLのここに書いてあるよー」と教えてくれているのですね。

Stylesをみてみよう

Elementsの下にあるStylesを見てみましょう。

ここでは「カーソルを当てた部分のCSSはこんな感じになってるよー」と教えてくれています。

呼び方いろいろ

ちなみに、このブログではデベロッパーツールと統一して呼んでいますが、開発者ツールや、DevTools (デブツール)、デバックツールなどといったいろいろな呼び方があります。

次回 : 使い方を知ろう！

今回は、デベロッパーツールの開き方、表示の方法、いろいろな呼び方をご紹介しました。 このデベロッパーツールは他ないも色々な使い方があり、エンジニア初心者の私はまだまだ知らないことだらけです。 次回のブログでは、このデベロッパーツールでコードを書き換えて自分で学習を深めていける方法をご紹介いたします。