webentwicklung-frage-antwort-db.com.de

Wie ermittle ich die Bildschirmgröße, wenn die Chrome-Konsole geöffnet ist?

Ich habe gerade auf die neueste Version von Chrome (49.0.2623.87) aktualisiert. Ich merke, dass ein kleiner Teil fehlt.

Wenn ich bei geöffneter Konsole eine Seite überprüfte und die Größe des Browsers geändert habe, hatte Chrome in der oberen rechten Ecke einen kleinen Hinweis darauf, wie groß die Größe des Browser-Viewports war. Das ist jetzt weg. Wie bekomme ich es zurück?

google-chromegoogle-chrome-devtools
14
The Qodesmith

Bekannter Fehler, der bereits behoben wurde: https://bugs.chromium.org/p/chromium/issues/detail?id=582421

Es sollte in M50 landen. Wenn Sie es früher brauchen, befindet es sich derzeit in Canary (neben Standard-Chromes) oder Sie können den Dev-Kanal von Chrome verwenden.

8
Garbee

Vorübergehende Lösung:

1- Klicken Sie mit der rechten Maustaste auf das Element html in den Developer Tools (Elements).

2- Klicken Sie in das Website-Fenster

 enter image description here

18
Alex

fehler in Version 50 behoben, jetzt aber temporäre Lösung:

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

Wenn Sie die Fenstergröße überprüfen möchten, führen Sie winSize()..__ aus. Beachten Sie, dass Sie die Aufwärts-/Abwärtspfeiltasten in Console verwenden können, um durch die von Ihnen verwendeten Befehle zu blättern.

2
Mitch

(Chrome 64)

  1. Chrome Dev Tools öffnen (F12)
  2. Während Sie die Größe ändern, beachten Sie die obere rechte Ecke und Sie sehen eine kleine Benachrichtigung im Chromstil, die die aktuelle Fenstergröße anzeigt, die in Kürze verschwinden wird  
0
Iman Abidi