如何在 ChromeDevTools 中启用标尺视图？

ChromeDevTools 之前提供了一个在检查元素时显示标尺的设置。它在视图的两侧有一个像素标尺，每个元素的边界线扩展了页面的整个视图。

它过去常常在“ DevTools 设置/常规”中找到(我记得)。不再有通用部分，我在“ DevTools 设置/外观”中也没有看到。这个被移走了吗，还是被移走了？我没找到任何相关文件或讨论。

113036 次浏览
小开
最佳答案

You can enable it in DevTools Settings > Preferences, under the Elements section.

更新: 他们中的大多数人可能对如何使用它感到困惑。若要使用，请打开控制台并将鼠标悬停在一个元素上以查看标尺。感谢 @ Brandito在评论中提到。

Show rulers

小开

  1. 单击 DevTools 窗口左上角的 切换设备工具栏< img src = “ https://i.stack.imgur.com/FTv2F.png”alt = “ Toggle Device Toolbar”> < img src = “ https://i.stack.imgur.com/FTv2F.png”alt = “ Toggle Device Toolbar”> 。

  2. Click 更多选择 and then select 给我看尺子.

    Show rulers

    尺子在视图的左上方。可以单击数字将宽度和高度设置为该大小。

    Rulers

小开

点击 Chrome 设置，然后:

  1. 在首选项下，启用 DevTools 和启用 Ruler。
  2. 转到您的页面，右键单击它，然后单击检查。
  3. 单击“切换设备工具栏”图标(DevTools 窗口左上角)。

enter image description here

小开

在开发模式下，按 Ctrl + Shift + P 键，然后键入标尺 enter image description here


提交答案