Certaines fonctionnalités de Devtools cross-browser que vous ne connaissez peut-être pas

Les outils du développeur sont une arme quotidienne pour les développeurs frontaux.

Pour simplifier, "Chromium" sera utilisé dans l'article pour désigner tous les navigateurs à base de chrome tels que Chrome, Edge et Opera. Leurs outils de développeur sont très cohérents dans la fonctionnalité.

Recherche de nœuds d'arbre Dom

Face aux nœuds Dom imbriqués aux couches, trouver le nœud cible peut prendre du temps et laborieux. Utilisez CMD F (macOS) ou Ctrl F (Windows) pour rechercher rapidement l'arborescence DOM.

prend en charge les recherches de sélecteurs CSS (par exemple <code>.red) et XPath (par exemple <code>//div/h1).

Dans le navigateur Chromium, les recherches sauteront automatiquement au nœud correspondant, qui peut être gênant lors de la gestion de longues requêtes ou de grands arbres DOM. Vous pouvez désactiver cette fonctionnalité en allant à Paramètres (F1) → Préférences → Global → Entrez lors de la recherche → Désactiver

.

Après avoir trouvé le nœud, cliquez avec le bouton droit sur le nœud et sélectionnez "Faites défiler pour afficher" pour le faire défiler dans la zone de visualisation.

Accès au nœud depuis la console

Les outils du développeur fournissent plusieurs façons d'accéder aux nœuds DOM directement à partir de la console:

<code><code> par exemple, <code> peut accéder au nœud DOM actuellement sélectionné. Le navigateur de chrome va plus loin et permet d'accéder aux nœuds dans la sélection d'historique en utilisant <code>,

,

, etc. Cliquez avec le bouton droit sur le nœud et sélectionnez Copier → <code>document.querySelector Copier JS Path

, et vous pouvez copier le chemin du nœud en tant qu'expression JavaScript (

formulaire), ce qui est pratique pour l'accès dans la console.

Une autre façon est de stocker le nœud en tant que variable temporaire. Cliquez avec le bouton droit sur le nœud et sélectionnez l'option correspondante:
chrome
• : clic droit → "Enregistrer en tant que variable globale"
Firefox
• : clic droit → «Utiliser dans la console»
safari

: clic droit → "Élément d'enregistrement"

Visualiser les éléments avec des balises

Les outils de développement peuvent aider à visualiser les éléments avec des attributs spécifiques en affichant des balises à côté des nœuds. Les balises sont cliquables et les types de balises fournies par différents navigateurs sont également différents. Dans <code>display: grid safari <code>display: inline-grid, il y a un bouton de marqueur dans la barre d'outils du panneau Elements pour basculer la visibilité d'un marqueur spécifique. Par exemple, si un nœud a une déclaration

ou

CSS appliquée, une marque de grille s'affiche à côté. Cliquez sur la marque mettra en évidence la zone de la grille, la taille de la piste, le numéro de ligne, etc. sur la page.

Firefox Les balises actuellement prises en charge par l'outil de développement sont répertoriées dans la documentation de la source Firefox. Par exemple, une marque de défilement indique un élément de défilement. Cliquer sur une marque met en évidence l'élément qui provoque le débordement et affiche la marque de débordement à côté.

Dans le navigateur chrome , vous pouvez cliquer avec le bouton droit sur n'importe quel nœud et sélectionner "Paramètres de balise ..." Pour ouvrir un conteneur avec toutes les balises disponibles. Par exemple, un élément avec <code>scroll-snap-type aura une balise SCOLL SNAP à côté, et en cliquant sur cette balise basculera la superposition de Scroll Snap sur cet élément.

Capture d'écran

Tous les navigateurs grand public prennent désormais en charge les captures d'écran à partir des outils de développement et fournissent une nouvelle méthode de captures d'écran pleine page.

Cliquez avec le bouton droit sur le nœud DOM que vous souhaitez capturer et sélectionnez l'option pour capturer le nœud (les différentes balises de navigateur sont différentes).

Répétez cette opération sur le nœud HTML pour prendre une capture d'écran pleine page. Il convient de noter que Safari conserve la transparence de la couleur d'arrière-plan de l'élément, tandis que le chrome et Firefox le capturent sous forme de fond blanc.

Vous pouvez également prendre des captures d'écran "réactives" pour capturer la page avec une largeur de vision spécifique. Les méthodes de fonctionnement de différents navigateurs sont les suivantes:

• chrome : CMD Shift M (macOS) ou Ctrl Shift M (Windows). Ou cliquez sur l'icône de l'appareil à côté de l'icône de vérification.
• Firefox : Outils → Outils de navigateur → «Modèles de conception réactifs»
• safari : Développement → «Entrez le mode de conception réactif»

Conseils chromés: vérifiez le niveau supérieur

Chrome vous permet de visualiser et d'inspecter les éléments de niveau supérieur tels que les boîtes de dialogue, les alertes ou les boîtes modales. Lorsqu'un élément est ajouté à <code>#top-layer, une marque de niveau supérieur s'affiche à côté. <code>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!