这是我参与「第四届青训营 」笔记创作活动的的第7天
前端的发展、更新迭代是很快的，虽然入门容易，但是要一直走下去，就需要持续不断的学习。只有勇于挑战自己舒适区外的东西，才能不断进步。
pc端调试
Element界面
用的较多，截屏是第一次见
截屏
body右键 --> Capture node screenshot
Console界面
展示日志的界面
-
console.log
-
console.warn
-
console.debug
-
console.info
-
console.table --- 具象化的展示 JSON 和 数组数据
-
console.dir --- 通过文件树的方式展示对象的属性
-
占位符，给日志添加样式，可以突出重要信息（%s: 字符串占位符； %c: 样式占位符； %d: 数字占位符）
sources
调试压缩后的代码 --- Source Map
前端代码天生具有“开源”属性，出于安全考虑，上线之前JavaScript代码通常会被压缩，压缩后的代码只有一行，变量使用‘a’, 'b'等替换，整体变得不可阅读。那么压缩后的代码怎么调试呢？
使用Source Map映射源码，上线一般不用source map(带着source map 打包，删除source map产物再上线),如果上线的项目出现问题，可以去有source map的监控平台查找对应源码方便后续解决问题。
开启和关闭source map
NetWork界面
设置网络
查看各种类型的请求
和后端联调，定位问题
Application界面
展示和浏览器本地存储相关的信息
- Local Storage
- Session Storage
- IndexedDB
- Web SQL
- Cookie
一键清除所有缓存信息
Performance界面
展示和网页性能相关的信息
页面卡顿 --》 查看FPS指标 --》 寻找性能瓶颈 --》 优化代码
fps正常是60多，如果很低的话可能出现丢帧情况，打开下面的选项可以查看fps面板
下面fps为40+，显然低于正常情况
LightHouse界面
比Performance更简单的展示页面性能信息
移动端H5调试
真机调试
VConsole
使用代理工具调试
常用代理工具
Node.js调试
Inspector Protocol + Chrome
Inspector Protocol + VS Code
常用开发调试技巧
线上及时修改 Overrides
利用代理解决开发阶段的跨域问题
原理：浏览器的同源策略影响的是浏览器和服务器之间的请求连接，而服务器和服务器之间没有同源策略可以相互请求发送数据，所以代理就是使用同源的服务器接收浏览器的请求，收到请求后再使用该服务器向真正有数据的非同源服务器发送请求从而得到数据
