Mac の Safari でデベロッパーツールである【開発】メニューを有効にする方法

macbookを操作する女性
Mac User

Safari ってデベロッパーモードはないのかな…。

Safari にもデベロッパーツールがありますが、デフォルトでは隠れています。

エンジニアやブログなどのウェブサイト管理者で、わざわざデベロッパーツール欲しさに他のブラウザを使っていませんか。

それ、Safari にもあります。ということで、今回は次の3つについて解説します。

  • Safari 開発メニューの概要
  • 開発メニューを有効にする方法
  • 開発メニューにある便利な機能

この記事を読むことで、他のブラウザを使う必要性がなくなるかもしれませんよ。

目次

Safari の【開発】メニューとは

Safari の【開発】メニューとは、さまざまな検証ツール(デベロッパーツール)にアクセスできるメニューのことです。Google Chrome に搭載されているデベロッパーツールと同じです。

開発メニューをオンにすると、ページソースなどを確認できます。そのため、エンジニアはもちろんのこと、ブロガーなどのウェブサイト管理者にとっても重要なツールになります。

Safari で【開発】メニューを有効にする方法

Safari のデベロッパーツールは、【開発】というメニューから利用しますが、デフォルトではオフになっているため、以下の手順で有効にします。

  1. Safari を起動し、環境設定をクリックします。
  2. 【詳細】をクリックして、【メニューバーに“開発”メニューを表示】にチェックを入れます。

詳しくみていきます。

STEP
Safari をクリックします。
Dockの中のSafari
STEP
環境設定をクリックします。
MacのSafariの環境設定
STEP
【詳細】タブの【メニューバーに“開発”メニューを表示】にチェックを入れます。
MacのSafari環境設定の詳細タブ

開発メニューをオフにしたい場合は、同じ手順でチェックを外してください。

一般ユーザーにも役立つ機能

デベロッパーと聞くと、エンジニアなど専門的な技術者という印象を持つかもしれませんが、【開発】メニューには、一般ユーザーにも役立つ機能がいくつかあります。

ページをこのアプリケーションで開く

Mac にインストールした別のブラウザでウェブページを開く機能です。

Safariの「ページをアプリケーションで開く」機能

Safari で正しく動作しないウェブページのときなどに使います。

ユーザーエージェント

相手サイト側に、別バージョンのブラウザからアクセスしているようにみせることができる機能です。

Safari開発メニューのユーザーエージェント

Safari のバージョンは、OS と連動しているため、常に最新バージョンのものを利用していると思います。しかし、サイトによっては、新しいバージョンの Safari に対応していないことがまれにあります。

そんなときは、この機能を使って一時的に前のバージョンのブラウザからアクセスしているかのようにみせることができます。

このようなことは、決してあってはならないことですが、うまくサイトにアクセスできないときは、この機能を使うと解決する場合もあります。

キャッシュを空にする

Safari に保持されたキャッシュを削除する機能です。

MacのSafariのキャッシュを空にする

キャッシュは、一度訪れたことがあるサイトに再度アクセスしたさいに、ページがはやくスムーズに表示されるように一時的に保存されたデータ群のことです。

ネットを快適に利用するために必要なデータではありますが、キャッシュが古かったり、破損していたりすると、逆に不具合の原因になることがあります。そんなときは、この機能を使ってキャッシュを削除することができるのです。

キャッシュの削除は、Safari の高速化にもつながりますので、古いパソコンを使っている場合や、メモリの少ないパソコンなどを使っている場合は、一定期間が経過したらキャッシュを削除するようにしてもいいかもしれません。

【開発】メニューの便利な機能

ここからは、開発者向けの便利な機能をみていきます。用途は人によってさまざまだと思いますので、私がよく使っている機能をご紹介します。

レスポンシブ・デザイン・モードにする

パソコンだけでなく、スマホやタブレットでの見た目をチェックするときに使っています。

Safariのレスポンシブデザインモード

【開発】メニューのなかで、もっともよく使う機能のひとつです。

さまざまなデバイスサイズに切り替えられますので、小さめのサイズのスマホや、Google Chrome や Firefox など他社製のブラウザからの見た目もチェックできます。

【開発】メニューから【レスポンシブ・デザイン・モードを終了する】をクリックすれば、もとのパソコン表示に戻ります。

Web インスペクタを表示

現在のページの下部にウェブインスペクタが開きます。ウェブインスペクタを使用すると、ページの作成にかかった要素を調べることができます。

Safariのwebインスペクタ

右クリックから【要素の詳細を表示】をクリックしても、同じ画面が開きます。

Macの右クリックメニュー

自サイトの CSS の変更や、他サイトの CSS をみるときに使っています。

ページのソースを表示

現在のページのHTMLコードが表示されます。

Safariの要素の検証画面

先ほどの、ウェブインスペクタからもタブを切り替えることで同じ画面がみれますので、ここをクリックすることはほとんどありません。

他にも多数

ブロガーである私がよく使う機能をピックアップしましたが、他にもさまざまな機能があります。

MacのSafariの開発メニュー一覧

ぜひ触ってみてください。アプリやアドオンで使っていた機能が、ここにあるかもしれません。

まとめ

Safari の【開発】メニューに関することは、以上です。

デフォルトでは非表示になっているため、デベロッパーツールがないと勘違いして他のブラウザを利用しているユーザーも多いと聞きます。

クリエーター向け要素が強い Apple ならではの機能が Safari にはありますので、ぜひみてみてください。

それでは、また。
See you soon!

macbookを操作する女性

この記事が気に入ったら
いいねしてね!

よかったらシェアしてね!
  • URLをコピーしました!
目次