Chrome で要素を検査する方法

このwikiHowでは、デスクトップ版Google Chromeを使用してWebページ上の視覚要素のHTMLソースコードを検査する方法を説明します。

ステップ

パソコンでGoogle Chromeを開きます。これは、真ん中に青い点があるカラフルなボールに似たアイコンで、通常は Mac のアプリケーションフォルダーまたは Windows のスタートメニューにあります。
2 「縦に3つのドット」アイコンをクリックします。ブラウザウィンドウの右上隅、アドレスバーの右側にあります。ドロップダウンメニューが開きます。
3ドロップダウンメニューの[その他のツール] にマウスを移動します。サブメニューがポップアップ表示されます。
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/a8\/Inspect-Element-on-Chrome-Step-4.jpg\/v4-460px-Inspect-Element-on-Chrome-Step-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/a8\/Inspect-Element-on-Chrome-Step-4.jpg\/v4-728px-Inspect-Element-on-Chrome-Step-4.jpg","smallWidth":460,"smallHeight":342,"bigWidth":728,"bigHeight":541,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 4 [その他のツール] サブメニューで[開発者ツール]をクリックします。これにより、ブラウザウィンドウの右側にインスペクタバーが開きます。
- キーボードショートカットを使用してインスペクターを開くこともできます。 Mac でのショートカットは⌥ Option + ⌘ Cmd + I 、Windows ではCtrl + Alt + Iです。
5インスペクターで要素の上にマウスを置きます。インスペクター内の要素または行の上にマウスを移動すると、選択した Web ページ要素が強調表示されます。
6 Web ページ上で検査する要素を右クリックします。右クリックメニューがポップアップ表示されます。
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/0a\/Inspect-Element-on-Chrome-Step-7.jpg\/v4-460px-Inspect-Element-on-Chrome-Step-7.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/0a\/Inspect-Element-on-Chrome-Step-7.jpg\/v4-728px-Inspect-Element-on-Chrome-Step-7.jpg","smallWidth":460,"smallHeight":342,"bigWidth":728,"bigHeight":542,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 7ドロップダウンメニューで[検査] を選択します。これにより、インスペクターで選択した要素に直接ジャンプし、ソースコードが強調表示されます。
- インスペクターを手動で開く必要はありません。右クリックメニューで[検査]を選択すると、自動的にインスペクターが開きます。
広告する