硬件开发工具链平台云服务
硬件开发工具链平台云服务
- 最新动态
- 功能总览
- 产品介绍
- 计费说明
- 快速入门
- 控制台指南
-
用户指南
- IPDCenter基础服务使用指南
- 数字化制造云平台使用指南
- 工业仿真云平台服务使用指南
- 开发指南
- API参考
-
常见问题
- 控制台
- IPDCenter基础服务
- 产品主数据协同服务
-
数字化制造云平台
- 什么是一级租户和二级租户?
- 用户忘记密码了怎么办?
- 为什么在使用数字化制造云平台时提示无权限操作?
- 如何调整用户的功能操作权限?
- 配置“工厂建模”前需要做哪些准备?
- 如何自定义“Part定义”中的“单位”取值?
- 添加班次前需要做哪些准备?
- 标准制造数据模型当中支持的参数不满足用户业务要求怎么办?
- 数字化制造云平台系统中数据常见的状态有哪些?
- 为什么在引用其他功能模块数据时选不到之前配置的记录?
- 产品质检方案定义当中质检方案数据怎么修改?
- 生成工单质检方案的方式有哪些?
- 工单冻结后对工单有什么影响?
- 进入“生产管理”下的页面时提示“请先关联工厂”?
- 为什么“物料信息查询”页面导入物料信息提示物料不存在?
- 进入“质量检验”下的页面时提示用户未关联部门?
- 工业仿真云平台服务
- 文档下载
- 通用参考
链接复制成功!
前端调试方法
查看console.log
通常遇到BUG,第一直觉肯定看console的报错信息,这种报错,错误原因和报错位置一目了然,很方便就定位到出问题的代码,console.log简单实用,简单的缺陷还是可以通过这种方法定位的,生产环境利用webpack去掉,就不会影响性能方面。
图1 console报错

全局查找
可以根据报错关键字定位问题,一般是dom元素的id、class、name或者页面中出现的唯一性的中文汉字,搜索就可以直接定位到代码。
调用堆栈
堆栈是一个数据结构,每一个函数调用时都会将函数的指针和参数值保存到堆栈中,后进先出,最后调用的函数最先出栈。
可以通过打断点,查看Chrome开发面板的sources的call stack,可以查看追溯到源代码的位置,这个特别适合console报错位置不明确的情况(比如报错指向vue.esm.js)。
图2 代码追溯

分析代码
分析代码最常用的就是断点,一步步调试查看结果,定位问题。
断点
调试代码
调试代码最好保持本地环境和线上环境一致,这样基本保证修改缺陷不会被测试验证不通过。那怎么保持本地环境和线上保持一致呢?
- Vue CLI的本地代理功能,在配置文件devServer.proxy中配置反向代理,这种方式最好弄一个网站作为中介代理,开发的时候只需要修改网站上的配置,本地服务不用重复启动。
- 自己搭建Nginx反向代理,效果同上。
- 后端接口设置Access-Control-Allow-Origin,利用cors跨域本地直接访问线上数据,这种方法最方便,但需要后端同事配合。
- 使用Fiddler AutoResponder功能,直接把服务器重定向到本地目录(需要编写一个正则表达式),修改本地文件刷新浏览器就能看的修改效果。
- 使用Chrome DevTools的Overrides功能,把服务器的文件映射到本地,可以直接在sources面板中修改文件中的方法,这种最适合调试jsp这种不用webpack压缩的老项目。
父主题: 常用调试方法