这是我参与「第四届青训营 」笔记创作活动的第8天

今天学习了开发中的调试使用，大体了解了一些调试知识，方便我们在开发中进行颜色，布局，网络情况，bug等排查，更加快速的定位自己想改动的代码。下面是根据老师ppt进行的笔记整理。

1.bug与debug

1-1.bug的产生

bug的产生主要是代码执行后没有达到预期效果

1-2前端 Debug特点

• 多平台：浏览器、nodejs、桌面应用

• 多环境：本地开发环境、线上开发环境

• 多工具：Chrome devTools、Charles、Spy-Debugger、Whistle、vConsole

• 多技巧：Console、BreakPoint、SourceMap、代理

2.Chrome devtools

2-1.动态修改元素和样式

• 点击.cls 开启动态修改元素的class

• 输入字符串可以动态的给元素添加类名

• 勾选/取消类名可以动态的查看类名生效效果

• 点击具体的样式值(字号、颜色、宽度高度等)可以进行编辑，浏览器内容区域实时预览

• Computed下点击样式里的箭头可以跳转到styles面板中的CSS规则

2-2.console

• console.log
• console.warn
• console.error
• console.debug
• console.info
• console.table

具像化的展示JSON和数组数据

• console.dir

通过类似文件树的方式展示对象的属性 占位符 给日志添加样式，可以突出重要的信息%s:字符串占位符; %o: 对象占位符，%c:样式占位符; %d:数字占

2-3.sources

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

• 区域2:代码预览区域

• 区域3: Debug工具栏

  从左到右依次为

  • 暂停(继续)
  • 单步跳过
  • 进入函数
  • 跳出函数
  • 单步执行
  • 激活(关闭)所有断点
  • 代码执行异常处自动

• 区域4:断点调试器

2-4.Network

2-5.Application

2-6.Performance

2-7.Liaghthouse