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

パソコン

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

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

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

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

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

Safariの環境設定を開く

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

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

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

開発

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

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

関連記事

  1. ColorQuest

    パソコン

    Macのディスプレイ(画面)上のRGB値や色の名前を表示してくれるアプリ「ColorQuest」

    ColorQuestというMacのアプリがとても便利だったのでインスト…

  2. MacのFinderで画像ファイルのサイズを表示

    パソコン

    MacのFinderで画像ファイルの縦横サイズを常に表示させておく設定方法

    MacのFinder内にある画像ファイルはデフォルトでは何も表示されて…

  3. テキストエディットで検索した文字を置き換える

    パソコン

    Macのテキストエディットで検索した文字を置き換えるやり方

    前回、Macのテキストエディットで特定の文字を検索するやり方をご紹介し…

  4. パソコン

    MacのSparrowで未読メールだけを表示させる方法

    MacのメールクライアントはSparrowを使っています。で、未読メー…

  5. パソコン

    MacのAirmail 2で未読メールを先頭に表示させる方法

    MacのメールクライアントはAirmail 2というアプリを使用してい…

  6. パソコン

    ショートカットで簡単にアプリを起動できるMacアプリ「Launchar」を使ってみた

    ショートカットで簡単にアプリを検索&起動したり、気になる単語をGoog…

最近の記事

  1. NIB2600
  2. Anker PowerPort Atom PD 4
  3. USB-2H401BKN
  4. Dyson Pure Cool Me

アーカイブ

PAGE TOP