知らないかもしれないいくつかのクロスブラウザー DevTools 機能

私は DevTools に多くの時間を費やしていますが、きっとあなたもそうでしょう。 特にクロスブラウザーの問題をデバッグしているときは特にそうです。 DevTools はブラウザー自体によく似ています。あるブラウザーの DevTools のすべての機能が同じであるわけではなく、別のブラウザーの DevTools でサポートされているわけでもありません。

しかし、相互運用可能な DevTools の機能はかなりあります。あまり知られていない機能も含めて、ここで紹介します。

簡潔にするために、この記事では「Chromium」を使用して、Chrome、Edge、Opera などのすべての Chromium ベースのブラウザーを参照します。 それらの DevTools の多くは、互いにまったく同じ機能を提供するため、これはそれらすべてを一度に参照するための簡略表現です。

DOM ツリーのノードを検索する

DOM ツリーは、他のノードにネストされたノードにネストされたノードでいっぱいになることがあります。 そのため、探しているものを正確に見つけるのはかなり困難ですが、DOM ツリーを使用してすばやく検索できます。 Cmd + F （macOS）または Ctrl + F （ウィンドウズ）。

さらに、次のような有効な CSS セレクターを使用して検索することもできます。 .red、または XPath を使用して、 //div/h1.

Chromium ブラウザーでは、入力時にフォーカスが検索条件に一致するノードに自動的にジャンプします。これは、長い検索クエリや大きな DOM ツリーを操作している場合に面倒な場合があります。 幸いなことに、次の場所に移動してこの動作を無効にすることができます。 設定 (F1）→ 環境設定 → グローバル → 入力しながら検索 → 無効にします.

DOM ツリーでノードを見つけたら、ノードを右クリックして [ビューにスクロール] を選択すると、ページをスクロールしてノードをビューポート内に表示できます。

コンソールからノードにアクセスする

DevTools には、コンソールから直接 DOM ノードにアクセスするさまざまな方法が用意されています。

たとえば、次を使用できます $0 DOM ツリーで現在選択されているノードにアクセスします。 Chromium ブラウザーは、これをさらに一歩進めて、履歴選択の時系列の逆順で選択されたノードにアクセスできるようにします。 $1, $2, $3, etc.

Chromium ブラウザーでできるもう XNUMX つのことは、ノード パスを次の形式の JavaScript 式としてコピーすることです。 document.querySelector ノードを右クリックして、 コピー → JSパスをコピー、コンソールでノードにアクセスするために使用できます。

コンソールから直接 DOM ノードにアクセスする別の方法を次に示します: 一時変数として。 このオプションは、ノードを右クリックしてオプションを選択することで利用できます。 そのオプションは、各ブラウザーの DevTools で異なるラベルが付けられています。

• クロム：右クリック→「グローバル変数として保存」
• Firefoxの：右クリック→「コンソールで使用」
• Safari：右クリック→「ログ要素」

バッジで要素を視覚化する

DevTools は、ノードの横にバッジを表示することで、特定のプロパティに一致する要素を視覚化するのに役立ちます。 バッジはクリック可能で、ブラウザによってさまざまなバッジが提供されます。

In Safari、要素パネルのツールバーにバッジ ボタンがあり、特定のバッジの表示を切り替えるために使用できます。 たとえば、ノードに display: grid or display: inline-grid それに適用される CSS 宣言、 grid 横にバッジが表示されます。 バッジをクリックすると、ページ上のグリッド領域、トラック サイズ、行番号などが強調表示されます。

現在サポートされているバッジ Firefoxのの DevTools は Firefox にリストされています ソースドキュメント。 たとえば、 scroll Badge は、スクロール可能な要素を示します。 バッジをクリックすると、オーバーフローの原因となっている要素が overflow 横にバッジ。

In クロム ブラウザでは、任意のノードを右クリックして選択できます 「バッジの設定…」 使用可能なすべてのバッジを一覧表示するコンテナーを開きます。 たとえば、 scroll-snap-type 〜を持つだろう scroll-snap その横にあるバッジをクリックすると、 scroll-snap その要素にオーバーレイします。

スクリーンショットを撮る

しばらくの間、一部の DevTools からスクリーンショットを撮ることができましたが、現在はすべての DevTools で利用でき、フルページ ショットを撮る新しい方法が含まれています。

プロセスは、キャプチャする DOM ノードを右クリックして開始します。 次に、使用している DevTools に応じて異なるラベルが付いているノードをキャプチャするオプションを選択します。

上で同じ手順を繰り返します html フルページのスクリーンショットを撮るノード。 ただし、そうした場合、Safari では要素の背景色の透明度が保持されることに注意してください。Chromium と Firefox では、要素の背景色が白い背景としてキャプチャされます。

別のオプションがあります！ ページの「レスポンシブ」スクリーンショットを撮ることができます。これにより、特定のビューポート幅でページをキャプチャできます。 ご想像のとおり、各ブラウザーには、そこに到達するためのさまざまな方法があります。

• クロム: Cmd + Shift + M （macOS）または Ctrl + Shift + M （ウィンドウズ）。 または、「検査」アイコンの横にある「デバイス」アイコンをクリックします。
• Firefoxの：ツール→ブラウザツール→「レスポンシブデザインモード」
• Safari：開発→「レスポンシブデザインモードに入る」

Chrome のヒント: 最上層を調べます

Chrome では、ダイアログ、アラート、モーダルなどの最上位要素を視覚化して検査できます。 に要素が追加されると、 #top-layer、それは top-layer バッジをクリックすると、その直後にある最上層のコンテナにジャンプします。 </html> タグ。

の要素の順序 top-layer コンテナは積み重ね順に従います。つまり、最後のコンテナが一番上になります。 クリック reveal ノードに戻るためのバッジ。

Firefox ヒント: ID にジャンプ

Firefox は、ID 属性を参照する要素を同じ DOM 内のターゲット要素にリンクし、下線で強調表示します。 使用 CMD + Click （macOS）または CTRL + Click (Windows) )識別子を持つターゲット要素にジャンプします。

包み込む

かなりの数ですよね？ Chromium、Firefox、Safari で同様にサポートされている非常に便利な DevTools 機能があることは素晴らしいことです。 XNUMX つすべてでサポートされているあまり知られていない機能で、他に気に入っているものはありますか?

最新情報を常に把握するために、手元に置いておくリソースがいくつかあります。 ここでそれらを共有すると思いました：

• SEO を活用したコンテンツと PR 配信。 今日増幅されます。
• Platoblockchain。 Web3メタバースインテリジェンス。 知識の増幅。 こちらからアクセスしてください。
• 情報源： https://css-tricks.com/some-cross-browser-devtools-features-you-might-not-know/