Chrome geeft de breedte en hoogte van het scherm niet weer bij het inspecteren van de pagina met Inspect

Onlangs heb ik mijn pc opnieuw geïnstalleerd. Toen ik klaar was met het opnieuw installeren van alles, merkte ik bij het gebruik van Inspect dat de schermhoogte en -breedte van de pagina niet meer in de rechterbovenhoek worden weergegeven.

Hebben ze het verwijderd of is er een geheime instelling die ik nog niet heb gevonden? of misschien een bug? Dit maakte mijn leven zoveel gemakkelijker toen ik een site responsive moest maken.

Antwoord 1, autoriteit 100%

Blijkbaar is het verwijderd in een van de laatste updates, maar je kunt de apparaatmodus wisselen door op F12 te drukken en vervolgens op Ctrl + Shift + M te drukken.

Als je deze manier niet leuk vindt, kun je dit voorbeeld gebruiken op basis van javascript dat je de huidige breedte van het venster vertelt:

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

Druk op F12 en vervolgens op Esc om de console te zien.

Op basis van dit antwoord: https://stackoverflow.com/a/28241682/3399806

Antwoord 2, autoriteit 52%

Dat was zeker een handige functie die ze hebben verwijderd. Gelukkig is er een Chrome-extensie die je kunt gebruiken om dezelfde functionaliteit te bereiken:

Hier downloaden: Viewport Dimensions

Start uw browser opnieuw op na de installatie. Geniet ervan!

Antwoord 3, autoriteit 45%

Ik gebruik een handig trucje dat ik zelf heb ontdekt. Houd de cursor gewoon op de body-node in het infovenster, zodat deze constant wordt gemarkeerd tijdens het wijzigen van de grootte. Ik hoop echt dat ze deze functionaliteit opnieuw integreren.

Hier is een afbeelding ter verduidelijking:

Antwoord 4, autoriteit 13%

Vanaf mei 2016 heeft Chrome deze functionaliteit weer.schermafmetingen

Antwoord 5, autoriteit 13%

Ik heb een Chrome-extensie gemaakt om de oude stijl na te bootsen met de breedte X hoogte in de rechterbovenhoek die GRATIS is voor iedereen. Hier is de link naar de plug-in (FYI-extensies werken niet op de Chrome-plug-inspagina, dus maak je geen zorgen): https://chrome.google.com/webstore/detail/width-and-height-display/hhcddohiohbojnfdmfpbphhiaompeiemo&amphiaompeiemo& gl=VS

Hier is een screenshot:

Als alternatief heb ik het antwoord van @Joefay en @Micah (bedankt!) van bovenaf genomen en een beetje visueel gemaakt in de rechterbovenhoek, zodat je je console niet open hoeft te houden nadat je de code in de console hebt gegooid. Je zult het echter elke keer moeten plakken als je een nieuw venster opent of je pagina ververst. Ik hoop dat dit helpt.

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

Antwoord 6, autoriteit 6%

De functie is niet verwijderd, er is nu een andere manier om er toegang toe te krijgen.

1. Ga naar Chrome Dev Tools
2. De apparaatweergave wisselen (Command + Shift + M / Ctrl + Shift + M)

3. Kies vervolgens in het vervolgkeuzemenu de optie “Responsief”

Hierna kunt u het venster heen en weer wijzigen en zoals altijd de exacte venstergrootte bekijken.

Ik hoop dat dit helpt!

Antwoord 7, autoriteit 6%

TL;DR
Zorg ervoor dat de Developer Console is geopend vanaf het tabblad waarvan u het formaat aan het wijzigen bent.

Dit klinkt misschien als een :face-palm: voor veel mensen, maar ik struikelde over meerdere ontwikkelaarsconsoles die open waren, maar ik zag de afmetingen van het venster niet toen ik het formaat aanpaste, geen wijziging in instellingen.

Het antwoord was dat ik twee Chrome-tabbladen open had staan, en elk tabblad heeft blijkbaar zijn eigen ontwikkelaarsconsole. Het verandert niet wanneer u van tabblad wisselt. Daarom was ik het formaat van het actieve venster met beide tabbladen aan het aanpassen, maar omdat het tabblad waar ik de console opende niet actief was, zag ik mijn afmetingen niet.

Antwoord 8

Misschien werkt het terug in Chrome. Als je Chrome Canary gebruikt, heeft het nog steeds dezelfde functie.

Ik gebruik versie 52.0.2707.0 canary

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