Chrome Devtools

Chrome Devtools 使用技巧

1.网页可编辑

(1)document.designMode = ‘on’ (2)打开任何网站，在网址栏输入:可手机端 javascdy.setAttribute(‘contentEditable’,’true’);

2.chrome 网页全屏、元素截图

（1）移动端 点击右上角三个点 里面的full即可全屏截图 （2）pc端 打开devtools ctrl+shift+p 打开命令行 输入full即可 （3） 截图单个元素 选择一个元素，MAC下按cmd+shift+p、windows下按ctrl+shift+p来打开命令菜单，然后输入Capture node screenshot

3.条件断点

（1）在断点的地方右键，选择“Edit breakpoint”就可以写上你想出现调试的条件表达式 （2）在sources面板 现在要断点的代码 ctrl+shift+e 在控制台运行当前选中的代码片段

4.将修改后的CSS保存到文件

（1）点击你编辑的CSS文件的名称，进入到Sources面板，你会发现你的修改已经在里面了。然后你可以对你实时的编辑进行保存。 这个修改不适用于添加的新选择器，也不适用于element.style属性，仅仅适用于原有选择器。

5.轻松获取某个审查元素的引用

（1）打开控制台，在 Elements 界面下，对着某个 dom 标签点击右键，选择 Store as global variable。

6.创建并钉住一个动态表达式

7.禁用缓存和保存日志

（1）缓存有时候会造成很多难以排查的 bug，为了排除这个因素，你可以勾选Network 界面下的 Disable cache 选项（它只在 DevTools 窗口打开时生效）。

8.Chrome Workspace

（1） 在sources面板中, 通过 Workspace，你可以把本地服务器的资源映射为硬盘上的文件，实现调试 JS 和 CSS 的同时自动保存文件，比如 Elements 面板中的样式变更会自动保存到文件中。