ALPHACAST|アルファキャスト

Safariブラウザを開発モードで開く方法

Safariを開発モードで開く

ホームページやWEBシステムを構築する際、開発者にとって非常に便利な機能を提供してくれる「開発モード」の紹介です。
機能的にはFireFoxのFireBugプラグインや、IEの開発モードと同じことが出来るようになります。

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

開発モードは、標準ではOFFになっています。一般利用者にはまったく不要な項目だからです。
ただし、開発者には是が非でも欲しい機能です。意地でもプラグインを探したくなりますが、ご安心ください。標準で装備されています

表示手順は以下です(作業時間1分

Safariの環境設定を開く

初期状態のSafariのメニューです。

環境設定を開き、

一番右のタブの「詳細」を選びます。

メニューバーに”開発”メニューを表示

そして、画面下段の「メニューバーに”開発”メニューを表示」のチェックボックスをONへ変更。すると、以下のようにSafariメニューに”開発”項目が追加されます。

開発モードでできること

開発メニューを開くと以下の機能一覧が表示されます。
多彩な機能が実装されていますが、やはりよく使うのが、

  • Webインスペクタを表示
  • キャッシュを空にする

の2機能です。メニューですと以下の赤枠の機能ですね

また用途の高い機能には予めショートカットキーがアサインされています。
上手に使い分けましょう。

また、Webインスペクタは画面中で右クリックしたサブメニューからも起動できます。

Webインスペクタを起動してみる

おりゃ!これでAppleのホームページが丸裸!
技術を吸収するもよし、学ぶもよし。(いっしょか)

まとめ

やはりApple社は開発者にもフレンドリー!デベロッパーを見捨てません。
画面のレイアウトやJavascript、CSSの継承まですべてスムーズに確認出来ます。

なんというか、このままエディタ化してくれないかなぁ・・・

最後までご覧いただき有難うございました。

愛のおひねり




育毛剤

関連記事

  1. AppleWatchでMACのロック解除が出来なくなった(解決)…

  2. macのmojaveでアイコンを整理する方法

    最新OS「Mojave」の新機能。デスクトップアイコンをまとめて…

  3. マイクロソフトExcel

    Excelで簡単に日付と時刻を入力する方法(ショートカット活用)…

  4. 重複登録された連絡先情報をワンクリックでスッキリ整理する方法(m…

  5. 絵が描けなくてもiPad Proを使ってもいいじゃないかーGoo…

  6. MACからiTermを使ってエックスサーバにSSH接続する方法

おすすめ記事

  1. iPhoneやiPadで誤ってアプリケーションを購入した場合の返金方法

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

自然の中でホッと一息、、チャンネル登録お願いします

京都の自然や祭り、社寺仏閣の風景を撮影してお届けしています。仕事の一息にご覧頂ければうれしいです。


愛のおひねり

子供の頃、ファミコンより「MSX」に飛びついたマイノリティー。

当時、雑誌に掲載されていたソース(BASIC言語)を打ち込み無料でゲームを楽しみ悦に浸る。

某大手電機メーカーの情報システム部門勤務を経て独立。

現在はIT広告媒体全般を請け負う便利屋。

趣味:
ビリヤード、フルート、カラオケ、Amazonプライムビデオ観賞