Web前端开发技巧经验总结

1. 背景

• 入职不久，急需积累开发经验
• 大脑容易忘记知识，需记录下来以便后期复习

2.调试技巧

2.1. 本地调试技巧

• 在代码中可以使用console.log的地方就尽量使用console.log，少用debugger，前者可以解决调试时间，后者需要在dev tools的Sources标签下点击下一步。
• 需要使用debugger时，善用dev tools的Sources标签，包括’Step over next function call’、'Step into next function call’等，以及在Watch中添加需要一直查看值的变量。
• dev tools的Network标签下，勾选’Preserve log’使得即使刷新页面，Network标签下的刷新页面前的请求仍然不被清除。
• dev tools的Network标签下，勾选某种请求类型，就会只展示该类型的请求，常用的比如XHR、WS。
• 如果修改代码后，发现页面没有更新。解决办法：1.chrome浏览器按F12，并右击左上角刷新按钮选择"清空缓存并硬性重新加载"。2.如果1不可以，考虑本地没有重新编译代码，vue项目修改vue.cofig.js文件后如果要生效就需重新编译运行项目。

2.2. 联调技巧

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

3.解决问题技巧

3.1. 流程

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