前端必须知道的开发调试知识| 青训营笔记
这是我参与「第四届青训营 」笔记创作活动的第8天 前端必须知道的开发调试知识
1、什么是BUG
bug是什么意思?
bug本意是臭虫、缺陷、损坏、窃听器、小虫等意思。现在人们将在电脑系统或程序中，隐藏着的一些未被发现的缺陷或问题统称为bug(漏洞),如一些游戏中不完善的地方。 另外由于现在社会的发展bug另有一种引申意义用来形容某事物厉害的超乎想象BUG可以使电脑系统崩溃，容易被攻击，现有修复漏洞工具。
2、前端Debug的特点
多平台 浏览器、nodejs、小程序、桌面应用…
多环境 本地开发环境、线上环境…
多工具 chrome、devTools、Charles、Spy-Debugger、vConsole…
多技巧 Console、BreakPoint、sourceMap
3、Chrome DevTools
- Chrome DevTools–Element工具栏
页面上右键–>检查工具，或者直接F12键显示出来。
动态修改元素和样式
- 点击.cls开启动态修改元素的class
- 输入字符串可以动态的给元素添加类名
- 勾选/取消类名可以动态的查看类名生效效果
- 点击具体的样式值（字号、颜色、宽度高度等）可以进行编辑，浏览器内容区域实时预览
- Computed下点击样式里的箭头可以跳转到styles面板中的CSS规则
- Chrome DevTools–Console日志工具栏
console日志工具栏是我们在写js代码时用到的最多的，我们可以在js代码中插入相应的语句，在devTools中查看相应的输入日志，在函数的不同阶段插入不同的console可以帮助我们观察到函数不同阶段变量的变化，帮助我们找出问题。
4、移动端H5调试
真机调试
真机调试时，如果使用有线连接非常不方便，建议直接扫码。可以使用Fehelper插件（推荐）将网站生成二维码，在局域网内里可以用手机直接扫码查看网站。
5、小黄鸭调试大法
6、总结
买个鸭子；对代码有帮助 🦆；
