Macで要素を検査する方法

この記事では、MacでWebサイトの要素を検査する方法について説明します。 SafariとGoogleChromeを使用してこれを行う方法について説明します。

Macで要素の検査機能をどのように使用しますか？

Safariを使用するときにMacで要素を検査する前に、ブラウザ内で開発者メニューを有効にする必要があります。 これは、スイッチをオンにする方法と、要素を検査するために何をするかを示しています。

Safariで要素の検査機能を使用する

1. Safariで、をクリックします サファリ > 環境設定.
   

   

2. クリック 高度.
   

   

3. クリック 開発メニューを表示 メニューバーでウィンドウを閉じます。
   

   

4. ウェブサイトを閲覧するときは、調べたい項目を右クリックしてください。
   

5. クリック 検査するエレメント.
   

   

6. これで、検査したWebサイトの背後にあるコードを表示できます。
   

   

MacのChromeで要素の検査機能を使用する

MacでSafariの代わりにChromeを使用する場合、機能を有効にする必要がないため、要素を表示するのがさらに簡単になります。 これが何をすべきかです。

1. Chromeで、ウェブサイトを閲覧します。
   

2. 検査する要素を右クリックします。
   

3. クリック 検査する.
   

   

4. Chromeのサイドウィンドウでコードを表示できるようになりました。

   

Macで検査できないのはなぜですか？

Macで要素を検査できない主な理由は、Safariで開発者メニューを有効にしていない場合です。 これがその方法のリマインダーです。

1. Safariで、をクリックします サファリ > 環境設定.
   

   

2. クリック 高度.
   

   

3. クリック 開発メニューを表示 メニューバーでウィンドウを閉じます。
   

   

要素を検査してWebサイトを変更する方法

Webサイトでコードを表示できるようにするだけでなく、InspectElementを使用してWebサイト要素を一時的に変更することもできます。 Safariを介してこれを行う方法は次のとおりです。

1. ウェブサイトを閲覧するときは、調べたい項目を右クリックしてください。
   

2. クリック 要素を検査する.
   

3. コード内のテキストをダブルクリックして、編集可能にします。
   

4. それを削除するか、新しいテキスト文字列を入力してください。
   

5. Enterをタップします。

6. コードは、あなたの利益のために一時的に変更されました。
   

なぜ要素の検査機能を使用したいのですか？

要素を検査できることは、いくつかの理由で役立ちます。

• その場でコードを変更するには. Webサイトの設計者は、Webサイトの状況を一時的に変更して、変更が状況にどのように影響するかを確認できます。
• コードを確認するには. デザイナーとマーケティング担当者の両方がコードをチェックして、Googleアナリティクスの詳細などが含まれていることを確認できます。
• サイトとは別に画像を表示するには. サイトで新しいタブまたはウィンドウで画像を開くことができない場合は、要素を表示すると可能になります。
• いじくり回す. Webページのコードを見ると、何を見ているのかを理解するのに役立ちます。これにより、現在のサイトで何が起こっているのか、何が起こっているのかという謎を取り除くことができます。 アプライアンスを分解してどのように機能するかを確認するようなものと考えてください。ただし、この場合、失うネジはありません。