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

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

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

要点：

• Chrome devTools

• 移动端 H5 调试

• NodeJs 应用调试

• 常用调试工具 charles 等

• 常用调试技巧

一、Chrome DevTools

1、Elements 动态修改元素和样式

点击 .cls 可以动态修改元素 class

调试伪类的时候，可以选中要展示的状态

Conputed界面可以搜索样式

2、Console 控制台

（1）可以用来调试，打印不同的信息

 console.log()        // 灰色
 console.warn()     //警告，黄色
 console.error()     //错位，红色
 console.debug()  //蓝色
 console.info()      //灰色
 // 打印出的颜色是不一样的

（2）表格显示：

 console.table()  

具象化的展示json和数组数据

 const goods=[
     {
           name:'apple',
           count:100,
           price:10
     },
     {
           name:'banana',
           count:110,
           price:4
     },
     {
         name:'orange',
         count:30,
         price:7
     }
 ]

（3）文件树显示

 console.dir()

3、Sourse

查看源代码

（1）在代码中添加 debugger ，可断点调试

 A=1；B=2；
 A+B  // 12
 Number(A)+Number(B)   //3

（2）在sourse界面中的代码前添加断点

sourse界面可添加Watch监视对象，查看对象的内容

3、source-map

 devtool:'source-map'  //用来开启和关闭

4、Network

可以模拟弱网环境

可以测试后端数据是否正确

5、Application 应用

6、Performance 性能

二、移动端H5调试

1、真机调试

2、VConsole

3、使用代理工具调试

4、常用代理工具

三、Node.js 调试

1、Inspector protocol + Chrome Devtool

（1）执行命令

 node --inspect=8888 index.js

（2）chrome 浏览器访问服务

（3）点击绿色 node 图标，打开node 调试面板

(在 chrome://inspect/#devices 中配置 network target)

（4）在node调试面板中使用断电调试

2、Inspetor Protocol + VS Code

1. VS Code 点击运行
2. 添加配置
3. 启动调试
4. 添加断点
5. 查看变量、堆栈

四、常用开发调试技巧

1、线上及时修改 Overrides

2、使用代理解决开发阶段的跨域问题

3、启用本地 source map

线上不存在Source Map时可以使用Map Locacl网络映射功能来访问本地的Source Map文件。

4、使用代理工具 Mock数据

\