chrome调试技术

末蓝、 2022-05-20 10:30 238阅读 0赞

\#chrome devtool

\#\#打印

1.  console.table()  
    通常打印都用console.log 但是console.log显示的数组或json不够美观，console.table会以表格形式输出内容(可以打印多维数组，和对象)  
    ![这里写图片描述][70]  
    ![这里写图片描述][70 1]
2.  console.dir（用于打印dom对象）  
    是侧重于字符串化的打印，console.dir能递归所有的对象属性,console.log只能打印对应的节点信息  
    ![这里写图片描述][70 2]
3.  打印带有样式  
    console.log(’%c 这是我输入的内容 ',‘background:\#ccc;color:red’)
4.  console.trace 追踪函数调用

\#\#检查没有用的css/js  
  
chrome59新增功能，能够检查页面上的css/js没有用到的比例，打开devtooles --> coverage 绿色的是用到的，红色是没有用到的  
\#\#debugger(在代码中写入debugger，当代码运行到这个位置的时候会打断点)

## 调试技巧推荐 ##

1.  [Chrome Web Performance][]
2.  [inspector][]
3.  [性能优化方案][Link 1]
4.  [TimeLines使用详解][TimeLines]
5.  [页面性能优化的利器 — Timeline][_ Timeline]
6.  [网页调试工具使用技巧汇总之断点][Link 2]
7.  快捷键：[https://developer.chrome.com/devtools/docs/shortcuts][https_developer.chrome.com_devtools_docs_shortcuts]
8.  一些console指令：[https://developer.chrome.com/devtools/docs/commandline-api][https_developer.chrome.com_devtools_docs_commandline-api]
9.  基本的方法：[https://developer.chrome.com/devtools/docs/dom-and-styles][https_developer.chrome.com_devtools_docs_dom-and-styles]
10. Debug JS的进阶：[https://developer.chrome.com/devtools/docs/javascript-debugging][https_developer.chrome.com_devtools_docs_javascript-debugging]
11. tips and tricks：[https://developer.chrome.com/devtools/docs/tips-and-tricks][https_developer.chrome.com_devtools_docs_tips-and-tricks]

[70]: /images/20220520/7f84ba0ef7d842eba472e1ba90b60cdc.png
[70 1]: /images/20220520/5901da4e8c11426c9f2b245b8d66b3d3.png
[70 2]: /images/20220520/ba72f9bfe69d427b94c3def0994f1948.png
[Chrome Web Performance]: https://developers.google.com/web/fundamentals/performance/?hl=en
[inspector]: https://x5.tencent.com/tbs/document/doc-inspector.html
[Link 1]: https://x5.tencent.com/tbs/document/doc-chrome.html
[TimeLines]: https://x5.tencent.com/tbs/document/doc-timeLines.html
[_ Timeline]: https://x5.tencent.com/tbs/document/doc-timeLines-debug.html
[Link 2]: https://x5.tencent.com/tbs/document/doc-inspector-debug.html
[https_developer.chrome.com_devtools_docs_shortcuts]: https://developer.chrome.com/devtools/docs/shortcuts
[https_developer.chrome.com_devtools_docs_commandline-api]: https://developer.chrome.com/devtools/docs/commandline-api
[https_developer.chrome.com_devtools_docs_dom-and-styles]: https://developer.chrome.com/devtools/docs/dom-and-styles
[https_developer.chrome.com_devtools_docs_javascript-debugging]: https://developer.chrome.com/devtools/docs/javascript-debugging
[https_developer.chrome.com_devtools_docs_tips-and-tricks]: https://developer.chrome.com/devtools/docs/tips-and-tricks