DevTools を使用してページを検査する方法

WBOY
リリース: 2024-08-19 20:31:50
オリジナル
534 人が閲覧しました

先ほど、DOM (ドキュメント オブジェクト モデル) について説明しました。

How to Inspect Pages Using DevTools

ブラウザがサーバーから返された HTML ドキュメントを読み取るときに、ドキュメント オブジェクト モデルを構築すると言いました。ここで、このドキュメント オブジェクト モデルが実際に動作している様子を見てみましょう。

How to Inspect Pages Using DevTools

もう一度、Chrome DevTools を使用します。

次: Web 開発に最適なフロントエンド フレームワーク

それでは、DevTools を開いてみましょう。

How to Inspect Pages Using DevTools

このセクションでは、要素タブを見ていきます。

ここの左側にあるのは、ドキュメント オブジェクト モデルです。

How to Inspect Pages Using DevTools

これらは、チュートリアルの前半で作成したのと同じ要素です。

HTML 要素、HEAD、BODY などがあります。ただし、Live Server によって挿入される追加要素がいくつかあります:

How to Inspect Pages Using DevTools

これらについては心配しないでください。これらは Live Server によってのみ使用されるため、ページが自動的にリロードされます。

これらの要素のいずれかの上にマウスを置くと、画面上で強調表示された要素が表示されます。

How to Inspect Pages Using DevTools

要素をクリックすると、右側にこの要素に適用されたスタイルが表示されます。

How to Inspect Pages Using DevTools

つまり、画像要素に対して定義されたこれらのスタイルを取得します。幅、境界半径など。

これらのスタイルを有効または無効にすることができます。

How to Inspect Pages Using DevTools

たとえば、WIDTH プロパティを無効にすると、画像が大きくなります。

How to Inspect Pages Using DevTools

それでは、元に戻しましょう。

How to Inspect Pages Using DevTools

その値を変更することもできます。したがって、たとえば 50px に設定できます。画像が小さくなりました。

How to Inspect Pages Using DevTools

多くのフロントエンド開発者は、必要な特定の外観を得るためにこれらのスタイルを試しています。正確なスタイルとその値を把握したら、それをコードに適用します。

さて、もう一つ。

How to Inspect Pages Using DevTools

ここでは、これらのスタイルが適用されている場所を確認できます。

つまり、index.html の 6 行目でこのリンクをクリックすると、そのスタイルを記述したコードの正確な行に移動します。

How to Inspect Pages Using DevTools

現在、[ソース] タブが表示されています。

On the Sources tab

「要素」タブに戻って、他の要素も同様に検査できます。

How to Inspect Pages Using DevTools

これが、DevTools を使用して要素を検査する基本です。これについては今後さらに詳しく説明する予定です。

コーディングを楽しんでください!
カール

以上がDevTools を使用してページを検査する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:dev.to
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!