MacOS：SafariでWeb Inspectorを有効にする

Apple SafariでmacOS SierraのWebページのソースコードを表示したい場合は、次の手順でSafari Web Inspectorツールを有効にする必要があります。

AppleやGoogleなどのWebブラウザの開発者は、基盤となるコードを表示するためのツールを提供しています。開発者は主に、サーバーの実際のコードに影響を与えることなく、ライブウェブサイトで行った変更をデバッグし視覚化するためにこのツールを使用します。しかし、このツールは今や、個人的または専門的な目的でライブウェブサイトを編集したいコンテンツクリエーターやテクノロジーに精通したインターネットユーザーの間で人気となっています。あなたもその一人なら、Safari Web Inspectorと要素を検査する方法についてすべてを知るために記事を最後までお読みください。

目次

• 1 Safari Web Inspectorとは？
• 2 Safari 10以降でのSafari Web Inspectorの有効化方法
• 3 macOSでのSafari Web Inspectorの使用方法
• 4 古いバージョンのmacOSでのSafari Web Inspectorの開き方
  • 4.1 Safari Web Inspector：最終的な言葉

Safari Web Inspectorとは？

Web Inspectorは、Appleが世界中のWebサイトおよびアプリ開発者に提供している開発ツールの一部です。このツールは、macOSおよびiOSデバイスの両方で使用可能です。開発者は、オンラインプロパティのピークパフォーマンスを得るために、Webサイトを簡単に変更、最適化、デバッグできます。

SafariのWeb InspectorツールはほとんどのWebサイトリソースを1つの統一されたインターフェースにまとめます。このツールはまた、リソースとそのパラメータを専用のタブに分けているため、あまりにも多くのコードやオプションに圧倒されることはありません。Web Inspectorは、Webサイトのメモリのタイムラインビューも提供し、メモリを簡単にデバッグできます。さらに、開発者として、機能的なWebサイトを開発するために必要な150以上の人気CSSプロパティを調整および最適化できます。

Web Inspectorツールでは、次のタブがWebサイトリソースに表示されます：

• 要素
• コンソール
• ソース
• ネットワーク
• タイムライン
• ストレージ
• グラフィックス
• レイヤー
• 監査

Safari 10以降でのSafari Web Inspectorの有効化方法

デフォルトでは、Apple MacはSafariのWeb Inspectorを無効にしています。これは、Webブラウザのユーザーインターフェース（UI）に不要な混乱を避けるためです。ただし、開発者、コンテンツクリエーター、専門的なMacユーザーの場合は、以下の手順に従って機能を有効にすることができます：

• MacBookまたはiMacでSafariアプリを開きます。
• ブラウザをクリックして、MacツールバーにSafariアイコンが表示されることを確認します。

• 左上のSafariをクリックし、環境設定を選択します。
• または、ホットキーCommand + ,を使用して環境設定メニューを表示できます。
• 環境設定メニュー内では、一般タブにいる必要があります。

• 高度なタブに移動します。
• プロキシオプションのすぐ下にあるメニューバーに開発メニューを表示のチェックボックスを確認してください。チェックボックスにチェックを入れます。

• これで、Safariの開発メニューがMacツールバーに表示されるようになります。

これで、MacブラウザSafariでWeb Inspector機能を有効にする方法です。手順は、最近のmacOS版Venturaや、Monterey、Big Sur、Catalinaなどのそれ以前のバージョンでもほぼ同様です。

関連記事： Html 4.01

ここまでで、Mac SafariアプリでWeb Inspector機能を取得する方法を学びました。以下に、ライブWebサイトでの使用方法を説明します：

macOSでのSafari Web Inspectorの使用方法

以下に、Web開発、コンテンツ作成、またはその他の目的でWeb Inspectorツールを呼び出す手順を示します。このアーティクルでは、macOS Montereyオペレーティングシステムを使用する手順を示しています。ただし、手順はmacOS JaguarからVentureまでかなり似ています。

• Safariを開き、検査したい任意のWebサイトにアクセスします。
• Web Inspectorツールを使用して、Webサイトの基盤となるHTML/CSSコードを検査または変更する方法は2つあります。これらは：
  • 開発 > Web Inspectorを表示。
  • 右クリック > 要素を検査。
• 最初の方法を使用するには、SafariブラウザのMacツールバーの開発メニューに移動します。

• ポップアップするコンテキストメニューでWeb Inspectorを表示をクリックします。このアクションのホットキーはOption + Command + Iです。

• これにより、Webブラウザの下半分にWeb Inspectorツールが開きます。表示されるコードは、アクセスしたURLまたはWebページ全体のものです。
• Webページ全体のコードを開かずに特定の要素の基盤となるコードを視覚化したい場合は、検査したい要素を選択します。

• 右クリックして、開いたコンテキストメニューで要素を検査を選択します。
• SafariのWeb Inspectorが開きます。

• しかし、この場合、Safariはあなたを監査している要素の基盤となるHTMLまたはCSSコードに直接案内します。
• このツールでは、検査しているWebページ要素のHTMLおよびCSSコードが表示されます。

関連記事： TechnipagesがCSSを説明

古いバージョンのmacOSでのSafari Web Inspectorの開き方

MacがJaguarより古い場合で、Web Inspectorツールを使用する必要があるとしましょう。上記の手順がそのMacに見つからない場合、Web Inspectorを有効にするための簡単なコードを実行できます。方法は次の通りです：

• アプリケーションを開き、ユーティリティフォルダに移動します。
• ユーティリティ内にターミナルが見つかるはずです。これはmacOSコンピュータのコマンドプロンプトです。
• ターミナルコマンドラインインターフェースを立ち上げ、次の簡単なコマンドを入力します：

defaults write com.apple.Safari WebKitDeveloperExtras -bool true

• Returnを押してコマンドを実行します。
• その後、SafariでWebページを開き、ページのどこでも右クリックするか、マウスボタンを押し続けてコンテキストメニューを表示させます。
• そこで、要素を検査オプションをクリックして、Webサイトの基盤となるCSSおよびHTMLコードを表示します。

Safari Web Inspector：最終的な言葉

これが、SafariでWeb Inspectorを簡単に有効にする方法です。手順を自分で行い、数分で開発やコンテンツ作成を始めることができます。新しいmacOS版と旧版の両方でSafariのInspector Elementを有効にする方法を学びました。他にWeb Inspectorを取得して使用する方法を見逃した場合は、以下にコメントを残してお知らせください。

次は、iPadのための最高のコーディングアプリです。