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

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

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

そうですね、それは本当ですよね。インターネットの力は比類のないものです!ウェブには何百万ものウェブサイトと情報が溢れています。調査のために特定の情報を探す必要がある場合でも、単にエンターテイメント ポータルを閲覧する場合でも、ソーシャル メディアを調べる場合でも、Web サイトは私たちがガジェットに釘付けになるための主要な情報源として機能します。

画像ソース: YouTube

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

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

「要素の検査」とは何ですか?

右クリックするたびにどの Web サイトでも、コンテキスト メニューに「要素の検査」機能が表示されます。技術的に言えば、要素の検査ツールを使用すると、ユーザーはフロントエンドで Web ページを表示または変更できます。 Inspect Element ツールは、ライブ コードの妨害を恐れることなく、特定の Web サイトの外観や操作性を試すために、主にフロントエンド開発者によって使用されます。これは、特定の機会に Web サイトの要素を「検査」するために「テスト」フェーズで使用されます。

Mac で要素を検査する方法

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

Safari:

始める前に、まず、Web ブラウザーで「Inspect Element」機能を有効にしましょう。デフォルトで Safari がオンになっていない場合は、Safari を起動します。

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

「詳細」タブに切り替えて、オンにチェックを入れます。 「メニューバーに開発メニューを表示」オプション。

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

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

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

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

Web ページにアクセスし、右クリックします。空白の任意の場所で、「検査」を選択します。

オプション 2: 「開発」メニュー経由

要素の検査機能は、

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

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

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

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

Google Chrome:

Mac 上の Chrome で要素を検査するには 4 つの方法があります。

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

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

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

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

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

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

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

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

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

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

Chrome で「要素の検査」ウィンドウを表示するには、Command + Option + C オプションを押します。

オプション 4: 設定経由

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

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

Mozilla Firefox:

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

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

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

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

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

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

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

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

FAQ:

Q.1。どのようにして o Mac で検査要素を開きますか?

画像ソース: Zapier

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

Q.2. Mac での要素の検査のショートカットは何ですか?

要素の検査を使用するショートカットはブラウザごとに異なります。

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

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

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

ここでは、使用方法に関するクイックガイドを示しました。 Safari、Chrome、Firefox などのさまざまな Web ブラウザ上の macOS 上の要素の検査ツール。ソーシャルメディアで私たちをフォローしてください – 。 Mac の要素検査ツールをどのくらいの頻度で使用しますか?またその目的は何ですか?ぜひ読者とご意見を共有してください。

読み取り: 0

yodax