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

パソコン

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. MemoZou

    パソコン

    画面にペタペタ付箋でメモれてEvernoteにも連携できるMacアプリ「MemoZou」

    MemoZouというMacアプリを使ってみました。画面にペタペタ付箋を…

  2. Airmail 2をMacのデフォルトメールにする

    パソコン

    Airmail 2をMacのデフォルトメールソフトに設定するやり方

    先日インストールした時からずっと気に入って使っているAirmail 2…

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

    パソコン

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

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

  4. パソコン

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

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

  5. パソコン

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

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

  6. パソコン

    Macで現在起動中のアプリをワンクリックで全て終了させるアプリ「QaLL」

    これはとても便利ですね。Macで現在起動中のアプリをボタン一つで全て終…

最近の記事

  1. WiMAX
  2. 甘柿
  3. 冬用のふとん
PAGE TOP