谷歌调试工具

1. 将数据以表格的形式呈现console.table()。
2. 关闭base64图片的地址hide data URLs。
3. 选择Fetch/XHR即查看用到的接口和请求。再在请求的标题栏鼠标右键，即可选择想要显示的内容。一般可以把请求的方式显式出来。
4. 一般可以把禁用缓存勾选上。disable cache
5. network用来显示网络请求，模拟网络的好坏。
6. 响应头信息中（header），如果是get请求，在最后一栏会有Query String Parameters，是url中？后面的参数。在第一栏General中的路径中也会有，当我们没拿到数据时，需要查看此处是否正确。
7. 响应头信息中（header），如果是post请求，在最后一栏会有FormData。
8. 在priview中，只是将响应回来的数据进行了格式化
9. 在response中，才是当前请求从服务器响应给我们的数据。
10. 在initator是当前请求使用资源和堆栈的情况。
11. 在timing中，表示当前请求响应的时间。
12. 在elements中，鼠标选中某个标签时，按H可将选中元素进行隐藏。上下拖动可以变换元素的位置
13. 切换控件面板的位置ctrl + shift + d
14. 切换控制面板中第一行标签：ctrl+[ / ctrl+] 或者ctrl+1-9（需要设置允许使用快捷键）
15. 标签栏最后的三点里的run command（快捷键ctrl+shift+p），是浏览器常用命令。比如 screen node，是节点图，可以选选中节点，再执行这个命令，截出的图会自动保存。比如layout用于切换控制面板的位置。比如theme用于切换主题。
16. 谷歌浏览器插件：feHelper，下载完文件直接拖进扩展应用里面即可。
17. 在控制台的console面板中输入document.body.contentEditable="true"，则页面上的内容可随意删除修改。
18. console中的$:（一直到$4）。可以尝试一些相关操作，比如：$1.appendChild($0)
    • $0对当前选中的html节点的引用。
    • $1对上一次选中的html节点的引用。
19. 如果没在app中定义过$变量（如jquery的话），那么$在console中就是对document.querySelector的简写。
20. $_是对打印的上次结果的引用。快速测试一些npm包，运行$i('loadsh')或者$i(moment)几秒钟后，就可以获得loadsh包和moment包了。前提条件：安装谷歌插件Console Importer。（插件可以去百度，一般第一条就是，要去github上下。）
21. 在控制台打印了值，可以用copy(变量名)将值复制出来。用ctrl+v粘贴就行。
22. 条件断点：在source面板中调试js时，可以在打完断点后，右击打断点的行号，然后，选择edit breakpoint，在里面写条件即可。按f10可执行下一步。
23. 存储打印的值：比如控制台打出一个对象，鼠标右击，选择存储为一个全局变量，然后用copy(全局变量名)，就可以把这个对象存储在变量里，在外面文件用ctrl+v就可以粘贴出来。
24. 给打印的文字添加样式：console.log('%chellow','color:hotpink;font-size:36px;fong-weight:600')。即在打印的文字前加%c，然后，用逗号隔开，就可以写样式了。
25. 给打印的Logs加上时间戳: ctrl+shift+p，在打开的run command中搜索Show timestamps；
26. console面板中的小眼睛用来执行js表达式。比如点击小眼睛，在里面写上click=function(){console.log('中秋快乐')}，则在鼠标一点击页面时，控制台就会打印出中秋快乐。
27. 可以在workspace中进行阴影的调试。workspace在source面板中的filestyme，点击加号，将文件拖进去，然后浏览器上方会弹出一个判断，选择允许。文件即进来了。
28. 在element面板中的右侧有:hov是用来给元素加伪类的。.cls是用来给元素加class类的。
29. 查看或修改placeholder的样式。在设置里的元素里勾选show user agent shadow dom。
30. 查看元素绑定事件：元素面板右侧的eventListener。里面有当前选中元素绑定的事件，事件里的handler是执行函数，鼠标悬浮上去可以看到执行的函数。
31. 打开控制面板后，再按esc，可以再打开一个面板。changes可以对比改变前后的变化，像git。
32. 给请求打断点，定义请求具体在文件中的位置。source面板中右侧的xhr/fetch breakpoints，点击加号，把要监视的请求url粘贴在框里。
33. 打断点：sources→双击需要调试的文件→点击行号打断点，然后再次刷新页面，F8以断点为步长执行代码（注意，下一步也可能是当前断点处），F10以“语句”为步长执行代码。如果在调试过程中想观察某个变量的动态变化，选中该变量并“Add selected text to watches”，即可在右侧watch出监视该变量（也可以点“+”输入变量名添加）。