这是我参与「第五届青训营 」伴学笔记创作活动的第 11 天
Bug的产生
前端Debug的特点
01.多平台
浏览器、Hybrid、NodeJs、小程序、桌面应用等。
02.多环境
本地开发环境、线上环境
03.多工具
Chrome devTools、Charles、Spy-Debugger、whistle、vConsole ...
04.多技巧
Console、BreakPoint、sourceMap、代理等
一、动态修改元素和样式
点击.cls开启动态修改元素的class
输入字符串可以动态的给元素添加类名
勾选/取消类名可以动态的查看类名生效效果
点击具体的样式值(字号、颜色、宽度高度等)可以进行编辑，浏览器内容区域实时预览
Computed下点击样式里的箭头可以跳转到styles面板中的css规则
二、Console
console.log
console.error
console.debug
console.info
console.table 具像化的展示JSON和数组数据
console.dir 通过类似文件树的方式展示对象的属性
占位符 给日志添加样式，可以突出重要的信息
%s:字符串占位符;%o:对象占位符;%c︰样式占位符;%d:数字占位符
三、Sorce Tab
Scope与Call Stack
展开Scope 可以查看作用域列表(包含闭包)、展开Call Stack可以查看当前 raScript 代码的调用栈
压缩后的代码如何调试？
前端代码天生具有“开源”属性，出于安全考虑，上线之前JavaScript代码通常会被压缩，压缩后的代码只有一行，变量使用,a'、"b'等替换，整体变得不可阅读。那么压缩后的代码如何调试呢?
Source Map
四、performance
五、移动端调试
1.真机调试
2.VConsole
日志(Logs) : console.log|info|error\
网络(Network): XMLHttpRequest,Fetch, sendBeacon
节点(Element) : HTML节点树
存储(Storage) : Cookies, LocalStorage,SessionStorage
手动执行JS命令行
自定义插件
3.使用代理工具调试
标题：前端开发调试之 PC 端调试 - 掘金
