コンテンツ
AppleのWebブラウザーで開発者ツールにアクセスする
WebサイトとWebアプリがさまざまなデバイスとプラットフォームをサポートすることを確認することは、Web開発者にとって重要なタスクです。 AppleのSafari Webブラウザーにはレスポンシブデザインモードが含まれており、さまざまな画面解像度で、iPad、iPhone、iPod touchのさまざまなビルドでサイトがどのようにレンダリングされるかをプレビューできます。
この記事の手順は、macOSのSafari 13に適用されます。レスポンシブデザインモードは、Windowsバージョンでは使用できません。
Safariでレスポンシブデザインモードを有効にする方法
Safariの開発者ツールとレスポンシブデザインモードを有効にするには：
-
選択する サファリ > 環境設定 Safariツールバー。
キーボードショートカットを使用することもできます コマンド+コンマ （、） [設定]メニューにアクセスします。
-
[設定]メニューで、 高度な タブの横にあるチェックボックスをオンにします メニューバーに[開発]メニューを表示する。画面上部のSafariツールバーに新しいオプションが追加されました。
-
選択する 発展させる > レスポンシブデザインモードに入る Safariツールバー。
キーボードショートカットを使用することもできます オプション+コマンド+R レスポンシブデザインモードに入ります。
-
アクティブなWebページがレスポンシブデザインモードで表示されます。ページの上部で、iOSデバイスまたは画面解像度を選択して、ページがどのようにレンダリングされるかを確認します。
解像度アイコンのすぐ上のドロップダウンメニューを使用して、さまざまなユーザーエージェントをシミュレートするようにSafariに指示することもできます。
Safari開発者ツール
レスポンシブデザインモードに加えて、Safariの[開発]メニューには、次のような多くの便利なオプションが用意されています。
- でページを開く：現在Macにインストールされている他のブラウザでアクティブなWebページを開きます。
- ユーザーエージェント：ユーザーエージェントを変更すると、ウェブサーバーがブラウザをSafari以外のものとして識別します。
- Connect Web Inspector：CSS情報やDOMメトリックなど、Webページのすべてのリソースを表示します。
- エラーコンソールを表示：JavaScript、HTML、およびXMLのエラーと警告を表示します。
- ページのソースを表示：アクティブなWebページのソースコードを表示および検索します。
- ページリソースを表示：現在のページのドキュメント、スクリプト、CSS、およびその他のリソースを表示します。
- スニペットエディタを表示：コードのフラグメントを編集して実行します。この機能は、テストの観点から非常に役立ちます。
- 拡張ビルダーを表示：それに応じてコードをパッケージ化し、メタデータを追加して、独自のSafari拡張機能を構築します。
- タイムライン記録を開始：WebKit Inspector内のネットワークリクエスト、JavaScript実行、ページレンダリング、その他のイベントを記録します。
- 空のキャッシュ：標準のWebサイトキャッシュファイルだけでなく、Safari内に保存されているすべてのキャッシュを削除します。
- キャッシュを無効にする：キャッシュを無効にすると、ローカルキャッシュを使用するのではなく、アクセス要求が行われるたびにWebサイトからリソースがダウンロードされます。
- スマート検索フィールドからのJavaScriptを許可する：セキュリティ上の理由からデフォルトで無効になっているこの機能を使用すると、SafariのアドレスバーにJavaScriptを含むURLを入力できます。
- SHA-1証明書を安全でないものとして扱う：セキュアハッシュアルゴリズムの略で、SHA-1ハッシュ関数は当初考えられていたよりも安全性が低いことが証明されているため、Safariにこのオプションが追加されました。
