这是我参与「第四届青训营」笔记创作活动的第6天。
以下内容主要介绍了前端开发必须知道的一些开发调试知识。

一、Chrome DevTools

Chrome DevTools 是Chrome游览器自身携带的游览器调试工具。对于平常前端代码bug的修复有着极其重要的作用，那么接下来让我们一起来了解Chrome DevTools这款调试器的具体使用。
首先是Elements区域：

Elements部分是前端代码的html和css部分，具有以下功能。

• 点击.cls开启动态修改元素的class
• 输入字符串可以动态的给元素添加类名
• 勾选/取消类名可以动态的查看类名生效效果
• 点击具体样式值（字号、颜色、宽度、高度等）可以进行编辑，游览器内容区域实时预览。
• computed下点击样式里的箭头可以跳转到styles面板中的css规则

还可以用以下2种方式强制激活伪类：

• 选中具有伪类的元素，点击：hov
• DOM树右键菜单，选择Force State

然后是console区域：

可以直接打印输出看结果，有以下效果：

• console.log
• console.warn
• console.error
• console.debug
• console.info
• console.table——具象化的展示JSON和数组数据
• console.dir——通过类似文件树的方式展示对象的属性
• 占位符——给日志添加样式，可以突出重要信息
  %s：字符串占位符；%o：对象占位符；%c：样式占位符；%d：数字占位符

然后是Source Tab区域：

Source的Break Point与Watch区域:

Source的Scope 与Call Stack区域：

然后是NetWork区域：

然后是Application区域：

然后是PerFormance区域：

示例如下：

然后是Lighthouse部分：

二、移动端h5调试

1、真机调试

模拟真机的工具

2、代理工具调试

常用代理工具：

三、Nodejs调试

1、node面板进行调试

2、vscode进行node调试

四、常用开发调试技巧

1、线上即时修改Overrides

2、代理解决跨域问题

3、代理工具Mock数据

（仅提供方向，不具体阐述）