130 votes

janaspage avatar

Comment activer l'affichage des règles dans Chrome DevTools ?

Demandé el 28 de Janvier, 2018
Quand la question a-t-elle été
31098 affichage
Nombre de visites la question a
4 Réponses
Nombre de réponses aux questions
Résolu
Situation réelle de la question

Chrome DevTools offrait auparavant un paramètre permettant d'afficher les règles lors de l'inspection des éléments. Il comportait une règle en pixels sur les côtés de la vue et des lignes de délimitation pour chaque élément s'étendant sur toute la vue de la page.

Il se trouvait auparavant (si je me souviens bien) dans "DevTools Settings / General". Il n'y a plus de section Général, et je ne la vois pas dans "DevTools Settings / Appearance". A-t-elle été déplacée ou supprimée ? Je ne trouve pas de documentation ou de discussion à ce sujet.

Demandé el 28 de Janvier, 2018 par janaspage

3 votes

Avatar de vikramvi

Clic droit > Inspecter > Cliquer sur l'icône des paramètres > Préférences > Éléments > Afficher les règles

Commenté el 15 de Septembre, 2020 par vikramvi

Réponses

Trop de publicités?

184voto

Gideon Pyzer avatar
Gideon Pyzer Points 10431

Vous pouvez l'activer dans DevTools Settings > Preferences, dans la section Elements.

Mise à jour : La plupart d'entre eux peuvent être confus sur la façon de l'utiliser. Pour l'utiliser, ouvrez la console et survolez un élément pour afficher la règle. Merci @Brandito pour l'avoir mentionné dans le commentaire.

Show rulers

Répondu el 28 de Janvier, 2018 par Gideon Pyzer (10431 Points )

17 votes

Avatar de Botond Vajna

Ok, mais comment l'utiliser, je ne vois aucune règle après l'avoir activé.

Commenté el 27 de Juin, 2018 par Botond Vajna

16 votes

Avatar de Brandito

@BotondVajna Je viens de découvrir où ils sont aujourd'hui, ils sont visibles lorsque vous survolez un élément dans le panneau des éléments, assez inutile si vous me demandez.

Commenté el 16 de Juillet, 2018 par Brandito

2 votes

Avatar de DrLightman

Je ne comprends pas l'intérêt de faire apparaître ces règles uniquement lors du survol d'un élément, puisque les dimensions de l'élément sont déjà imprimées dans un popup pratique.

Commenté el 24 de Janvier, 2020 par DrLightman
Afficher 5 autres commentaires

35voto

Kayce Basques avatar
Kayce Basques Points 7234

  1. Cliquez sur Basculer la barre d'outils du dispositif Toggle Device Toolbar qui se trouve en haut à gauche de votre fenêtre DevTools.

  2. Cliquez sur Plus d'options puis sélectionnez Afficher les règles .

    Show rulers

    Les règles se trouvent à gauche et au-dessus de votre fenêtre d'affichage. Vous pouvez cliquer sur les chiffres pour régler la largeur et la hauteur sur cette taille.

    Rulers

Répondu el 29 de Septembre, 2018 par Kayce Basques (7234 Points )

4 votes

Avatar de Brandito

Au début, je me suis dit : " Wow, c'est une réponse vraiment bien formatée, de superbes images ! Puis j'ai vu qui l'avait postée... M. "Quoi de neuf dans Chrome / DevTools" !

Commenté el 12 de Octobre, 2018 par Brandito

1 votes

Avatar de NoOneSpecial

@kayce-basques, alors, que se passe-t-il avec la case à cocher dans la réponse de @Gideon-Pyzer ? Les règles produites par cette fonctionnalité sont-elles destinées à n'être affichées que lorsque l'on passe la souris sur un élément dans l'onglet Éléments des outils de développement, ou bien l'utilisons-nous de la mauvaise façon ? Le "problème" avec les règles et les fonctionnalités du mode "Barre d'outils de périphérique", c'est que lorsque vous l'utilisez, la page n'a plus l'aspect et le rendu qu'elle avait juste avant que vous n'appuyiez sur le bouton "Toggle device toolbar", et cela peut souvent être un problème.

Commenté el 17 de Mars, 2019 par NoOneSpecial

17 votes

Avatar de Aaron Newton

Ce serait formidable si cette fonction offrait la possibilité de faire glisser des guides et de prendre des mesures. Existe-t-il un endroit où je peux soumettre cette suggestion ?

Commenté el 6 de Avril, 2019 par Aaron Newton
Afficher 2 autres commentaires

8voto

Amir Reza avatar
Amir Reza Points 18

En mode développeur, appuyez sur Ctrl+Shift+P puis tapez Règle. enter image description here

Répondu el 20 de Juillet, 2021 par Amir Reza (18 Points )

5voto

Hanan Fadel avatar
Hanan Fadel Points 39

Cliquez sur le paramètre Chrome, puis :

  1. Sous Préférences, activez DevTools et activez Ruler.
  2. Allez sur votre page et faites un clic droit dessus, puis cliquez sur inspecter.
  3. Cliquez sur l'icône Toggle Device Toolbar (en haut à gauche de la fenêtre DevTools).

enter image description here

Répondu el 25 de Mars, 2020 par Hanan Fadel (39 Points )

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

Yandex
X