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

Question

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.

Answer 1

Apparemment, il a été supprimé dans l'une des dernières mises à jour, cependant, vous pouvez accéder à la Bascule de mode de l'appareil en appuyant sur F12, puis en appuyant sur Ctrl + Maj + M.

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

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

Appuyez sur la touche F12, puis appuyez sur la touche Esc pour voir la console.

Basé sur cette réponse: http://stackoverflow.com/a/28241682/3399806

Answer 2

C'était certainement une fonction utile qui ils ont enlevé. Heureusement, il y a une extension Chrome que vous pouvez utiliser pour obtenir la même fonctionnalité:

Télécharger ici: Dimensions de la Fenêtre d'affichage

Redémarrez votre navigateur après l'installation. Profitez-en!

Answer 3

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 afin qu'il soit constamment mis en surbrillance lors du redimensionnement. J'espère vraiment qu'ils réintégreront cette fonctionnalité.

Voici une image pour clarification:

Answer 4

J'ai créé une extension Chrome pour imiter le style ancien d'avoir la largeur X hauteur dans le coin en haut à droite qui est GRATUIT pour tous. Voici le lien pour le plugin (pour info les extensions ne fonctionnent pas sur le Chrome page des plugins, donc 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:

Sinon, j'ai pris @Joefay et @de Micah (merci!) réponse à partir de ci-dessus et fait un peu de visuel dans le coin en haut à droite de sorte que vous n'avez pas besoin de garder votre console après avoir mis le code dans la console. Vous aurez à coller à chaque fois que vous ouvrez une nouvelle fenêtre ou actualisez votre page, cependant. Espérons que cette aide.

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();
})();

Answer 5

La fonctionnalité n'a pas été supprimé, il y a un autre moyen d'y accéder.

1. Aller dans Chrome Dev Tools
2. Basculer la vue de l'unité de commande (Commande + Maj + c / Ctrl + Maj + M)

3. Puis, dans le menu déroulant, choisissez le "Responsive" option

Après avoir fait cela, vous serez en mesure de redimensionner la fenêtre en arrière et en avant de regarder exactement la taille de la fenêtre, comme toujours.

J'espère que cela aide!