web-dev-qa-db-fra.com

Comment puis-je afficher la taille de l'écran lorsque la console Chrome est ouverte?

Je viens de mettre à jour la dernière version de Chrome (49.0.2623.87). Je remarque une légère fonctionnalité manquante.

Si j'examinais une page avec la console ouverte et que je redimensionnais le navigateur, dans le coin supérieur droit, Chrome utilisait un petit indicateur de la taille de la fenêtre d'affichage du navigateur. C'est maintenant parti. Comment est-ce que je le récupère?

google-chromegoogle-chrome-devtools
14
The Qodesmith

Bug connu, déjà corrigé: https://bugs.chromium.org/p/chromium/issues/detail?id=582421

Il devrait atterrir en M50. Si vous en avez besoin plus tôt, il se trouve actuellement dans Canary (côte à côte avec Chromes standard) ou vous pouvez utiliser le canal Dev de Chrome.

8
Garbee

Solution temporaire:

1- Cliquez avec le bouton droit sur l'élément html dans les outils de développement (Elements).

2- Cliquez dans la fenêtre du site

 enter image description here

18
Alex

bug corrigé dans la version 50, mais maintenant solution temporaire:

$(document).ready(function() {
    showSize = ShowSize($(window).width(), $(window).height());
    $(window).resize(function() {
        showSize($(window).width(), $(window).height());
    });
});
function ShowSize(winW, winH){
    var scrollBarWidth = winH < $(document).find('body') ? 17 : 0; 
    $('body')
        .find(".size-window")
        .remove()
        .end()
        .append('<div class="size-window">'+(winW + scrollBarWidth) +' x '+winH+'</div>')
        .find(".size-window")
        .css({
            position: 'fixed',
            right: '10px',
            top: '10px',
            color: '#fff',
            background: 'rgba(0,0,0,0.5)',
            padding: '5px'
        });
    return function(winW, winH){
        scrollBarWidth = winH < $(document).find('body') ? 17 : 0;
        $('body').find(".size-window").text(winW+ scrollBarWidth +' x '+winH);
    }
}
3
Дмитрий Харин
function winSize() {
    console.log(`
Inner Width: ${this.innerWidth}
Inner Height: ${this.innerHeight}
Outer Width: ${this.outerWidth}
Outer Height: ${this.outerHeight}
`);}

winSize();

À chaque fois que vous souhaitez vérifier la taille de la fenêtre, exécutez winSize(). Notez que vous pouvez utiliser les touches fléchées haut/bas de la console pour faire défiler les commandes que vous avez utilisées.

2
Mitch

(Chrome 64)

  1. Ouvrir les outils de développement Chrome (F12)
  2. pendant vous redimensionnez, remarquez le coin supérieur droit et vous verrez une petite notification de style chromé indiquant la taille de la fenêtre actuelle/ disparaîtra sous peu  
0
Iman Abidi