Công cụ dành cho nhà phát triển Chrome - Kích thước trình duyệt?

Question

Tôi đang sử dụng Công cụ nhà phát triển Chrome và cố gắng để có được chiều rộng trình duyệt trong px

Google gần đây đã tung ra bản cập nhật cho công cụ phát triển của họ, trước khi những thông tin cập nhật chiều cao màn hình & chiều rộng sử dụng để xuất hiện trong góc trên bên phải của trang web xem trước khi mở rộng quy mô các công cụ của nhà phát triển, nhưng bây giờ không có cách nào để tìm ra kích thước màn hình (ví dụ bên dưới)?

Làm cách nào để tìm kích thước trình duyệt qua công cụ Chrome dev?

Answer 1

Họ thay đổi cách thể hiện công cụ này, bạn có thể tìm thấy nó nhấn trong chế độ thiết bị click this gif

Answer 2

Nó không giống nhau và không thuận tiện như trước đây. Nhưng bạn có thể bật người cai trị dưới cài đặt công cụ dành cho nhà phát triển (tab Chung, phần Phần tử, chọn "hiển thị thước kẻ").

Sau đó, khi bạn chọn phần tử (nội dung hoặc html), bạn có thể nhận được kích thước của phần tử với thước kẻ trên x và y của trình duyệt. Điều này sẽ không giống với cửa sổ trình duyệt của bạn mặc dù nội dung của bạn rộng hơn trình duyệt. Thật bất tiện vì nó không hiển thị cho bạn kích thước của trình duyệt khi bạn thay đổi kích thước như trước đây. Hy vọng rằng tính năng ban đầu sẽ trở lại.

* Cũng thấy rằng nếu bạn bật Chế độ thiết bị bật và chọn Đáp ứng trong trình đơn thả xuống, bạn có thể thay đổi kích thước vùng trình duyệt và xem kích thước màn hình theo thời gian thực.

Answer 3

Đó là một lỗi: https://bugs.chromium.org/p/chromium/issues/detail?id=582421

Google chi nhánh Chrome beta có lỗi này cố định đã và sửa chữa dự kiến ​​sẽ được bổ sung vào phiên bản ổn định tiếp theo (phiên bản 50).

Là một workaround tạm thời, bạn có thể sử dụng bookmarklet này:

javascript: (function() { 
    var v = window, 
    d = document; 
    v.onresize = function() { 
    var w = v.innerWidth ? v.innerWidth : d.documentElement.clientWidth, 
     h = v.innerHeight ? v.innerHeight : d.documentElement.clientHeight, 
     s = d.getElementById('WSzPlgIn'), 
     ss; 
    if (!s) { 
     s = d.createElement('div'); 
     s.id = 'WSzPlgIn'; 
     d.body.appendChild(s); 
     s.onclick = function() { 
     s.parentNode.removeChild(s) 
     }; 
     ss = s.style; 
     ss.position = 'fixed'; 
     ss.top = 0; 
     ss.right = 0; 
     ss.backgroundColor = 'black'; 
     ss.opacity = '1'; 
     ss.color = 'white'; 
     ss.fontFamily = 'monospace'; 
     ss.fontSize = '10pt'; 
     ss.padding = '5px'; 
     ss.textAlign = 'right'; 
     ss.zIndex = '999999'; 
    } 
    s.innerHTML = 'w ' + w + '<br />h ' + h; 
    }; 
})();