Chrome Developer Tools(デベロッパーツール)の使い方

ここでは、操作対象の要素をデベロッパーツールを用いて選択し動作を行わせる方法を説明します。

 

①ウェブサイト上の任意の箇所を「右クリック」して「検証」を選択し、デベロッパーツールを起動します。

デベロッパーツールは以下のショートカットでも起動します。
Windows: 【 Ctrl + Shift + I 】 または【 F12 】
Mac: 【 Cmd + Option + I 】または【 F12 】

デベロッパーツール①.png

 

Elementタブに切り替えます。

デベロッパーツール②.png

 

③Select an element in the page to inspect it ボタンを押下します。

デベロッパーツール③.png

 

④要素を取得したい対象箇所をクリックします。

デベロッパーツール④.png

 

⑤背景に色がついた部分を「右クリック>Copy>Copy selector」を選択してコピーします。

デベロッパーツール⑤.png

 

⑥各アクション内「要素」赤枠A)にペーストします。

使いたい要素は左側のトグル(青枠B)をONにしておきます。

デベロッパーツール⑥.png

コメント

0件のコメント

サインインしてコメントを残してください。