Mac 上の Chrome、Safari、Firefox で要素を検査する方法

「巨大な脳のニューロンのように、私たちは今、インターネットに接続しています」 ~ スティーブン・ホーキング

そうですね、その通りですね。インターネットの力は無敵です！ Web には、何百万もの Web サイトと情報があふれています。調査のために特定の情報を探す必要がある場合でも、単にエンターテイメント ポータルをブラウジングしたり、ソーシャル メディアを掘り下げたりする場合でも、ウェブサイトは私たちをガジェットに釘付けにする主要な情報源として機能します。

画像ソース:YouTube

ウェブサイトの使用中に「要素を検査」機能について聞いたことがありますか? Inspect Element は、Web ページの HTML および CSS スクリプトを表示および編集できるブラウザ ツールに似ています。この機能はすべてのブラウザーで利用できますが、Chrome の場合は開発者モード、Safari の場合は Web Inspector、Firefox の場合は Inspect など、名前が異なる場合があります。

この投稿では、Safari、Google Chrome、Firefox などのさまざまなブラウザーで Mac の要素を検査する方法について学習します。始める前に、Inspect Element ツールの使用方法と、それが役立つ理由を簡単に理解しましょう。

「要素の検査」とは

Web サイトを右クリックすると、コンテキスト メニューに [要素の検査] 機能が表示されます。技術的には、Inspect Element ツールを使用すると、ユーザーはフロント エンドで Web ページを表示または変更できます。要素の検査ツールは、主にフロントエンド開発者が、ライブ コードを妨害することを恐れずに、特定の Web サイトのルック アンド フィールをいじるために使用します。特定の機会にウェブサイトの要素を「検査」するために「テスト」段階で使用されます。

Mac で要素を検査する方法

Inspect Element 機能は、Safari、Chrome、Firefox などの各 Web ブラウザに組み込まれています。ここでは、各 Web ブラウザーの Mac で Inspect Element を使用する方法について学習します。

サファリ:

始める前に、最初に、デフォルトでオンになっていない場合に備えて、Safari の「要素の検査」機能を有効にしましょう。

Safari を起動し、[環境設定] を開きます。

[詳細設定] タブに切り替えて、[メニュー バーに開発メニューを表示する] オプションをオンにします。

このオプションをチェックするとすぐに、新しい「現像」オプションがメニュー バーに追加されます。

Mac の要素を Safari ブラウザーで検査するには、次のことを行う必要があります。

オプション 1:右クリックによる方法

Mac で要素の検査ツールを使用する最も簡単な方法は、右クリックによる方法です。

ウェブページにアクセスし、空白の任意の場所を右クリックして、[検査] を選択します。

オプション 2:[開発] メニューから

新しく追加された [開発] メニューから要素の検査機能を使用することもできます。

Web サイトにアクセスし、上部のメニュー バーにある [開発] オプションをタップしてから、[Web インスペクタを表示] を選択します。

オプション 3:ショートカット キーを使用する

macOS で要素の検査ツールを使用する 3 つ目の方法は、ショートカット キーを使用することです。

Command + Option + I キーの組み合わせを押すだけで、Web ページの要素を検査できます。

Google Chrome:

Mac の要素を Chrome ブラウザで検査するには、4 つの方法があります。

オプション 1:右クリック方式

Mac で Chrome ブラウザを起動し、要素を検査する必要がある Web サイトにアクセスします。

任意の場所を右クリックし、[検査] を選択します。

オプション 2:メニュー バーから

Chrome を起動し、上部のメニュー バーにある [表示] オプションをタップします。

画像ソース:スーパー ユーザー

[開発者ツール]> [開発者]> [開発者ツール] に移動します。

Chrome で要素の検査を使用するには、[カスタマイズと制御] オプションを選択します。

オプション 3:キーボード ショートカットの使用

Command + Option + C オプションを押して、Chrome で [Inspect Element] ウィンドウを表示します。

オプション 4:設定経由

macOS で Google Chrome を起動し、右上隅にある 3 つのドットのアイコンをタップします。

[その他のツール] をタップし、[開発者ツール] を選択します。

Mozilla Firefox:

Firefox で要素の検査ツールを使用するには、次の簡単な手順に従ってください。

オプション 1:右クリック方式

Firefox を起動し、Web サイトにアクセスします。

画面の任意の場所を右クリックし、[検査] を選択します。

オプション 2:メニュー経由

Mac で Firefox を起動します。上部のメニュー バーにある [ツール] オプションをタップし、[Web 開発者] を選択します。 「検査」をタップします。

オプション 3:ショートカット キー

Firefox ブラウザで Mac の要素の検査を有効にするショートカットは、Command + Option + C キーの組み合わせを押すことで実現できます。

よくある質問:

Q.1. Mac で検査要素を開くにはどうすればよいですか?

画像ソース:Zapier

Mac で要素の検査ツールを開く最も簡単な方法の 1 つは、Web サイトを右クリックし、コンテキスト メニューから [検査] オプションを選択することです。

Q.2. Mac での Inspect Element のショートカットは何ですか?

Inspect Element を使用するためのショートカットはブラウザごとに異なります:

• Safari:Command + Option + I
• Chrome:コマンド + オプション + C
• Firefox:コマンド オプション + C

Q.3. Mac の Chrome で Inspect Element を開くにはどうすればよいですか?

Google Chrome で要素の検査を使用するには、Command + Option + C キーの組み合わせを押します。または、画面の任意の場所を右クリックし、[検査] を選択して [要素の検査] ウィンドウを起動することもできます。

Mac で要素を検査する方法に関する最後の言葉

これは、Safari、Chrome、Firefox など、さまざまな Web ブラウザーで macOS の要素の検査ツールを使用する方法に関するクイック ガイドです。 Facebook、Instagram、YouTube などのソーシャル メディアでフォローしてください。 Mac で要素の検査ツールをどのくらいの頻度で使用しますか?また、その目的は何ですか?あなたの考えを読者と自由に共有してください。