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

パソコン

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

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

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

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

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

Safariの環境設定を開く

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

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

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

開発

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

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

関連記事

  1. Macで半角カタカナを入力

    パソコン

    Macで半角カタカナを入力するための設定方法

    Macを使っていて、半角カタカナを入力する必要があったので調べてみまし…

  2. パソコン

    Macのあらゆるアプリのショートカットの一覧を表示させることができる「CheatSheet」

    これめちゃくちゃ便利ですね。なんで今まで入れてなかったんだろう。Mac…

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

    パソコン

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

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

  4. Clipy

    パソコン

    スニペットも登録できるMacの人気クリップボードアプリ「Clipy」

    Macのクリップボードアプリ「Clipy」をインストールしてみました。…

  5. no-image

    パソコン

    Macでデスクトップ毎にアプリを割り当てる(固定する)設定方法

    Macには複数のデスクトップが用意されていますが、特定のアプリを起動し…

  6. ColorQuest

    パソコン

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

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

最近の記事

  1. TAP-F27-2KP
  2. M32ミニ
  3. CITTA TT5.0
  4. Kindle Oasis

アーカイブ

PAGE TOP