前端必须知道的开发调试知识|青训营笔记

这是我参与【第四届青训营】笔记创作活动的第3天

1.Web应用使用Chrome devTools调试

1.1 动态修改元素和样式

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

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

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

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

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

  可以用一下两种方法激活伪类

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

  1.2 Console

  console.log 普通打印

  console.warn 警告打印

  console.error 错误打印

  console.debug

  console.info

  console.table:具象化的展示JSON 和 数组数据

  console.dir: 通过类似文件树的方式展示对象的属性

  占位符：给日志添加样式，可以突出重要的信息。%s：字符串占位符

  %o：对象占位符

  %c：样式占位符

  %d：数字占位符

2、移动端H5 调试

2.1真机调试

2.2 VConsole

2.3 Sorce Tab

1. 左侧页面：页面资源文件树目录树\
2. 中间部分：代码预览区域\
3. 右上方区域：Debug工具栏，从左到右依次为暂停/继续，单步跳过，进入函数，跳出函数，单步执行，激活（关闭）所有断点，代码执行异常处自动\
4. 右下方区域：断点调试器

2.4 NetWork

2.5 Application

2.6 Performance

2.7 Lighthouse

3、NodeJs 应用调试

3.1 Inspector Protocol +Chrome Devtool

1. 执行命令 node--inspect=8888 index.js
2. 打开Chrome浏览器访问服务
3. 点击绿色 node 图标打开 node 调试面板 （在 chrome：//inspect/#devices 中配置network target）
4. 在node 调试面板中使用断点调试 3.2 Inspector Protocol+ VS Code VScode点击运行 添加配置 启动调试 添加断点 查看变量、堆栈

4、常用代理工具的调试

常用代理工具：Charles、Fiddler

5、总结

通过本届的学习，了解了许多调试的方法，后续还需要投入精力去实践一下。