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

パソコン

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. パソコン

    Macに入っているApacheでバーチャルホストを設定してみる

    Macには標準でApacheが入っているので、それを活用してバーチャル…

  2. ImageXY

    パソコン

    Macの画像リサイズのアプリ「ImageXY」で画質を高く設定するやり方

    Macの画像リサイズのアプリ「ImageXY」で画質を高く設定するやり…

  3. パソコン

    VMware Fusion 4でWindows7をインストールしてみた

    前からすごく気になってたVMware Fusion 4をようやく試すこ…

  4. ImageXY

    パソコン

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

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

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

    パソコン

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

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

  6. 明るさ自動調整を解除する方法

    パソコン

    Macのディスプレイ画面の明るさ自動調整を解除する方法

    Macを使っていてディスプレイ画面の明るさが自動調整される時ってありま…

最近の記事

  1. ペットボトルホルスター
  2. SRS-XB43
  3. Nu:kin

アーカイブ

PAGE TOP