前端Debug的特点：1.多平台，如浏览器，hybrid，nodejs，小程序，桌面应用等，2.多环境如本地开发环境，线上环境，3.多工具如chrome devtools，charles，spy debhugger，whistle， vconsole，4.多技巧，如console，break point，sourcemap，代理。
chrome devtools.1.动态修改元素和样式：点击.cls开启动态修改元素的class，输入字符串可以动态的给元素添加类名，勾选或取消类名可以动态的查看类名生效效果，点击具体的样式值（字号，颜色，宽度高度等）可以进行编辑，浏览器内容区域实时预览，computed下点吉样式里的箭头可以跳转到styles面板中的css规则。 breakpoint与watch：1. 使用关键字de'bugger或代码预览区域的行号可以设置端点2.，执行到断点处时代码暂停执行，3.展开breakpoints列表可以查看断电列表，勾选或取消可以激活或禁用对应断点，4.暂停状态下，鼠标hover变量可以察看变量的值5.在调试器watch右侧点击+可以添加对变量的监控，查看该变量的值 scope与callstack：1.展开scope可以查看作用域列表（包含闭包）2.展开callstack可以查看当前JavaScript代码的调用线。 前端代码天生具有“开源”属性，出于安全考虑上线之前JavaScript代码通常会被压缩，压缩后的代码只有一行，变量使用‘a’‘b’等替换整体变得不可阅读。 sourcemap：mapping字段存储了源文件和sourcemap的映射，1.英文，表示源代码及压缩代码的位置关联2.逗号，分隔一行代码中的内容3.分号，代表换行， network：分为控制面板，过滤面板，概览区域，requesttable面板，总结面板，请求详情面板。 application：面板展示与本地存储相关的信息，localstorage，session storage ，lndexeddb，websql ，cookle，点击左侧application下的stroage面板中的clearsitedate可以清楚网页的本地存储数据。 performance运用示例：页面卡顿→查看fps→寻找性能瓶颈→优化代码。 lighthouse：核心web指标，largest contentful paint，最大内容绘制，测量加载性能。为了提供良好的用户体验，lcp应在页面首次开始加载后的2.5秒内发生。 fristinputdelav：首次输入延迟，测量交互性。为了提供良好的用户体验，页面的fid应为100毫秒或更短。 cumulative layout shift：累积布局偏移，测量视觉稳定性。为了提供良好的用户体验，页面的cls应保持在071或更少。
