- Published on
19-元素面板的基本操作
- Authors
- Name
- Dendoink
- @Magiciaaaaaaaan
💡
问题 几乎每次打开 Chrome 进行调试都会用到元素面板,那你知道有哪些技巧吗?
'h'
来隐藏元素
1. 通过 按一下 'h'
就可以隐藏你在元素面板中选择的元素。再次按下 ' h
' 可以使它出现。某些的时候这很有用:例如你想截图,但你想去掉里面的敏感信息。

2. 拖动 & 放置 元素
当你想看看页面的某一部分在 DOM
树的不同位置的显示效果时,只需要拖动放置它(到指定的位置),就像在机器上的其他任何地方一样 :-)

control
(按钮) 来移动元素!
3. 使用 如果你只是想移动你当前选中的元素,在 DOM
结构中往上挪一点或者往下挪一点,而不是拖动和放置,你同样可以使用 [ctrl]
+ [⬆]
/ [ctrl]
+ [⬇]
( [⌘]
+ [⬆]
/ [⌘]
+ [⬇]
on Mac).

Related series
00-写在前面
March 2, 2021
01-Chrome 版本
March 2, 2021
02-复制 & 保存
March 2, 2021
03-快捷键和通用技巧
March 2, 2021
04-使用 Command
March 2, 2021
05-代码块的使用
March 2, 2021
06-console 中的 $
March 2, 2021
07-console.log 的 "bug" ?
March 2, 2021
08-异步的 console
March 2, 2021
09-Ninja console.log
March 2, 2021
10-自定义格式转换器
March 2, 2021
11-对象&方法
March 2, 2021
12-console.log 并不简单
March 2, 2021
13-打造一个终极 log
March 2, 2021
14-打印时间戳
March 2, 2021
15-直接把 `log` 作为回调函数
March 2, 2021
16-初窥 Network
March 2, 2021
17-Network 深入
March 2, 2021
18-Network 细节
March 2, 2021
19-元素面板的基本操作
March 2, 2021
20-元素面板调试技巧
March 2, 2021
21-元素面板里的编辑器
March 2, 2021
22-颜色选择器
March 2, 2021
23-Drawer 使用技巧
March 2, 2021
24-Drawer 动画调试
March 2, 2021
25-Drawer 性能优化
March 2, 2021
26-Workspace 使用技巧
March 2, 2021
27-自动美化输出
March 2, 2021
28-CSS 概览
March 2, 2021
29-Custom UI Themes
March 2, 2021
30-Source diff
March 2, 2021