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 面板中的样式变更会自动保存到文件中。