开发调试知识:
1.浏览器端调试:
浏览器可以使用开发者模式,进行调试网页,这里使用的是 Google 的 Chrome 浏览器,它具有很多强大的功能
打开方式: F12 或者 右键点击检查都可以
1.Elements:
可以展示网页结构,与样式调试,可以添加样式,调试类名,还可以节点截图
2.Console:
可以进行日志调试功能
日志调试:
console.log 日志
console.warn 警告
console.error 错误
console.debug 调试
console.info 信息
console.table 表格
3.Sources:
可以查看源码,也可以调试代码,可以加断点
如果不想别人看到自己代码,可以打包项目,这样源码会被压缩,这样即使是用调试工具也只能看到一行,而且变量都是a,b,c这种名字,这样看起来会很困难,可以使用source-map来看未被压缩的代码
4.NetWork:
查看网络请求情况,这个页面有一个重要的功能,可以模拟网络的速度,有慢速3G,快速3G,还有断网的情况
5.Performance:
可以用于查看性能,监视一段时间,会生成一个报告可以查看 CPU 占用情况,网络占用情况,还有帧数,还可以查看线程情况
6.Application:
浏览器本地存储页面,有浏览器本地存储还有,浏览器会话存储,等,很多的网站会使用浏览器本地存储,例如搜索历史
2.手机端调试:
手机端有三种调试方式:
第一种:
真机调试,将网页生成一个二维码,然后手机扫二维码,只要手机和电脑在一个本地网段就可以看
第二种:
代理调试,使用代理工具调试,在电脑上开一个代理服务器,这样所有的手机请求就可以将经过代理服务器,要是报错的话,source-map就在本地,所以可以查看到source-map,而不是一行被压缩过的代码
第三种:
1.Charles：适合查看、控制网络请求，分析数据
2.Fiddler：与 Charles 类似，适合 windows 平台
3.spy-debugger：远程调试手机页面，抓包
4.Whistle：基于 NOde 实现跨平台 Web 调试代理工具
3.常用的开发调试技巧:
1.线上即时修改 Overrides:
当调试的时候改动的样式还有代码刷新以后不会保存,可以使用 source 面板下的 Overrides 功能,新建一个文件夹,然后同意修改就可以了,这样修改了代码后,可以打开devTools,点击左上角的三个小点,选择 moretools 下的 changes 就可以看到修改了
2.利用代理服务器解决跨域问题: 要是请求后端数据可能会受到同源策略的影响(不同主机,不同协议,不同端口),这样可以使用电脑上的代理服务器,将数据发送到代理服务器就行了,这样就解决了不同源的问题了
3.启动本地 source-map 当线上没有 source-map 时,可以使用 Map Local 网络映射功能来访问本地的 source-map 文件,这样就可以调试了
4.小黄鸭:
传说种程序大师会随身携带一只小黄鸭,在调试代码的时候会在桌上放上小黄鸭，然后详细地向鸭子解释每行代码,这样很快问题就被修复了,当然你也可以随便找一个东西,比如鼠标,笔,好朋友,但是解决完问题你有可能会失去一个好朋友
