版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。
版权
debug专栏收录该内容
1 篇文章0 订阅
订阅专栏
Chrome开发者模式及debug mode的使用
Chrome 开发者工具Chrome开发者工具是Web开发的调试工具,可用来对网站进行调试和分析。打开方式菜单中选择更多工具>开发者工具在页面中右键,点击选择检查使用快捷键Command+Option+I或F12+Fn面板
元素面板
可以自由的操作DOM和CSS来迭代布局和设计页面。
控制台面板
这个除了查看错误信息、打印调试信息(console.log())、写一些测试脚本以外,还可以当作Javascript API查看用。例如我想查看console都有哪些方法和属性,我可以直接在Console中输入"console"并执行~。
源代码面板
设置断点来调试 JavaScript ,或者通过Workspaces(工作区)连接本地文件来使用开发者工具的实时编辑器。
网络面板
了解请求和下载的资源文件并优化网页加载性能
性能面板
通过记录和查看网站生命周期内发生的各种事件来提高页面的运行时性能。
内存面板
如果需要比时间轴面板提供的更多信息,可以使用“配置”面板,例如跟踪内存泄漏。
应用面板
检查加载的所有资源,包括IndexedDB与Web SQL数据库,本地和会话存储,cookie,应用程序缓存,图像,字体和样式表。
安全面板
调试混合内容问题,证书问题等等
审计面板
Lighthouse,自动化测试工具,用来分析页面性能。在Sources面板中断点调试直接在浏览器中打断点console.logvuejs devtools.
谷歌浏览器chrome的vuejs devtools 插件的安装
debugger