Web前端开发技巧经验总结

1. 背景

由于入职不久，急需积累开发经验，以便提高开发效率，本文是总结。

2.调试技巧

2.1. 本地调试技巧

1. 调试时少用"debugger"多用"console.log"，前者在调试时需要在dev tools的Sources标签点击下一步，而后者可以直接在控制台查看相关信息，较为省时。在遇到bug需要查看代码变量变化时才用debugger。
2. 使用debugger时，善用dev tools的Sources标签，包括Step over next function call、Step into next function call等，以及在watch中添加需要一直查看值的变量。
3. 在dev tools的Network标签下，勾选"Preserve log"使得即使刷新页面，Network标签下的刷新页面前的请求仍然不被清除。
4. dev tools的Network标签下，勾选某种请求类型，就会只展示该类型的请求，常用的比如XHR、WS。
5. 如果修改代码后，发现页面没有更新。解决办法：a.chrome浏览器按F12，并右击左上角刷新按钮选择"清空缓存并硬性重新加载"。b.如果a不可以，则考虑本地没有重新编译代码，对于vue cli生成的vue项目，修改vue.config.js文件后如果要使得配置生效就需重新编译运行项目。

2.2. 与后端联调技巧

1. 查询页面的字段变量名与新增页面的字段变量名通常是相同的。
2. 开发时需要确定页面展示的字段或接口对应的变量名是什么，为了节省时间，最好是与你对接的后端人员提前利用工具比如MeterSphere来定义好变量。

3.修改样式技巧

1. 注意修改范围。对于vue项目，尽量在单文件组件的带scoped的style标签下写样式，避免影响其他组件的样式。当确实需要修改全局样式时，才在全局样式文件进行修改。
2. 对于多个div，如果只有少部分样式不同比如图片地址不同，其他css属性值都相同，可以为div设置两个class，一个class为公共样式，另一个class为非共用样式比如图片地址，这样可以简化代码。
3. 如果修改某UI框架组件样式，尽量不适用!important，考虑使用v::deep。
4. 对于opacity属性，由于子元素会继承父元素的opacity，即使子元素自己设置了opacity值，该值会被父元素的opacity覆盖。解决办法是修改父元素background来修改透明度，子元素使用opacity。

4.解决问题技巧

1. 首先在网上查询问题，如果知识点有相应官网则在官网查询，比如某个UI框架知识点则最好在UI框架官网查询。
2. 然后在百度/谷歌搜索，如果搜索不到答案时 ，则使用其他相关关键词重新搜索，仍搜索不到可以尝试在StackOverflow搜索。
3. 实在解决不了，比如花费了超过2个小时仍然没有一点头绪，最好是向其他人寻求帮助。