能否在Google Chrome DevTools中添加参考线/缩进线？

当然可以！Chrome DevTools本身就自带实用的参考线功能，同时也能借助扩展满足更个性化的需求，下面给你一步步说明：

一、原生DevTools自带方法 #

1. 布局类参考线（Grid/Flexbox专属） #

如果你正在调试网格或弹性布局，这个原生功能最省心：

• 打开Elements面板，选中要调试的容器元素
• 打开右侧的Layout侧边栏（如果没显示，点击右上角的「⋮」按钮，勾选「Layout」即可）
• 找到「Grid」或「Flexbox」选项，开启对应的「Show grid overlay」或「Show flex overlay」，就能看到自动生成的布局参考线，帮你快速校验元素对齐情况。

2. 自定义自由参考线（Ruler工具） #

如果需要任意位置的水平/垂直参考线，试试这个工具：

• 按Esc键打开DevTools底部的抽屉（Drawer）
• 点击抽屉里的「⋮」按钮，选择「Ruler」工具
• 现在你可以在视口中拖拽创建参考线，右键点击还能调整颜色、锁定位置，甚至设置等距参考线，灵活度拉满。

3. 模拟文本缩进参考线 #

如果是需要直观查看文本缩进的边界，可以临时给元素加样式：

• 在Elements面板的Styles标签里，给目标元素添加：

  outline: 1px dashed #ff4444; /* 用红色虚线做参考标识 */
  padding-left: 2rem; /* 模拟你需要的缩进距离 */
  

  调试完成后删掉这段样式就行，非常方便。

二、借助扩展增强功能 #

如果原生功能不够贴合你的需求，试试这些热门扩展：

• Guides：可以快速添加批量的水平/垂直参考线，支持自定义间距、颜色，还能保存常用配置，适合有固定对齐标准的场景。
• PerfectPixel：虽然主打设计稿对比，但也支持添加辅助线，帮你精确对齐元素和设计稿的缩进、间距。

内容的提问来源于stack exchange，提问作者p7adams