web-dev-qa-db-fra.com

Chrome n'affiche pas la largeur ni la hauteur de l'écran lors de l'inspection de la page avec Inspect

Récemment, j'ai réinstallé mon PC. Lorsque vous avez terminé de réinstaller tout ce que j'ai remarqué lors de l'utilisation, vérifiez que la hauteur et la largeur de l'écran de la page n'apparaissent plus dans le coin supérieur droit.

L'ont-ils supprimé ou existe-t-il un paramètre secret que je n'ai pas encore trouvé? ou peut-être un bug? Cela a rendu ma vie tellement plus facile lorsque je devais rendre un site réactif.

google-chromebrowsergoogle-chrome-devtools
51
Niels

Depuis mai 2016, Chrome a à nouveau cette fonctionnalité . dimensions de l'écran

screen dimensions

4
Doc Kodam

Apparemment, il a été supprimé dans l'une des dernières mises à jour. Toutefois, vous pouvez accéder au mode de périphérique Basculer en appuyant sur F12 puis sur Ctrl + Maj + M.

Si vous n'aimez pas cette façon, vous pouvez utiliser cet exemple basé sur javascript qui vous indiquera la largeur actuelle de la fenêtre:

var onresize = function() 
{
   var width = window.innerWidth
   || document.documentElement.clientWidth
   || document.body.clientWidth;
   console.log(width);
}

Appuyez sur F12 puis sur Echap pour voir la console.

Sur la base de cette réponse: https://stackoverflow.com/a/28241682/3399806

28
Joefay

C'était définitivement une fonctionnalité utile qu'ils ont supprimée. Heureusement, il existe une extension Chrome que vous pouvez utiliser pour obtenir la même fonctionnalité:

Téléchargez ici: Viewport Dimensions

Redémarrez votre navigateur après l'installation. Prendre plaisir!

enter image description here

16
Troy Grosfield

J'utilise un petit truc soigné que j'ai découvert moi-même. Il suffit de garder le curseur sur le nœud body de l'inspecteur pour qu'il soit constamment en surbrillance lors du redimensionnement. J'espère vraiment qu'ils réintégreront cette fonctionnalité.

Voici une image pour clarification:

enter image description here

14
Frank

J'ai créé une extension Chrome pour imiter l'ancien style consistant à avoir la largeur X hauteur dans le coin supérieur droit GRATUITEMENT. Voici le lien vers le plugin (les extensions FYI ne fonctionnent pas sur le Chrome alors ne vous inquiétez pas): https://chrome.google.com/webstore/detail/width-and-height-display/hhcddohiohbojnfdmfpbbhiaompeiemo?hl=en -US & gl = US

Voici une capture d'écran: enter image description here

Sinon, j'ai pris la réponse d'en haut de @Joefay et de @ Micah (merci!) Et créé un petit visuel dans le coin supérieur droit pour que vous n'ayez pas besoin de garder votre console ouverte après avoir inséré le code dans la console. Vous devrez le coller à chaque fois que vous ouvrirez une nouvelle fenêtre ou actualiserez votre page. J'espère que cela t'aides.

var onresize = function() {
   var width = window.innerWidth
   || document.documentElement.clientWidth
   || document.body.clientWidth;
   var height = window.innerHeight
   || document.documentElement.clientHeight
   || document.body.clientHeight;
   var container = document.getElementById('heightAndWidth');
   container.innerHTML = width + ' x ' + height;
};

(function addHAndWElement() {
    var cssString = 'position:fixed;right:8px;top:8px;z-index:20000;background:rgba(0,0,0,0.6);color:#FFF;padding:4px;'
    var htmlDoc = document.getElementsByTagName('body');
    var newDiv = document.createElement('div');
    var divIdName = 'heightAndWidth';
    newDiv.setAttribute('id',divIdName);
    newDiv.style.cssText = cssString;
    htmlDoc[0].appendChild(newDiv);
    onresize();
})();
3
JeremyS

La fonctionnalité n'a pas été supprimée, il existe un moyen différent d'y accéder maintenant.

  1. Allez dans Chrome Outils de développement
  2. Basculer la vue de l'appareil (Commande + Maj + M/Ctrl + Maj + M)

enter image description here

  1. Ensuite, dans le menu déroulant choisissez l'option "Responsive"

enter image description here

Après cela, vous pourrez redimensionner la fenêtre en regardant la taille exacte de la fenêtre, comme toujours.

J'espère que ça aide!

2
wilsotobianco

TL; DR Assurez-vous que la console du développeur a été ouverte à partir de l'onglet en cours de redimensionnement.

Cela peut sembler un peu comme: face-Palm: pour beaucoup de gens, mais j'ai été surpris par l'ouverture de plusieurs consoles de développeur, mais je ne voyais pas les dimensions de la fenêtre lorsque je l'avais redimensionnée, aucun changement de paramètres.

La réponse était que j'avais deux onglets Chrome ouverts, et chaque onglet a apparemment sa propre console de développeur. Il ne basculera pas lorsque vous basculerez entre les onglets. Par conséquent, je redimensionnais la fenêtre active avec les deux onglets , mais parce que l'onglet où j'ai ouvert la console n'était pas actif, je ne voyais pas mes dimensions.

2
TinkerTenorSoftwareGuy

Il se peut que cela fonctionne bien dans Chrome. Si vous utilisez Chrome Canary, il a toujours la même fonctionnalité.

J'utilise Canary version 52.0.2707.0

https://www.google.com/chrome/browser/canary.html

0
Chad