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

パソコン

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

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

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

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

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

Safariの環境設定を開く

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

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

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

開発

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

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

JQuery lightSlider軽量でレスポンシブなサムネイルナビ付きのスライダー「JQuery lightSlider」前のページ

自分のインスタグラムの画像を表示できるjQueryプラグイン「Pongstagr.am」次のページPongstagr.am

関連記事

  1. Kakumaru Punch

    パソコン

    Macで角丸画像を瞬時に作成できるアプリ「Kakumaru Punch」

    Macで画像を簡単に角丸にできるアプリが便利だったのでご紹介します。K…

  2. パソコン

    Macのカレンダーアプリに日本の祝日を追加する設定方法

    Macのカレンダーアプリにはデフォルトでは日本の祝日が入っていません。…

  3. ImageXY

    パソコン

    Macで複数の画像を一括でリサイズできるアプリ「ImageXY」

    Macで複数の画像をワンクリックで一括リサイズできる超便利なアプリ「I…

  4. Shazam for Mac

    パソコン

    周囲から流れる音楽の曲名を教えてくれるMac版の「Shazam」

    iPhoneでよく利用していたアプリ「Shazam」のMac版を発見し…

  5. パソコン

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

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

  6. 同時にサイズ変更

    パソコン

    Macのプレビューで複数の画像ファイルを同時にサイズ変更するやり方

    Macのプレビューで複数の画像ファイルを同時にサイズ変更するやり方が便…

最近の記事

  1. オータムスイートポテトフラペチーノ
  2. 紅葉
  3. ナノケア EH-NA0E
  4. スターバックス コロンビア サンタンデール

アーカイブ

PAGE TOP