这是我参与「第四届青训营 」笔记创作活动的第7天
前言
-
计算机程序错误被称为Bug,而调试程序被称为debug。实际上好的产品就是不断发现bug不断优化的结果
-
前端debug的场景和工具都非常丰富，下面来看下具体的实现
chrome Devtool(谷歌浏览器控制台)
1. 动态修改元素和样式
- 点击控制台右侧styles内的.cls可按照类名修改想要修改元素样式
- 在add class框中可添加想要的类名增加样式
- 可以点击某类名前面的勾选框取消类名查看对应界面效果
-
同时可设置某类名内具体的样式值，浏览器实时更新效果
-
点击Computed下的样式对应箭头跳转到使用该元素位置
2. console
- 打开console左侧的折叠框，可以看见下图左侧的
3.sorce Tab
打断点的两种方式（break point）
- 使用关键字在想要打断点位置的上一行写上debugger
- 在预览代码的位置某行左侧打断点
- 右侧有breakpoints列表，点击上面的暂停按钮可查看对应断点的信息
- 在watch处点击右侧的+可以添加对应变量的监控
压缩后的代码调试
- 由于js会被压缩，这样并不利于调试，这里就可以使用source map解决 blog.csdn.net/weixin_4059…
4.NetWork
5.Application
- 这里主要是本地存储相关信息
点击clear site data 清缓存
6.performance
- 页面卡顿这里就可以查看面板里的数据进行优化
