Chromeデベロッパーツール - ブラウザサイズ？

Question

私はGoogleは最近、これらの更新前に、Webサイトの右上に表示されていた画面の高さ&幅をその開発者ツールの更新を展開PXに

をChromeデベロッパーツールを使用して、ブラウザの幅を取得しようとしていますデベロッパーツールのスケーリング時にプレビューすることができますが、今では画面サイズを見つける方法がありません（下の例を参照）。

どのように私は今、クロームのdevのツールを使用してブラウザのサイズを見つけることができますか？

Answer 1

を、あなたはそれがデバイスモード click this gif

Answer 2

これは同じではなく、かつてほど便利ではありません。しかし、デベロッパーツールの設定（一般タブ、要素セクション、 "ルーラーの表示"チェック）でルーラーをオンにすることができます。

要素（bodyまたはhtml）を選択すると、ブラウザのxとyにルーラーを持つ要素のサイズを取得できます。あなたのコンテンツがブラウザよりも広い場合、これはあなたのブラウザウィンドウと同じではありません。 これまでのようにサイズを変更しているため、ブラウザのサイズが表示されないため、不便です。うまくいけば元の機能が戻ってきます。

*また、[デバイスモードの切り替え]をオンにして、ドロップダウンで[応答]を選択すると、ブラウザ領域のサイズを変更してリアルタイムの画面サイズを確認できます。

Answer 3

それはバグです：https://bugs.chromium.org/p/chromium/issues/detail?id=582421

Google Chromeのベータ版ブランチは既に修正このバグがあり、修正は次の安定版リリース（バージョン50）に追加されることが期待されます。

は一時的な回避策として、あなたは、このブックマークレットを使用することができます：彼らは、このツールを表示する方法を変更

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