デベロッパーツールの表示方法

パソコン

MacのSafariでデベロッパーツール(Webインスペクタなど)を表示する方法

普段はChromeをメインブラウザにしているんですが、ここ最近はSafariもよく使うようになってきました。そんな時にSafariでもWebインスペクタやソースコードを表示したいと思ったんですが、表示方法がイマイチ分かりづらい印象だったのでメモがてらご紹介します。

Safariの環境設定から開発メニューを表示

デベロッパーツールを表示させるやり方はSafariの環境設定から可能です。

上部メニューから「Safari」→「環境設定…」を開きます。ショートカットキー「command + ,」でも開くことができます。

Safariの環境設定を開く

続いてタブメニューから「詳細」を選択して、下にある「メニューバーに”開発”メニューを表示」にチェックを入れます。

開発メニューを表示させる

すると、先ほどまで上部メニューになかった「開発」が表示されるようになりました。

開発

あとは開発メニューからWebインスペクタを表示させたりすることができます。WebインスペクタのショートカットキーはChromeと同じで「command + option + I」になります。

そんなわけで、SafariでもChromeみたいにデベロッパーツールを使いたいという方は、普段から開発メニューを表示させておくのがよさそうです。

関連記事

  1. パソコン

    MacのFinderのサイドバーの使わない項目を非表示にする

    MacのFinderの中にはあまり必要ない項目があったりしますよね。人…

  2. MacのChromeとSafariで使えるショートカットキー

    パソコン

    MacのChromeやSafariで使いたいショートカットキー4選

    Macで普段よく使うブラウザはChromeかSafariなんですが、ど…

  3. パソコン

    Macのシリアル番号を調べるための確認方法

    自分が使っているMacのシリアル番号を知りたい時ってありますよね。そん…

  4. HDRtist

    パソコン

    Macで超簡単にHDR写真(ハイダイナミックレンジ合成)が作れちゃうアプリ「HDRtist」

    Macで超簡単にHDR写真(ハイダイナミックレンジ合成)が作れちゃう便…

  5. ImageXY

    パソコン

    Macの画像リサイズのアプリ「ImageXY」で画質を高く設定するやり方

    Macの画像リサイズのアプリ「ImageXY」で画質を高く設定するやり…

  6. パソコン

    Macのメールアプリ「Airmail 2.0」を使ってみた!アカウントの設定など

    ここ最近自分のMacで使うアプリやサービスを色々と見直しているわけなの…

最近の記事

  1. スタバのドリップのホットのショート
  2. LE エルイー 6 PANEL CAP
  3. タリーズ ハウスブレンド
  4. BAG-TW1BKシリーズ

アーカイブ

PAGE TOP