---
url: https://sugarat.top/technology/study/chrome-debug4.md
---

# Chrome 调试技巧-Elements

这一篇主要记录元素面板相关的技巧内容

## 快速隐藏元素

选中元素然后按 `h` 切换元素的可见状态，本质上是自动控制 `visibility:hidden`

## 上下移动元素

Ctrl+方向键

## 阴影编辑器

![图片](https://img.cdn.sugarat.top/mdImg/MTYyMTIxOTQ3MzU5MA==621219473590)

## 贝塞尔曲线编辑

![图片](https://img.cdn.sugarat.top/mdImg/MTYyMTIxOTU4MDIyOQ==621219580229)

## 展开所有子节点

![图片](https://img.cdn.sugarat.top/mdImg/MTYyMTIxOTc5Mzg0NQ==621219793846)

快捷键`alt`+`鼠标左键`

## 调色盘

![图片](https://img.cdn.sugarat.top/mdImg/MTYyMTIyMDI4NjI2Mw==621220286263)

上方双箭头切换颜色格式，下方双箭头切换调色盘

![图片](https://img.cdn.sugarat.top/mdImg/MTYyMTIyMDUzMTI1Mw==621220531253)

通过文字的color属性打开的面板可以看到字体颜色与背景色的对比度评分