一部のクロスブラウザーDevToolsは、知らないかもしれません

開発者ツールは、フロントエンド開発者向けの毎日の武器です。

簡単にするために、「Chromium」を記事で使用して、Chrome、Edge、Operaなどのすべてのクロムベースのブラウザを参照します。開発者ツールは、機能が非常に一貫しています。

domツリーノード検索

レイヤーでネストされたDOMノードに面して、ターゲットノードを見つけることは時間がかかり、面倒な場合があります。 CMD F（MACOS）またはCtrl F（Windows）を使用して、DOMツリーをすばやく検索します。

CSSセレクター（例：

）およびXPath式（例：

）検索をサポートします。 <code>.red <code>//div/h1Chromiumブラウザでは、検索が一致するノードに自動的にジャンプします。これは、長いクエリまたは大きなDOMツリーを処理するときに面倒な場合があります。この機能をオフにすることができます

設定

（f1）→feprences→blobal→を検索しながら、→>>>を検索します。

ノードを見つけた後、ノードを右クリックし、[表示する]を選択して表示領域にスクロールします。

コンソールからのノードへのアクセス

開発者ツールは、コンソールから直接DOMノードにアクセスするための複数の方法を提供します。 たとえば、

は、現在選択されているDOMノードにアクセスできます。 Chromiumブラウザはさらに一歩進んでおり、

、<code><code>、<code>などを使用して、履歴選択のノードにアクセスできるようにします。 <code>

ノードを右クリックして、

コピー→コピーjsパスをコピーすると、コンソールにアクセスするのに便利なJavaScript式（フォーム）としてノードパスをコピーできます。 <code>document.querySelector

別の方法は、ノードを一時変数として保存することです。ノードを右クリックして、対応するオプションを選択します。

chromium
• ：右クリック→「グローバル変数として保存 "
firefox
• ：右クリック→「コンソールでの使用」
safari
• ：右クリック→「要素を記録」
タグを使用して要素を視覚化します

開発者ツールは、ノードの横にタグを表示することにより、特定の属性を持つ要素を視覚化するのに役立ちます。タグはクリック可能であり、異なるブラウザーによって提供されるタグの種類も異なります。

では、特定のマーカーの可視性を切り替えるための要素パネルツールバーにマーカーボタンがあります。たとえば、ノードに

または

CSS宣言が適用されている場合、グリッドマークがその隣に表示されます。マークをクリックすると、ページ上のグリッド領域、トラックサイズ、ライン番号などが強調表示されます。

現在開発者ツールでサポートされているfirefox<code>display: gridタグは、Firefoxソースのドキュメントにリストされています。たとえば、スクロールマークはスクロール可能な要素を示します。マークをクリックすると、オーバーフローを引き起こす要素が強調表示され、その隣のオーバーフローマークが表示されます。 <code>display: inline-grid

chromiumブラウザでは、任意のノードを右クリックして "タグ設定..."を選択して、利用可能なすべてのタグを持つコンテナを開くことができます。たとえば、<code>scroll-snap-typeの要素にはその隣にスクロールスナップタグがあり、そのタグをクリックすると、その要素のスクロールスナップオーバーレイが切り替えられます。

スクリーンショット

すべての主流ブラウザは、開発者ツールのスクリーンショットをサポートし、フルページのスクリーンショットの新しい方法を提供するようになりました。

キャプチャするDOMノードを右クリックして、ノードをキャプチャするオプションを選択します（異なるブラウザータグは異なります）。

HTMLノードでこの操作を繰り返して、フルページのスクリーンショットを取得します。 Safariは要素の背景色の透明性を保持し、ChromiumとFirefoxが白い背景としてキャプチャすることに注意する必要があります。

「レスポンシブな」スクリーンショットを使用して、特定のビューポート幅でページをキャプチャすることもできます。さまざまなブラウザの操作方法は次のとおりです。

• Chromium ：CMDシフトM（MACOS）またはCTRL Shift M（Windows）。または、チェックアイコンの横にあるデバイスアイコンをクリックします。
• firefox：ツール→ブラウザツール→「レスポンシブデザインパターン」
• safari ：開発→「レスポンシブ設計モードの入り」

Chromeのヒント：トップレベルを確認してください

Chromeを使用すると、ダイアログボックス、アラート、モーダルボックスなどのトップレベルの要素を視覚化および検査できます。要素が

に追加されると、マークをクリックすると、トップレベルのマークが表示されます。 <code>#top-layer <code>

以上が一部のクロスブラウザーDevToolsは、知らないかもしれませんの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。