前端开发调试之 PC 端调试

这是我参与「第五届青训营 」伴学笔记创作活动的第 11 天

前端必须知道的开发调试知识

课程概要

1. Elements
2. Console
3. Source
4. Performance
5. Network

一、bug与debug

（一）、Bug的产生

（二）、前端Debug的特点

1.多平台 浏览器、Hybrid、NodeJs、小程序、桌面应用

2.多环境 本地开发环境、线上开发环境

3.多工具 Chrome devTools、Charles、Spy-Debugger、Whistle、vConsole..3

4.多技巧 Console、BreakPoint、sourceMap、代理等

二、Chrome Devtools

（一）、 Elements

动态修改元素与样式

1. 点击.cs 开启动态修改元素的 class
2. 输入字符串可以动态的给元素添加类名
3. 勾选/取消类名可以动态的查看类名生效效果
4. 点击具体的样式值（宇号、颜色、宽度高度等）可以进行编辑，浏览器内容区域实时预览
5. Computed 下点击样式果的箭头可以跳转到 styles面板中的 css 规则

可以用一下2种方式强制激活伪类 选中具有伪类的元素，点击：hov dom树右键菜单，选择Force State

（二）、 Console

区域1：页面资源文件目录树

页域2：代码预览区域

区域3：Debug 工具栏 从左到右依次为 哲停（继续） 单步跳过 进入函数 跳出函数 单步执行 激活（关闭）所有断点 代码执行异常处自动

区域4：断点调试器

（三）、 Source

压缩后的代码如何调试

前端代码天生具有，开源，属性，出于安全考慮，上线之前JavaSeript 代码通常会被压缩，压缩后的代码只有一行，变量使用;a、b'等替换，整体变得不可阅读。那么压缩后的代码如何调试呢？

mappings 宇段存储了源文件和 SSource Map 的映射 •英文，表示源码及压缩代码的位置关联 •返号，分隔一行代码中的内容。 •分号，代表换行。

（四）、 Performance

（五）、 Network

这里用Lighthouse对掘金作性能测试，可以看到performance：66分

总结： 前端作为一个与用户交互的位置，前端与后端联结表现出来的用户体验是十分重要的，这就涉及到前端的调试，前端调试从样式到控制台、性能体验、网络环境都相关，要不断优化前端代码来对前端体验进行优化。