Mostra larghezza della finestra durante il ridimensionamento della finestra negli strumenti per sviluppatori di Chrome?

Question

Uso Chrome con gli strumenti di sviluppo ancorati sul lato destro della finestra. Chrome mostrava le dimensioni del viewport nella parte in alto a destra della finestra, quando ridimensionavi la vista trascinando il divisore centrale. L'ho sempre trovato utile per testare siti reattivi e query multimediali.

Da un recente aggiornamento, questo è scomparso. C'è un modo per riaccenderlo?

Sto usando l'ultima versione (Versione 49.0.2623.87) su Mac.

Answer 1

Come accennato, è un bug. Per il momento una soluzione a basso costo che ho usato è messo questo nella vostra console:

window.addEventListener('resize', function(event){ 
    console.log(window.innerWidth); 
}); 

Ora basta guardare la console quando si ridimensiona. Fa il trucco per il controllo della larghezza di base.

Ecco una versione che imita la vecchia resizer:

var b = document.createElement('div'); 
var bS = b.style; 
bS.position = 'fixed'; 
bS.top = 0; 
bS.right = 0; 
bS.background = '#fff'; 
bS.padding = '5px'; 
bS.zIndex = 100000; 
bS.display = 'block'; 
bS.fontSize = '12px'; 
bS.fontFamily = 'sans-serif'; 
b.innerText = window.innerWidth + 'x' + window.innerHeight; 
b.addEventListener("click", function(){bS.display = 'none';}, false); 
document.body.appendChild(b); 
window.addEventListener('resize', function(event){ 
    bS.display = 'block'; 
    b.innerText = window.innerWidth + 'x' + window.innerHeight; 
}); 

Answer 2

devo avere troppo tempo sulle mie mani .. Questa è una versione di CSS, se si utilizzano supporti punti di interruzione di query. Non è possibile fare clic via, però, anche se potrebbe essere possibile mostrare per un certo numero # di secondi ogni volta che i fuochi media query (utilizzando animazioni) ...

body::before { 
    position: fixed; 
    top: 0; 
    right: 0; 
    z-index: 100000; 
    box-sizing: border-box; 
    display: block; 
    padding: 5px; 
    font-size: 12px; 
    font-family: sans-serif; 
    background: #fefaa5; 
    border: 1px solid #fff628; 
    content: 'xs'; 
} 
@media (min-width: 480px) { body::before {content: 'sm';}} 
@media (min-width: 768px) { body::before {content: 'md';}} 
@media (min-width: 992px) { body::before {content: 'lg';}} 
@media (min-width: 1200px) { body::before {content: 'xl';}}