如何在chrome或firefox中以像素显示边框高度和宽度，以测试响应式网页设计

Question

从今天早上开始，我正在搜索chrome或firefox的附加内容，它向我显示页面的边框线（高度，宽度），以便我可以通过调整大小并在边框线中查看其高度和宽度来测试我的页面。

我试过， window resizer ， Web Developer和其他一些..但他们不会在调整大小期间动态显示页面的边框（以像素为单位）。

我希望，我清楚地解释了

例：

Answer 1

在Chrome中，开发工具右下角有一个“齿轮”图标（右键单击任何元素，然后“检查元素”），打开常规设置。 只需选中“元素”部分中的“显示标尺”，然后将鼠标悬停在“元素”窗格中HTML代码中的元素上。

Answer 2

在Firefox中，您还可以从Web开发人员菜单中选择“响应式设计视图”。 这允许您调整页面大小并以更加交互的方式使其响应。