JS使用Chrome浏览器实现调试线上代码


Posted in Javascript onJuly 23, 2020

前言

之前调试前端bug都是在开发环境中做完并多次测试没有问题之后发布测试环境,验收合格之后发布生产。但生产环境偏偏会有和开发和测试环境不一致的情况,例如测试环境需要加密,而开发环境先不加密,测试环境传给我们的时间格式和生产环境时间格式不一致,数组对象不一致等导致线上生产报错的bug。

为了更好的在线上环境检测到具体的bug,节省我们在本地把地址改为生产的地址并走多一遍流程测试的麻烦,Chrome浏览器dbug测试就显得尤为重要了。

一、定位js代码并标记dbug

首先F12打开控制台,然后选择"Sources"选项卡,在Sources面板中选择要调试的文件,在右侧会打开该文件,浏览找到要调试的JavaScript代码,点击代码行号,设置dbug;

JS使用Chrome浏览器实现调试线上代码

像上面的两个console,第一个打印的是'aaa',第二个打印的是'bbb',此时在第二个console左侧点击一下,就会出现dbug的红点,刷新网页时,运行到第二个console就会停止,也就是只会打印aaa。

二、格式化显示的JS代码

现在很多公司都要求前端代码打包并加密,因此我们看到的代码可能几乎没有可读性可言,此时我们只需要点击下面的格式化按钮,浏览器就会自动帮我们整理好代码的格式,真心大爱Chrome。

JS使用Chrome浏览器实现调试线上代码

JS使用Chrome浏览器实现调试线上代码

三、跳转到下一个dbug/单步运行/步入行数内部

我们的程序大多数情况不可能只定位一个dbug,但定位太多个又会导致控制台显得很乱,并且无法直接在函数内部定位。

但幸运的是Chrome都有快捷键帮助我们解决上述问题。

JS使用Chrome浏览器实现调试线上代码

JS使用Chrome浏览器实现调试线上代码

JS使用Chrome浏览器实现调试线上代码

按下F8就可以运行完成就运行到下一个断点处,按F10就可以单步调试,就是指代码运行到下一行而不是下一个断点,按F11再点击代码的行号就可以在方法体的函数内部标记dbug。

四、查看变量的值

鼠标移到变量上面,就会显示变量的内容,右侧调试面板中的Scope中也可以看到局部变量的内容。

JS使用Chrome浏览器实现调试线上代码

JS使用Chrome浏览器实现调试线上代码

注意,如果在赋值前dbug没有运行到这个位置,那么显示的变量值为undefined。

五、利用Watch监视变量的值

在Source中选择变量,然后点击右键,在右键菜单中选择"Add selected text in watches",就会将当前选择的文本内容加到Watch中了,这里的内容会随着代码的执行而动态变化。

JS使用Chrome浏览器实现调试线上代码

六、利用Call Stack查看代码的层次关系以及Breakpoints查看所有断点

也是在Sources页下方就可以看到。

JS使用Chrome浏览器实现调试线上代码

七、最重要的一点--在Console中显示和改变变量值

在Console中直接输入变量,或是在Source中选择变量,然后点击右键,在右键菜单中选择"Evaluate in console",就可以在Console中显示变量的值了。也可以直接在Console中输入变量名=变量值,就可以修改变量的值了,相当于我们无需借助编辑器就可以调试线上的数据,而一旦报错浏览器也会定位到错误的行,可以说非常赞了。

这种方式可以在变量赋新值之前配合dbug使用,或者直接console出该变量的值,来确定是否和其他环境的值一样被自己解密或转变格式。

JS使用Chrome浏览器实现调试线上代码

总结

以上方式足够在线上环境找出大多数bug,最后在本地把接口地址换成开发环境的地址,代码改完后生产环境测试一遍,基本一步到位。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
解决 FireFox 下[使用event很麻烦] 的问题.
Aug 22 Javascript
OfflineSave离线保存代码再次发布使用说明
May 23 Javascript
js表格分页实现代码
Sep 18 Javascript
新鲜出炉的js tips提示效果
Apr 03 Javascript
jQuery实现数秒后自动提交form的方法
Mar 05 Javascript
基于javascript制作经典传统的拼图游戏
Mar 22 Javascript
js获取Html元素的实际宽度高度的方法
May 19 Javascript
Javascript之面向对象--方法
Dec 02 Javascript
Three.js获取鼠标点击的三维坐标示例代码
Mar 24 Javascript
jquery实现回车键触发事件(实例讲解)
Nov 21 jQuery
bootstrap datepicker的基本使用教程
Jul 09 Javascript
如何阻止移动端浏览器点击图片浏览
Aug 29 Javascript
JS实现鼠标按下拖拽效果
Jul 23 #Javascript
javascript利用canvas实现鼠标拖拽功能
Jul 23 #Javascript
JS如何实现封装列表右滑动删除收藏按钮
Jul 23 #Javascript
vue+iview框架实现左侧动态菜单功能的示例代码
Jul 23 #Javascript
JS前后端实现身份证号验证代码解析
Jul 23 #Javascript
vue实现用户长时间不操作自动退出登录功能的实现代码
Jul 23 #Javascript
在vue中封装的弹窗组件使用队列模式实现方法
Jul 23 #Javascript
You might like
PHP多个版本的分析解释
2011/07/21 PHP
php 数组处理函数extract详解及实例代码
2016/11/23 PHP
详解Yii2 rules 的验证规则
2016/12/02 PHP
PHP tp5中使用原生sql查询代码实例
2020/10/28 PHP
javascript String 对象
2008/04/25 Javascript
一段实现页面上的图片延时加载的js代码
2010/02/11 Javascript
Jquery实现图片放大镜效果的思路及代码(自写)
2013/10/18 Javascript
jquery动态改变onclick属性导致失效的问题解决方法
2013/12/04 Javascript
《JavaScript高级编程》学习笔记之object和array引用类型
2015/11/01 Javascript
javascript用正则表达式过滤空格的实现代码
2016/06/14 Javascript
JS设计模式之访问者模式定义与用法分析
2018/02/05 Javascript
vue组件化中slot的基本使用方法
2019/05/01 Javascript
Vue之Mixins(混入)的使用方法
2019/09/24 Javascript
WEEX环境搭建与入门详解
2019/10/16 Javascript
[52:57]2014 DOTA2国际邀请赛中国区预选赛 LGD-CDEC VS HGT
2014/05/21 DOTA
Python导出DBF文件到Excel的方法
2015/07/25 Python
python tensorflow基于cnn实现手写数字识别
2018/01/01 Python
python逆向入门教程
2018/01/15 Python
浅谈Series和DataFrame中的sort_index方法
2018/06/07 Python
Django中使用Whoosh进行全文检索的方法
2019/03/31 Python
Python多进程入门、分布式进程数据共享实例详解
2019/06/03 Python
PyTorch和Keras计算模型参数的例子
2020/01/02 Python
python实现提取str字符串/json中多级目录下的某个值
2020/02/27 Python
Python实现GIF图倒放
2020/07/16 Python
美国知名平价彩妆品牌:e.l.f. Cosmetics
2017/11/20 全球购物
机关门卫岗位职责
2013/12/30 职场文书
高二学生评语大全
2014/04/25 职场文书
团日活动总结
2014/04/28 职场文书
银行反四风对照检查材料
2014/09/29 职场文书
晚会开幕词
2015/01/28 职场文书
保安辞职信范文
2015/02/28 职场文书
酒店财务部岗位职责
2015/04/14 职场文书
党员转正大会主持词
2015/07/02 职场文书
2015年财务人员个人工作总结
2015/07/27 职场文书
详解CSS不定宽溢出文本适配滚动
2021/05/24 HTML / CSS
解决SpringCloud Feign传对象参数调用失败的问题
2021/06/23 Java/Android