09月22日, 2014 135次
截图DOM元素
当你只想截图某个特定的DOM节点时，可能需要长时间使用其他工具，但现在你可以直接选择那个节点，打开Command菜单，使用该节点的截图。
上面对应截取特定节点的命令就是截图截图节点截图。
截取特定DOM元素的示例：
不仅如此，还可以通过这种方式进行全屏拍摄：通过截图捕捉全尺寸截图命令。
请注意，这是全屏，不仅仅是页面的可见区域，而是包括滚动条在内的所有页面内容。
捕捉全屏的示例：
在控制台中使用上次操作的值
我是最近才发现这个技能的。使用$ _引用在控制台上执行的前一个操作的返回值。如果你在控制台调试一些JavaScript代码，需要参考前面的返回值，这可能会很方便。
重新发起xhr请求
在平时和后端联调中，我们大概用得最多的就是Network面板了。然而，每次我们想要查看一个请求时，我们经常通过刷新页面、点击按钮等来触发xhr请求。这有时很麻烦。我们可以通过谷歌提供的Replay XHR发起新的请求，这有助于提高我们的开发效率。
编辑页面上的任何文本
在控制台中输入document.body.editable= true 或document.designMode= on 来编辑网页。
其实这个还是挺实用的，比如你想测试当一个DOM节点的文本太长的时候，样式是否会混淆，或者你想直接修改页面元素来满足一些业务需求。(我曾经在“元素”面板中逐个修改它们。).
网络面板（Network）的幻灯片模式
加载页面时，在“网络”面板下开始捕获屏幕截图。感觉像幻灯片。单击每一帧的屏幕截图，其中显示了在相应时间发生的网络请求。这种可视化的演示将使您更加了解每时每刻发生的网络请求。
动画检查
DevTools中有一个动画面板，默认情况下是关闭的。很多人可能不知道这个功能。它允许您控制和操作CSS动画，并可视化这些动画如何工作。
要打开这个面板，可以在DevTools的右上角菜单rarr在更多工具中打开动画：
210521/366/442879.png alt= Chrome DevTools中的操作有哪些
默认情况下，DevTools 会“监听”动画。一旦触发，它们将被添加到列表中。你能看到这些动画块如何显示。在动画本身上，DevTools 会向我们展示哪些属性正在更改，例如 background-color 或 transform。
然后，我们可以通过使用鼠标拖动或调整时间轴来修改该动画。
递增/递减 CSS 属性值
作为前端开发，平时少不了通过Elements面板去查找元素以及它的css样式。有时调整像素px会比较麻烦一点，这时就可以使用快捷键去帮你完成：
* 增量0.1 * Mac：Option +向上和Option +向下 * Windows：Alt +向上和Alt +向下 * 增量1 * Mac：向上+向下 * Windows：向上+向下 * 增量10 * Mac：⇧+向上和⇧+向下 * Windows：⇧+向上和⇧+向下 * 递增100 * Mac：⌘+向上和⌘+向下 * Windows：Ctrl +向上和Ctrl +向下
在低端设备和弱网情况下进行测试
我们平时开发一般都是在办公室（wifi 网速加快），而且设备一般都是市面上较新的。但是产品的研发和推广，一定要考虑低设备人群和弱网的情况。
在Chrome DevTools中可以轻松调节CPU功能和网络速度。这样，我们就可以测试 Web 应用程序性能并进行相应优化。
具体打开方式是：在Chrome DevTools中通过CMD/Ctrl + Shift + p打开命令菜单。然后输入Show Performance打开性能面板。
copying saving
在调试的过程中，我们总会有对 Dev Tools 里面的数据进行 复制 或者 保存 的操作，其实他们也是有一些小技巧的！
copy()
可以通过全局的方法 copy() 在 console 里 copy 任何你能拿到的资源
Store as global variable
如果在console中打印了一堆数据，想对这堆数据做额外的操作，可以将它存储为一个全局变量。只需要右击它，并选择 “Store as global variable”选项。第一次使用的话，它会创建一个名为 temp1 的变量，第二次创建 temp2，第三次 。通过使用这些变量来操作对应的数据，不用再担心影响到他们原来的值。
自定义 devtools
大家平时用的最多的Chrome 主题可能就是白色/黑色这两种了，但用的久了，难免想尝试像IDE一样切换主题。
打开方式