logo标签列表

如何在Chrome DevTools中启用标尺视图？

google-chromegoogle-chrome-devtools
127

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

我记得以前可以在“DevTools设置/常规”中找到它。现在没有常规部分了，并且我在“DevTools设置/外观”中也没有看到它。它被移动或删除了吗？我没有找到相关的文档或讨论。

3
点击右键 > 检查 > 点击设置图标 > 首选项 > 元素 > 显示规则 - vikramvi
4个回答
177

你可以在 DevTools 设置 > 首选项下的元素部分启用它。

要使用，请打开控制台并将鼠标悬停在元素上以查看标尺。感谢@Brandito在评论中提到。

显示标尺

17
好的，但是如何使用它，启用后我看不到任何标尺。 - Botond Vajna
15
@BotondVajna，我刚刚发现他们今天在哪里，当你在元素面板中悬停在一个元素上时，它们就会出现，如果你问我的话，这真是没什么用处。 - brandito
2
我不明白为什么那些标尺只有在悬停元素时才出现，因为元素的尺寸已经在方便的弹出窗口中打印出来了。 - DrLightman
2
@DrLightman 我会建议更好地辨别它们与页面上其他元素的对齐方式。我肯定会发现它很有用。 - Drazen Bjelovuk
1
我需要重新启动Chrome才能看到标尺。 - darmis
显示剩余3条评论
35

  1. 点击DevTools窗口左上角的切换设备工具栏Toggle Device Toolbar。

  2. 点击更多选项，然后选择显示标尺。

    Show rulers

    标尺位于您的视口左侧和上方。您可以单击数字将宽度和高度设置为该大小。

    Rulers

4
一开始，我觉得这个回答的格式非常好，图片也很棒！但是当我看到是谁发的时候……原来是“Chrome / DevTools 有什么新内容”的作者！ - brandito
1
@kayce-basques，那么，@Gideon-Pyzer的答案中的复选框怎么样了？这些功能产生的标尺是否只在将鼠标悬停在开发工具中的元素选项卡上时才显示，还是我们使用方法不对？“设备工具栏”模式下的标尺和功能的“问题”是，当您使用它时，页面不再像按下“切换设备工具栏”按钮之前那样看起来和呈现，这通常会成为一个问题。 - NoOneSpecial
17
若该功能能够提供拖动参考线和测量的功能将会很棒。我可以在哪里提交这个建议呢？ - Aaron Newton
1
我需要重新启动Chrome才能看到标尺。 - darmis
值得注意的是，如果您在设置中启用了标尺，在切换“选择页面元素”并悬停在元素上时，将显示辅助线。即使未启用移动标尺，也会出现这种情况，但是当两个设置都启用时，我发现它们的组合很有用。@AaronNewton......如果有方法的话，我仍然认为应该提交完整的功能请求。 - Shad
8

在开发者模式下按Ctrl+Shift+P，然后输入“Ruler”。

enter image description here
5

点击Chrome设置，然后：

  1. 在首选项下，启用DevTools并启用标尺。
  2. 转到您的页面，右键单击它，然后单击检查。
  3. 单击切换设备工具栏图标（位于DevTools窗口左上方）。

enter image description here

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接