Je passe beaucoup de temps dans DevTools, et je suis sûr que vous aussi. Parfois, je rebondis même entre eux, en particulier lorsque je débogue des problèmes entre navigateurs. DevTools ressemble beaucoup aux navigateurs eux-mêmes - toutes les fonctionnalités des DevTools d'un navigateur ne seront pas identiques ou prises en charge dans les DevTools d'un autre navigateur.

Mais il existe de nombreuses fonctionnalités de DevTools qui sont interopérables, même certaines moins connues que je suis sur le point de partager avec vous.

Par souci de brièveté, j'utilise "Chromium" pour désigner tous les navigateurs basés sur Chromium, comme Chrome, Edge et Opera, dans l'article. Beaucoup de DevTools qu'ils contiennent offrent exactement les mêmes fonctionnalités et capacités les uns que les autres, c'est donc juste mon raccourci pour les désigner tous à la fois.

Rechercher des nœuds dans l'arborescence DOM

Parfois, l'arborescence DOM est pleine de nœuds imbriqués dans des nœuds qui sont imbriqués dans d'autres nœuds, et ainsi de suite. Cela rend assez difficile de trouver celui que vous recherchez, mais vous pouvez rapidement rechercher l'arborescence DOM en utilisant Cmd + F (macOS) ou Ctrl + F (Les fenêtres).

De plus, vous pouvez également effectuer une recherche à l'aide d'un sélecteur CSS valide, comme .red, ou en utilisant un XPath, comme //div/h1.

Dans les navigateurs Chromium, le focus passe automatiquement au nœud qui correspond aux critères de recherche au fur et à mesure que vous tapez, ce qui peut être gênant si vous travaillez avec des requêtes de recherche plus longues ou une grande arborescence DOM. Heureusement, vous pouvez désactiver ce comportement en vous rendant sur Paramètres (F1) 🇧🇷 Préférences → Global → Recherche en cours de frappe → Désactiver.

Après avoir localisé le nœud dans l'arborescence DOM, vous pouvez faire défiler la page pour amener le nœud dans la fenêtre d'affichage en cliquant avec le bouton droit sur le nœud et en sélectionnant "Scroll into view".

Accéder aux nœuds depuis la console

DevTools propose de nombreuses façons d'accéder à un nœud DOM directement depuis la console.

Par exemple, vous pouvez utiliser $0 pour accéder au nœud actuellement sélectionné dans l'arborescence DOM. Les navigateurs Chromium vont encore plus loin en vous permettant d'accéder aux nœuds sélectionnés dans l'ordre chronologique inverse de la sélection historique en utilisant, $1, $2, $3, etc.

Une autre chose que les navigateurs Chromium vous permettent de faire est de copier le chemin du nœud en tant qu'expression JavaScript sous la forme de document.querySelector en cliquant avec le bouton droit sur le nœud et en sélectionnant Copier → Copier le chemin JS, qui peut ensuite être utilisé pour accéder au nœud dans la console.

Voici une autre façon d'accéder à un nœud DOM directement depuis la console : en tant que variable temporaire. Cette option est disponible en cliquant avec le bouton droit sur le nœud et en sélectionnant une option. Cette option est étiquetée différemment dans les DevTools de chaque navigateur :

• Chrome: Clic droit → « Stocker comme variable globale »
• Firefox: Clic droit → "Utiliser dans la console"
• Safari: Clic droit → "Log Element"

Visualisez les éléments avec des badges

DevTools peut aider à visualiser les éléments qui correspondent à certaines propriétés en affichant un badge à côté du nœud. Les badges sont cliquables et différents navigateurs proposent une variété de badges différents.

In Safari, il existe un bouton de badge dans la barre d'outils du panneau Éléments qui peut être utilisé pour basculer la visibilité de badges spécifiques. Par exemple, si un nœud a un display: grid or display: inline-grid déclaration CSS qui lui est appliquée, une grid badge est affiché à côté. Cliquer sur le badge mettra en surbrillance les zones de grille, les tailles de piste, les numéros de ligne, etc., sur la page.

Les badges actuellement pris en charge dans FirefoxLes DevTools de sont listés dans Firefox documents sources. Par exemple, un scroll badge indique un élément déroulant. Un clic sur le badge met en évidence l'élément provoquant le débordement avec un overflow insigne à côté.

In Chrome navigateurs, vous pouvez cliquer avec le bouton droit sur n'importe quel nœud et sélectionner "Paramètres des badges…" pour ouvrir un conteneur qui répertorie tous les badges disponibles. Par exemple, les éléments avec scroll-snap-type aura un scroll-snap badge à côté, qui, en cliquant, basculera le scroll-snap superposition sur cet élément.

Prendre des captures d'écran

Nous avons pu prendre des captures d'écran à partir de certains DevTools depuis un certain temps maintenant, mais il est maintenant disponible dans chacun d'eux et inclut de nouvelles façons de prendre des photos pleine page.

Le processus commence par un clic droit sur le nœud DOM que vous souhaitez capturer. Sélectionnez ensuite l'option pour capturer le nœud, qui est étiqueté différemment selon les DevTools que vous utilisez.

Répétez les mêmes étapes sur le html node pour prendre une capture d'écran pleine page. Lorsque vous le faites, cependant, il convient de noter que Safari conserve la transparence de la couleur d'arrière-plan de l'élément - Chromium et Firefox le captureront sous forme d'arrière-plan blanc.

Il y a une autre option ! Vous pouvez prendre une capture d'écran "réactive" de la page, ce qui vous permet de capturer la page à une largeur de fenêtre spécifique. Comme vous vous en doutez, chaque navigateur a différentes manières d'y arriver.

• Chrome: Cmd + Shift + M (macOS) ou Ctrl + Shift + M (Les fenêtres). Ou cliquez sur l'icône "Appareils" à côté de l'icône "Inspecter".
• Firefox: Outils → Outils du navigateur → "Mode de conception réactif"
• Safari: Développer → "Entrez en mode de conception réactive"

Astuce Chrome : Inspectez la couche supérieure

Chrome vous permet de visualiser et d'inspecter les éléments de la couche supérieure, comme une boîte de dialogue, une alerte ou un modal. Lorsqu'un élément est ajouté à la #top-layer, il obtient un top-layer badge à côté de lui, qui, en cliquant, vous amène au conteneur de la couche supérieure situé juste après le </html> Étiquette.

L'ordre des éléments dans le top-layer conteneur suit l'ordre d'empilement, ce qui signifie que le dernier est en haut. Clique le reveal badge pour revenir au nœud.

Astuce Firefox : Accéder à l'ID

Firefox lie l'élément référençant l'attribut ID à son élément cible dans le même DOM et le met en évidence avec un soulignement. Utiliser CMD + Click (macOS) ou CTRL + Click (Windows) ) pour accéder à l'élément cible avec l'identifiant.

Emballage en place

Pas mal de choses, non ? C'est génial qu'il existe des fonctionnalités DevTools incroyablement utiles qui sont prises en charge dans Chromium, Firefox et Safari. Y a-t-il d'autres fonctionnalités moins connues prises en charge par les trois que vous aimez ?

Il y a quelques ressources que je garde à proximité pour rester au courant des nouveautés. Je pensais les partager avec ici:

• Contenu propulsé par le référencement et distribution de relations publiques. Soyez amplifié aujourd'hui.
• Platoblockchain. Intelligence métaverse Web3. Connaissance Amplifiée. Accéder ici.
• La source: https://css-tricks.com/some-cross-browser-devtools-features-you-might-not-know/