web-dev-qa-db-ja.com

Chromeは、Inspectでページを検査するときに画面の幅と高さを表示しません

最近、PCを再インストールしました。すべてを再インストールし終えたら、ページの画面の高さと幅が右上隅に表示されなくなったことをInspectを使用して気付きました。

彼らはそれを削除しましたか、それとも私がまだ見つけていない秘密の設定がありますか？それともバグ？これにより、サイトをレスポンシブにする必要が生じたとき、私の人生はとても楽になりました。

google-chromebrowsergoogle-chrome-devtools
51
Niels

2016年5月の時点で、Chromeには再びこの機能があります。 画面サイズ

screen dimensions

4
Doc Kodam

どうやら最新のアップデートの1つで削除されたようですが、F12を押してからCtrl + Shift + Mを押すと、デバイスの切り替えモードにアクセスできます。

この方法が気に入らない場合は、ウィンドウの現在の幅を通知するjavascriptに基づくこの例を使用できます。

var onresize = function() 
{
   var width = window.innerWidth
   || document.documentElement.clientWidth
   || document.body.clientWidth;
   console.log(width);
}

F12キーを押してからEscキーを押して、コンソールを表示します。

この回答に基づいて： https://stackoverflow.com/a/28241682/3399806

28
Joefay

それは間違いなく彼らが削除した便利な機能でした。幸いなことに、同じ機能を実現するために使用できるChrome拡張機能があります。

ここからダウンロード： Viewport Dimensions

インストール後にブラウザを再起動します。楽しい！

enter image description here

16
Troy Grosfield

私は自分で見つけたきちんとした小さなトリックを使用しています。インスペクターのbodyノードにカーソルを置くだけで、サイズ変更中に常に強調表示されます。彼らがこの機能を再統合することを本当に願っています。

明確にするための画像を次に示します。

enter image description here

14
Frank

Chrome拡張機能を作成して、右上隅の幅X高さをすべての人に無料にするという古いスタイルを模倣しました。プラグインへのリンクは次のとおりです（FYI拡張機能はChromeプラグインページでは機能しないため、心配しないでください）： https://chrome.google.com/webstore/detail/width- and-height-display/hhcddohiohbojnfdmfpbbhiaompeiemo？hl = en-US＆gl = US

スクリーンショットは次のとおりです。 enter image description here

または、@ Joefayと@Micahの（ありがとう！）の回答を上から見て、右上隅に少し視覚的にしたので、コードをコンソールにポップした後、コンソールを開いたままにする必要はありません。ただし、新しいウィンドウを開くたびにページに貼り付けるか、ページを更新する必要があります。お役に立てれば。

var onresize = function() {
   var width = window.innerWidth
   || document.documentElement.clientWidth
   || document.body.clientWidth;
   var height = window.innerHeight
   || document.documentElement.clientHeight
   || document.body.clientHeight;
   var container = document.getElementById('heightAndWidth');
   container.innerHTML = width + ' x ' + height;
};

(function addHAndWElement() {
    var cssString = 'position:fixed;right:8px;top:8px;z-index:20000;background:rgba(0,0,0,0.6);color:#FFF;padding:4px;'
    var htmlDoc = document.getElementsByTagName('body');
    var newDiv = document.createElement('div');
    var divIdName = 'heightAndWidth';
    newDiv.setAttribute('id',divIdName);
    newDiv.style.cssText = cssString;
    htmlDoc[0].appendChild(newDiv);
    onresize();
})();
3
JeremyS

機能は削除されませんでした。今すぐアクセスする別の方法があります。

  1. Chrome Dev Toolsに移動します
  2. デバイスビューを切り替えます（Command + Shift + M/Ctrl + Shift + M）

enter image description here

  1. 次に、ドロップダウンメニューで[応答]オプションを選択します

enter image description here

これを行った後、あなたはいつものように正確なウィンドウサイズを見て前後にウィンドウのサイズを変更することができます。

これがお役に立てば幸いです！

2
wilsotobianco

TL; DR現在サイズ変更中のタブから開発者コンソールが開かれていることを確認してください。

これは多くの人にとって：face-Palm：のように聞こえるかもしれませんが、複数の開発者コンソールが開いているのにつまずきましたが、サイズを変更してもウィンドウのサイズが表示されず、設定は変更されません。

答えは、2つのChromeタブが開いており、各タブには独自の開発者コンソールがあるようです。タブを切り替えても切り替わりません。したがって、両方のタブでアクティブウィンドウのサイズを変更していましたが、コンソールを開いたタブがアクティブではなかったため、寸法が表示されませんでした。

2
TinkerTenorSoftwareGuy

Chromeに戻るとうまくいくかもしれません。 Chrome Canaryを使用する場合、同じ機能がまだあります。

バージョン52.0.2707.0カナリアを実行しています

https://www.google.com/chrome/browser/canary.html

0
Chad