Airpods

MacのSafariでページのソースを表示する方法

MacのSafariでページのソースを表示する方法

Mac用Safari

Safariやその他のウェブブラウザでウェブページのソースコードを表示することは、ウェブを仕事や趣味として利用する多くの人にとって、ごく日常的な作業です。他のブラウザとは異なり、Safariでページのソースコードを表示するには、まずブラウザの開発者ツールセットを有効にして、ウェブページのソースコード表示機能にアクセスできるようにする必要があります。

このチュートリアルでは、Mac OSのSafariでウェブページのソースを表示する方法を説明します。これはSafariとMacOSのすべてのバージョンに適用されます。

MacのSafariでページのソースを表示する方法

MacOS の Safari で Web ページのソースを表示する方法は次のとおりです。

  1. まず、Safariメニューから「環境設定」を選択し、「詳細」に進み、開発者メニューを有効にするチェックボックスをオンにして、Safariの開発メニューを有効にします。
  2. MacのSafariで開発メニューを有効にすると、ページのソースを表示できます。

  3. 次に、Safariのウィンドウで、ソースを表示して検査したいWebページに移動します。
  4. 画面上部の「開発」メニューをプルダウンし、メニューオプションから「ページのソースを表示」を選択します。
  5. MacのSafariでページのソースを表示する方法

  6. ウェブページのソースは、Safariに組み込まれているウェブ開発ツールキットであるウェブインスペクタのソースセクションに表示されます。
  7. MacのSafariでページのソースを表示する

ページのソースを表示する以外にも、[開発] メニューを使用して、Javascript を無効にしたり、Safari のキャッシュをクリアするなど、ページに埋め込まれたファイルの検索など、上級ユーザーや開発者向けのさまざまな機能や機能を含む、Web に役立つその他の多くのトリックや開発者タスクを実行することもできます。

MacのSafariでキーボードショートカットを使ってページソースを表示する方法

Safari で開発メニューを有効にすると、キーボード ショートカットを使用して、Mac の Safari ブラウザで任意の Web ページ ソースをすばやく表示することもできます。

  1. ページソースを表示したいウェブページに移動します
  2. ページのソースを表示するには、Command + Option + U のキーボードの組み合わせを押します。

ページ ソースを表示するためのキーボード ショートカットを使用すると、[開発] メニューからアクセスする場合と同じように、Web インスペクター ツールが開きます。

Safari の上級ユーザーであれば、ブラウザを初めて起動したときに最初に行うことの 1 つが「開発」メニューを有効にすることでしょう。

ちなみに、Chrome ブラウザと Firefox ブラウザにも同様の Web 要素インスペクター機能がありますが、ここでは明らかに Mac 版 Safari に焦点を当てています。

Mac 版 Safari の開発者機能は iPhone や iPad では利用できません (少なくとも今のところは)。ただし、モバイル側でソース表示オプションを利用する場合は、この JavaScript トリックを使用して iOS および iPadOS バージョンの Safari でページ ソースを表示できます。

Safari でページのソースや開発者ツールセットを表示する際に役立つヒントやコツがあれば教えてください。ご意見、ヒント、ご経験をコメント欄で共有してください。