元素面板 - 技巧集合

1. 通过 'h' 来隐藏元素

按一下 'h' 就可以隐藏你在元素面板中选择的元素。再次按下 'h' 可以使它出现。某些的时候这很有用：例如你想截图，但你想去掉里面的敏感信息。

devtoolxx3.png

2. 拖动 & 放置 元素

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

devtoolxx4.png

3. 展开元素的所有子节点

使用右击节点后的 expand recursively 命令

devtoolxx5.png

4. DOM 断点

有时脚本修改了 DOM ，但修改的是哪部分？什么时候修改的呢？
这样的情况下，你就可以添加一个 DOM 断点：监听节点被添加或者移除 / 属性被改变。

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

  
  
  devtool3.png

页面重新加载时会记住断点。当你设置了一个或多个断点的时候，可能都忘了它们所标记的位置了。怎么找它们呢？：在 Elements 视图中有视觉提示，Sources 中也有专用列表。

devtool4.png

devtoolyy1.png

devtoolyy2.png

console

console 中的 '$'

1.$0
在 Chrome 的 Elements 面板中， $0 是对我们当前选中的 html 节点的引用。$1 是对上一次我们选择的节点的引用，$2 是对在那之前选择的节点的引用，等等。一直到 $4。
2.$
如果你没有在 App 中定义过 $变量 (例如 jQuery )的话，它在 console 中就是对这一大串函数 document.querySelector 的别名。
3.$_ 是对上次执行的结果的 引用

copy方法

你可以通过全局的方法 copy() 在 console 里 copy 任何你能拿到的资源，例如 copy($_) 或 copy($0)

devtoolzz1.png

Conditional breakpoints 条件断点

devtoolzz2.png

devtoolzz3.png

使用 Command

我们直接可以直接看到的 DevTools 的功能，其实只是有限的一部分
Command 菜单可以帮助我们快速找到那些被隐藏起来的功能

Command打开方式

• 在 Chrome 的调试打开的情况下 按下 [⌘] + [Shift]+ [P] (windows [ Ctrl] + [Shift] + [P] )

• 或者使用 DevTools 的 dropdown 按钮下的这个选项

  
  
  devtool02.png

可供选择的命令列表，归为几个部分

devtool_01.png

1.截屏

当你只想对一个特别的 DOM 节点进行截图时，你可能需要使用其他工具弄半天，但现在你直接选中那个节点，打开 Command 菜单并且使用 节点截图 的就可以了。

devtoolxx0.png

不只是这样，你同样可以用这种方式 全屏截图 - 通过 Capture full size screenshot 命令。请注意，这里说的是全屏，并不是嵌入页面的一部分。一般来说这可是得使用浏览器插件才能做到的事情！

注：节点截图有时会失效，全屏截图暂时没有遇到问题，建议大家使用后者。

2.快速切换面板

打开 Commands 菜单并且输入 layout ，你会看到 2 到 3 个可供选择的项(这里不再显示你已经激活的选项)：

devtoolxx1.png

3.快速切换主题

在 Commands 菜单中寻找与 theme 相关的选项，实现 明亮 & 暗黑 两种主题之间的切换：

devtoolxx2.png