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

パソコン

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のテキストエディットで文字数カウント

    パソコン

    Macのテキストエディットで文字数カウントを実行させる設定方法(AppleScript)

    Macのテキストエディットで文章を書いている時に文字数を教えてしてほし…

  2. Relax Melodies

    パソコン

    48種類のリラックスサウンドで睡眠時や作業中のBGMに最適なMacアプリ「Relax Melodie…

    睡眠時にリラックスしたサウンドで心地よい眠りについたり、作業中に好きな…

  3. パソコン

    Macの起動時にアプリケーションを復元させない方法

    Macの起動時にアプリケーションを復元させない方法です。アプリのウィン…

  4. Macのスリープモードをさせない設定

    パソコン

    Macのスリープモードをさせないように変更する設定方法

    Macのスリープモードはパソコンを使っていないと自動でスリープしてしま…

  5. パソコン

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

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

  6. パソコン

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

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

最近の記事

  1. サーモンアボカドサラダラップとドリップ
  2. 猿田彦フレンチ
  3. Zarigani Curry 挽肉のカレー ゴーダチーズとピクルスを添えて
  4. ビジネスホテル
  5. ドリップコーヒー

アーカイブ

PAGE TOP