如何在Chrome控制台打开时显示屏幕尺寸?

时间:2016-03-11 02:17:53

标签: google-chrome google-chrome-devtools

我刚刚升级到Chrome的最新版本(49.0.2623.87)。我注意到一个轻微的功能缺失。

如果我在打开控制台的情况下检查页面,并且我调整了浏览器的大小,则在Chrome的右上角,Chrome用于显示浏览器视口大小的小指示。现在已经不见了。我如何取回它?

5 个答案:

答案 0 :(得分:19)

临时解决方案:

1-右键单击开发人员工具(元素)中的html元素

2-点击网站内部窗口

enter image description here

答案 1 :(得分:8)

已知错误,已修复:https://bugs.chromium.org/p/chromium/issues/detail?id=582421

它应该落在M50。如果您需要它,那么它目前在Canary(与标准Chromes并排)或者您可以使用Chrome的开发频道。

答案 2 :(得分:4)

在50版本中修复了错误,但现在是临时解决方案:

$(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 :(得分:2)

<?php

error_reporting(E_ALL);

 if($loop->have_posts()): ?>

    <?php while($loop->have_posts()) : $loop->the_post();
            ?>
            <div class="col-lg-3 col-md-4 col-sm-6 p-0 scale-anm" data-aos="fade-zoom">
            <a href="<?php the_post_thumbnail_url('full'); ?>" data-toggle="lightbox" data-gallery="example-gallery">
            <img src="<?php the_post_thumbnail_url('full'); ?>" class="img-responsive" /></a>
        </div>
      <?php endwhile; ?>
     <?php endif; ?>
<? endforeach; ?>

只要您想检查窗口大小,请运行function winSize() { console.log(` Inner Width: ${this.innerWidth} Inner Height: ${this.innerHeight} Outer Width: ${this.outerWidth} Outer Height: ${this.outerHeight} `);} winSize(); 。 请注意,您可以使用控制台中的向上/向下箭头键滚动您使用的命令。

答案 4 :(得分:0)

(Chrome 64)

  1. 打开Chrome开发工具(F12)
  2. 虽然您正在调整大小,请注意右上角,您会看到一个小的Chrome样式通知,显示当前窗口大小将很快消失