1.应用场景
使用Chrome进行前端开发调试. |
2.学习/实践
1. console对象 //控制台console.log()与console.error()的区别 在控制台中打印数据,两者都能打印出信息,且信息相同,只是颜色不同,前者为黑色,后者为红色[红色警告之意] 补充: console.log("下标为%d的元素值为%d" ,1,2); //下标为1的元素值为2
效果如下: 更多用法:见 //很强势 console.log - Web API 接口参考 | MDN console 对象与控制台 - JavaScript 教程 - 网道 //阮一峰 - console 对象与控制台 2. 调试信息
3. 打断点 前端调试代码很重要, 很有用.
4. 刷新
5.用户模式/访客模式/无痕模式
6.查看Js脚本执行时间方法一: 通过开发者工具-->performance来查看 方法二: 通过代码计算
7.通过console定位到目标节点的位置定位到: 补充: 8.查看指定节点[dom]监听/绑定的事件截图: 推荐阅读:https://coolshell.cn/articles/17634.html // Chrome开发者工具的小技巧 |
3.问题/补充
1. 关于Chrome处理您的连接不是私密连接解决办法-解决: |
4.参考
https://developers.google.com/web/tools/chrome-devtools/ // Chrome DevTools 官方文档 https://coolshell.cn/articles/17634.html // Chrome开发者工具的小技巧 https://blog.littlebill.me/2013/04/technology.html // 转载-大牛文章 https://juejin.im/post/5ca8ca1b6fb9a05e5b2ad815 // 超实用的 chrome 扩展推荐 --- 很多, 有一些还是挺实用的 https://juejin.im/post/5e5d1527e51d4526d87c77a8 //提升 Chrome 使用效率的 30个快捷键、16个扩展插件与 11个前端调试 console 对象与控制台 - JavaScript 教程 - 网道 // 阮一峰 - console 对象与控制台方法 21 | Chrome开发者工具:利用网络面板做性能分析-极客时间 // 21 | Chrome开发者工具:利用网络面板做性能分析 加餐三|加载阶段性能:使用Audits来优化Web性能-极客时间 // 加餐三|加载阶段性能:使用Audits来优化Web性能 加餐四|页面性能工具:如何使用Performance?-极客时间 // 加餐四|页面性能工具:如何使用Performance? |
后续补充
...