如何获取Chrome DevTools的尺寸（含底部停靠场景）

嘿，这个问题我刚好琢磨过！直接给你说实用方案：

当DevTools停靠在底部时，你可以用 window.outerHeight - window.innerHeight 来拿到它的高度——原理和你用在左右停靠场景的思路完全一致：outerHeight 是整个浏览器窗口的总高度，innerHeight 是当前网页可视区域的高度，两者的差值就是底部DevTools面板的高度。

至于宽度的话，底部停靠时DevTools会占满浏览器窗口的横向空间，所以它的宽度就等于浏览器窗口的宽度，也就是 window.outerWidth，不需要额外计算。

再给你补个小技巧，方便统一处理三种停靠场景：

• 先判断 window.outerWidth - window.innerWidth 是否大于0，如果是，说明是左/右停靠，这个差值就是DevTools的宽度；
• 如果上面的差值为0，再看 window.outerHeight - window.innerHeight，这个值就是底部停靠时DevTools的高度。

亲测这个方法在Chrome里完全有效，用来配合脚本实现纯键盘控制DevTools停靠切换没问题~

备注：内容来源于stack exchange，提问作者user956609