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

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

1. 前端Debug特点

• 多平台：浏览器、NodeJs、小程序
• 多环境：本地开发环境、线上环境
• 多工具：Chrome devTools、Whistle
• 多技巧：Console、BreakPoint、sourceMap、代理

2. Chrome DevTools

• 点击.cls开始动态修改元素的class
• 输入类名即可给元素动态添加类名
• 勾选/取消类名查看类名生效效果
• 点击Styles下具体的样式值，可以进行编辑，且可以在浏览器中实时预览
• Computed下点击样式的箭头可以跳转到Styles下的css规则去

Console

console.log

console.warn

console.error

console.debug

console.info

console.table：具象化地展示JSON和数组数据

占位符：用于给日志添加样式，可以突出重要的信息

%s：字符串占位符

%o：对象占位符

%c：样式占位符

%d：数字占位符

Scope：展开Scope可以查看作用域列表(包含闭包)

Call Stack：展开Call Stack可以查看当前JavaScript代码的调用栈

压缩后的代码调试：通过Source Map映射源码实现调试，Source Map文件不跟着部署上线，从而实现安全调试。

Application

展示与本地存储相关的信息

• Local Storage
• Session Storage
• IndexedDB
• Web SQL
• Cookie

1. 点击Select folders…选择一个本地的空文件夹(可以新建)
2. 允许授权
3. 修改代码
4. 点击DevTools的三点->More tools->Changes，就能看到所有修改

移动端H5调试

Nodejs调试

利用代理解决跨域问题

原理：浏览器有同源策略策略的限制，会出现跨域问题。但是服务器之间不需要同源，所以，通过代理服务器接收浏览器的请求(代理服务器和浏览器同源)，代理服务器再转发请求给真实的服务器。