除了基本的功能,还有哪些好用却不为人知的技巧?

# 1. 插入样式规则的按钮

把鼠标悬停在样式选择器的最下面,会看到几个可以快速添加 ColorShadow 属性的按钮:

  • text-shadow
  • box-shadow
  • color
  • background-color

# 2. 在元素面板中展开所有的子节点

一个一个点击 展开太慢?右键选择 expand recursively !:

# 3. DOM 断点

有时脚本修改了 DOM ,但修改的是哪部分?什么时候修改的呢?

这样的情况下,你就可以添加一个 DOM 断点:监听节点被添加或者移除 / 属性被改变。

  • 点击"..." 符号或者右击你想添加监听的元素

  • subtree modifications : 监听任何它内部的节点被 移除 或者 添加 的事件

  • attribute modifications : 监听任何当前选中的节点被 添加移除 或者 被修改值 的事件

  • node removal : 监听被选中的元素被 移除 的事件

页面重新加载时会记住断点。当你设置了一个或多个断点的时候,可能都忘了它们所标记的位置了。怎么找它们呢?:在 Elements 视图中有视觉提示,

有时你添加了断点的元素被隐藏在一些折叠起来的父级元素中,不要担心 - 他们会在 Element 中用高亮展示出来:

Sources 中也有专用列表:

微信扫码或搜索: 前端恶霸

在公众号对话框,发送

关注期间 无限制 浏览本站全部内容

内容包括 「Chrome 调试技巧」(持续更新),以及「React 学习指北」(即将上线)

为什么我需要关注?
加入读者交流群 扫描二维码回复 Chrome
Last Updated: 6/30/2020, 12:36:00 PM