这是我参与「第五届青训营 」伴学笔记创作活动的第10天
PC端
Chrome DevTools
- elements
- console
- sources
- memory
- network
- application
- lighthouse
- performance
- ...
Elements
点击.cls，动态修改元素类名。
在下方动态修改元素样式。
对于伪类，我们可以通过右键中的强制改变状态来调试伪类效果。
或者选择:hov进行调试。
也可以在computed中动态搜索调试想要的效果。
console
在代码中添加了console,就可以直接在控制台看到所需要打印的数据，
- console.log('Hello');
- console.warn('Hello');
- console.error('Hello');
- console.debug('Hello');
- console.info('Hello');
- console.log('%s %o,%c%s', 'hello', {
name: 'tom',
age: 18
}, 'font-size:24px;color:red', 'Welcome to betydance!')
- console.time()
- console.table()：具象化展示JSON和数组
- console.trace()
- console.dir()：通过类似文件树的方式展示对象属性
Source
用来展示项目源代码。 包括页面资源文件目录树，代码预览工具和Debug工具栏和断点调试器。 其中Debug工具栏从左到右依次为：
- 暂停（继续）
- 单步跳过
- 进入函数
- 跳出函数
- 单步执行
- 激活（关闭）所有断点
- 代码执行异常处自动
代码debugger
这种使用方式也是很简单，直接在代码中需要断点的地方，直接添加代码debugger即可，当js执行到该语句的时候，会自动暂停，进而可以看到详细的信息，也可以一步步的调试代码。不过后面一定要删除该语句，否则有意外之喜。
浏览器断点
在浏览中断点和在代码中断点的操作原理一样，但是浏览器断电可以省去删除代码中bedugger的方式，F8可以直接跳转到下一个断点，F10可以单步骤调试，F11可以直接进入方法，也相当于单步调试了。
通过scope查看作用域，通过call stack查看调用栈。
也可以监听网络请求/DOM元素的断点。
source-map
前端代码天生具有“开源“属性，打包工具会对代码进行压缩和混淆，基本不可阅读，难以调试。
我们可以通过source-map进行映射，将源码与压缩后代码进行映射。
source-map中包含源码，压缩后代码带上source map上线后又不安全了，同时还增大了代码体积。
在实际开发中，项目打包时带上source map，之后将source map上线到另一个平台进行监控，而不是直接和压缩后源码一同上线。
Network
可以通过此界面查看网页发送的网络请求。 可以通过限制界面进行弱网适配。
对于列表中每个请求，可以点开查看详细信息。
Application
存储相关
Performance
性能面板，包括控制面板，概览面板，线程面板和统计面板。
性能问题解决思路：
- 查看FPS指标
- 发现性能瓶颈
- 优化代码
LightHouse
展示的Web指标，并给出优化建议。
三个核心指标：
- LCP Largest Contentful Paint：最大内容绘制（最好小于2.5秒）
- FID First Input Delay：首次输入延迟（最好小于100毫秒）
- CLS Cumulative Layout Shift：累计布局偏移（应保持在0.1或更小）
移动端
一般开发者工具里会有对应的调试工具，和PC端的差不多，真机调试的话需要用数据线连接两个设备，并且需要额外的插件进行调试。
