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

Question

从今天早上开始，我正在寻找 chrome 或 firefox 的插件，它向我显示页面的边框线（高度、宽度），以便我可以通过调整大小和观察边框线中的高度和宽度来测试我的页面。

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

我希望，我解释清楚了

例子：

Answer 1

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

Answer 2

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