SafariのWebインスペクターでは、MacOSに関するWebページを調べることができます。これは、Web開発者と好奇心の強いユーザーにとっても便利なツールです。Web検査官を使用するには、Safariの設定でそれをオンにする必要があります。
有効になると、Web InspectorはWebページの詳細の世界を開きます。ページを構成するHTML、CSS、およびJavaScriptを見ることができます。このツールは、バグを見つけ、デザインをテストし、Webサイトの仕組みを学ぶのに役立ちます。
Web検査官は使いやすいです。 Webページの任意の部分を右クリックして、「要素を検査する」を選択します。すべてのページのコードで新しいウィンドウがポップアップします。物事を変更して、ページですぐに結果を見ることができます。
開発メニューを開きます
Safariの開発者ツールを活用するには、まず「開発」メニューをアクティブにする必要があります。に移動しますサファリ>好み>高度な「メニューバーのメニューの開発を表示」の横にあるボックスを確認してください。これにより、Web開発ワークフローを強化するために設計された一連のツールのロックが解除されます。
また読む：解決済み：WebページはSafariで奇妙に見えます
1. Safariメニューで設定をクリックします
2。[詳細]タブをクリックします
3. Web開発者の機能の表示を確認します
4.開発メニューが表示されます
正確に要素を検査します
「要素の検査」ツールは、Webページの構造を理解するためのゲートウェイです。任意の要素を右クリックして、「要素を検査する」を選択します。パネルが表示され、HTML、CSS、およびその要素の外観と動作を担当するJavaScriptコードが表示されます。
JavaScriptコードのデバッグ
SafariのJavaScriptコンソールは、コードのエラーを識別および修正するために不可欠です。コンソールを使用してメッセージを記録し、変数を検査し、コードの実行を踏み出します。開発メニューから、または押すことでコンソールにアクセスできますオプション +コマンド + c。
ネットワークアクティビティの監視
Safariの開発者ツールのネットワークタブは、Webページによって作成されたすべてのネットワークリクエストの詳細なビューを提供します。これにより、パフォーマンスのボトルネックを診断し、負荷の遅いリソースを特定し、ウェブサイトのロード速度を最適化するのに役立ちます。
応答性のある設計テスト
Safariのレスポンシブデザインモードを使用すると、さまざまな画面サイズとデバイスをシミュレートして、さまざまなプラットフォームでWebサイトの外観と機能を確保できます。この機能は、さまざまな画面解像度に適応するレスポンシブWebサイトを作成するために非常に貴重です。
追加の開発者ツール
| 道具 | 説明 |
|---|---|
| ストレージ | Cookie、ローカルストレージ、セッションストレージに保存されているWebサイトデータを検査および管理します。 |
| タイムライン | ウェブサイトのレンダリング、スクリプト、レイアウトプロセスのパフォーマンスを分析します。 |
| レイヤー | Webページのレイヤーを視覚化し、レンダリングの問題を特定します。 |
| リソース | Webページで使用されるリソース（画像、フォントなど）を表示および編集します。 |
| コンソール | JavaScriptのログ、警告、エラーを表示します。 |
| 検索 | WebページのHTML、CSS、およびJavaScriptコードを検索します。 |
| デバッガ | JavaScriptコードを介してステップ、ブレークポイントを設定し、変数を検査します。 |
| ネットワーク | 要求や応答を含むネットワークアクティビティを監視します。 |
| 要素 | WebページのHTMLとCSSを表示および編集します。 |
| レスポンシブデザイン | さまざまな画面サイズとデバイスをシミュレートします。 |
| パフォーマンス | ウェブサイトのパフォーマンスを分析し、改善のための領域を特定します。 |
| メモリ | メモリの使用量を監視し、メモリリークを検出します。 |
| 安全 | 証明書や接続情報を含むWebサイトのセキュリティの詳細を表示します。 |
| 監査 | ウェブサイトのアクセシビリティ、パフォーマンス、SEOを改善するための提案を入手してください。 |
| Webインスペクター拡張機能 | カスタム拡張機能を使用して、Safariの開発者ツールの機能を拡張します。 |
キーテイクアウト
- SafariのWeb検査官は、設定でオンにする必要があります
- Web Inspectorは、Webページの背後にあるコードを表示します
- Web Inspectorを使用して、Webサイトについてテストして学ぶことができます
SafariでWeb検査官を有効にします
Web Inspectorは、SafariでWebページを調べるための強力なツールです。コードの問題とデバッグの問題を表示できます。
キーバインディングは次のとおりです。⌘⌥i
メニューバーにメニューの開発を表示します
Web Inspectorを使用するには、最初に開発メニューをオンにする必要があります。 Safariを開き、トップメニューバーの設定をクリックします。 [詳細]タブをクリックします。 「メニューバーのメニューの開発を表示」の横にあるボックスをチェックしてください。
開発メニューは、Safariのメニューバーに表示されます。このメニューには、Web開発者にとって多くの便利なオプションがあります。
Web検査官の機能へのアクセス
開発メニューが表示されたら、Web Inspectorを開くことができます。確認するWebページに移動します。 [開発]> [[メニュー]バーのWebインスペクターの表示]をクリックします。キーボードショートカットオプション +コマンド + Iを使用することもできます。
Web検査官を開く別の方法は、Webページの任意の部分を右クリックして、「要素を検査する」を選択することです。これにより、検査官が開き、その特定の要素に焦点を当てます。
Web Inspectorには、さまざまなツールを備えたいくつかのタブがあります。 [要素]タブは、ページのHTML構造を示しています。コンソールタブには、JavaScriptの出力とエラーが表示されます。他のタブは、ネットワークのアクティビティ、ストレージなどを確認するのに役立ちます。
開発のためにWeb検査官を利用します
Web Inspectorは、MacOSでSafariを使用している開発者にとって強力なツールです。これにより、ブラウザでWebページコードを見て変更できます。
HTMLおよびCSSの検査と変更
Web Inspectorには、ページのHTMLとCSSが表示されます。要素がどのようにネストされ、スタイル化されているかを見ることができます。要素をクリックして詳細を表示します。 CSSプロパティをライブ編集して、変更をテストできます。これにより、レイアウトの問題を迅速に修正できます。
[要素]タブには、ページ構造が表示されます。 HTMLタグと属性が表示されます。セクションを拡張および崩壊させて、特定の部分に焦点を当てることができます。テキストをダブルクリックして、コンテンツを直接編集します。
スタイルペインには、選択した要素のCSSルールが表示されます。ルールをオンとオフにしたり、値を変更したりできます。アイデアをすばやくテストするために、新しいスタイルを追加できます。これらの変更は、ページをリロードすると一時的な変更とリセットされます。
デバッグとトラブルシューティング
Web検査官は、コードの問題を見つけて修正するのに役立ちます。コンソールタブには、エラーの警告とログが表示されます。ここでJavaScriptコマンドを実行して、アイデアをテストできます。
[ソース]タブを使用すると、コードにブレークポイントを設定できます。これにより、実行が一時停止しているため、行ごとにステップスルーできます。変数を視聴し、コードの実行時に値がどのように変化するかを確認できます。
ネットワークタブには、ページでロードされたすべてのリソースが表示されます。これには、画像スクリプトとデータファイルが含まれます。ロード時間とファイルサイズを確認できます。これは、パフォーマンスの問題を見つけるのに役立ちます。
高度なWebインスペクターツール
Web Inspectorには、より深い分析のためのツールがあります。ストレージタブには、Cookieやローカルストレージなどのサイトによって保存されたデータが表示されます。このデータを表示および編集できます。
タイムラインタブは、ページのアクティビティを経時的に記録します。スクリプトが実行され、レイアウトが更新されたときに表示されます。これにより、コードの遅い部分を見つけることができます。
レイヤータブは、ページの複合レイヤーを視覚化します。これは、レンダリングの問題を発見するのに役立ちます。要素がどのように積み重ねられ、塗り直されているかを見ることができます。
これらのツールは、開発者にWebページの完全なビューを提供します。それらは、高速でバグのないサイトを簡単に構築できるようにします。
Safariには組み込みの開発者ツールが含まれています。ブラウザで問題をデバッグするために何もインストールする必要はありません。