如何在Chrome DevTools中启用标尺查看?

时间:2018-01-28 20:20:01

标签: google-chrome google-chrome-devtools

Chrome DevTools之前提供了一个设置,用于在检查元素时显示标尺。它在视图的两侧有一个像素标尺,每个元素的边界线延伸了页面的完整视图。

过去常常被发现(我记得)在" DevTools设置/常规"中。不再有General部分,我也没有在" DevTools设置/外观"中看到它。这已被移动或移除?我没有找到文件或讨论它。

4 个答案:

答案 0 :(得分:48)

您可以在DevTools设置>中启用它。首选项,在元素部分下。

Show rulers

答案 1 :(得分:9)

  1. 单击“ DevTools”窗口左上方的切换设备工具栏 Toggle Device Toolbar

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

    Show rulers

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

    Rulers

答案 2 :(得分:1)

点击Chrome设置,然后:

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

enter image description here

答案 3 :(得分:1)

在开发者模式下按 Ctrl+Shift+P 然后输入 Ruler enter image description here