ALPHACAST|アルファキャスト

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

Safariを開発モードで開く

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

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

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

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

Safariの環境設定を開く

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

環境設定を開き、

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

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

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

開発モードでできること

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

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

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

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

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

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

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

まとめ

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

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

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

愛のおひねり




育毛剤

関連記事

  1. AppleWatch5バッテリー

    比較検証!AppleWatch Series 5のバッテリー持ち…

  2. iPhoneカレンダーで過去の予定が消えてしまった?解決!

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

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

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

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

  6. VoiceOverを切る手順

    macがしゃべり出す「VoiceOver」を切る!うるせぇよ

おすすめ記事

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

コメント

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

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

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

想定年利5%の全自動型運用

年利5%の不動産運用

人気の記事

  1. PyCharm をアップデートしたら日本語化が出来ない!解決!2020年5月のこと、PyChar…
  2. AppleWatch5バッテリー
    AppleWatch Series 5のバッテリー持ちをモード別に比較した結果!AppleWat…
  3. GSOMIA(じーそみあ)とはこの「GSOMIA」という言葉だが、「General Securi…
  4. ubuntu
    クーロン設定方法と記載方法かんたん紹介クーロンを利用して仕事を自動化しましょう。エディタ起動…
  5. djangologo
    'bootstrap4' is not a registered tag librarydjan…
  6. macでポート開放する簡単な方法Pythonでシステム開発しているとき、ポートが既に使用されてい…

愛のおひねり

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

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

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

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

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