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

パソコン

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

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

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

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

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

Safariの環境設定を開く

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

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

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

開発

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

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

関連記事

  1. パソコン

    Bywordでフルスクリーンにするためのショートカットキー

    ここ最近BywordというMacアプリでブログを書いています。Mark…

  2. パソコン

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

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

  3. パソコン

    Macでスクリーンショットの保存形式をJPEGにするやり方

    MacのスクリーンショットはデフォルトではPNG形式で保存されるんです…

  4. Macの複合キーを有効

    パソコン

    Macの複合キーを有効にしてショートカットなどを使いやすくする

    Macの複合キーの有効化が地味に便利だったのでご紹介します。システム環…

  5. EXIFPurge

    パソコン

    MacでExif情報をサクッと削減できるアプリ「EXIFPurge」

    MacでiPhoneやデジカメで撮った写真に埋め込まれているExif情…

  6. パソコン

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

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

最近の記事

  1. KMC-80BK
  2. 味噌ラーメン〜旨辛にんにく味噌〜
  3. STP-XH70
  4. 久保田城

Instagram始めました

Facebookページ

PAGE TOP