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 相关文章推荐
wordpress之js库集合研究介绍
Aug 17 Javascript
深入理解JSON数据源格式
Jan 10 Javascript
js给网页加上背景音乐及选择音效的方法
Mar 03 Javascript
JavaScript中String.match()方法的使用详解
Jun 06 Javascript
去除html代码里面的script正则方法
May 19 Javascript
一个超简单的jQuery回调函数例子(分享)
Aug 08 Javascript
Vue单页面应用保证F5强刷不清空数据的解决方案
Jan 31 Javascript
Vue实现左右菜单联动实现代码
Aug 12 Javascript
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
May 21 Javascript
JavaScript使用localStorage存储数据
Sep 25 Javascript
vue-cli3 热更新配置操作
Sep 18 Javascript
基于Vue+Webpack拆分路由文件实现管理
Nov 16 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将数据库中的电话号码读取出来并生成图片
2008/08/31 PHP
定位地理位置PHP判断员工打卡签到经纬度是否在打卡之内
2019/05/23 PHP
HTML TO JavaScript 转换
2006/06/26 Javascript
使用jscript实现二进制读写脚本代码
2008/06/09 Javascript
javascript基于jQuery的表格悬停变色/恢复,表格点击变色/恢复,点击行选Checkbox
2008/08/05 Javascript
JavaScript OOP类与继承
2009/11/15 Javascript
12个非常有创意的JavaScript小游戏
2010/03/18 Javascript
Jquery 动态添加按钮实现代码
2010/05/06 Javascript
JS打开图片另存为对话框实现代码
2012/12/26 Javascript
JavaScript中的函数重载深入理解
2014/08/04 Javascript
node.js中的fs.link方法使用说明
2014/12/15 Javascript
基于jQuery实现仿淘宝套餐选择插件
2015/03/04 Javascript
深入JavaScript高级程序设计之对象、数组(栈方法,队列方法,重排序方法,迭代方法)
2015/12/01 Javascript
基于JavaScript如何实现ajax调用后台定义的方法
2015/12/29 Javascript
AngularJS基础 ng-value 指令简单示例
2016/08/03 Javascript
JS中parseInt()和map()用法分析
2016/12/16 Javascript
JavaScript实现的搜索及高亮显示功能示例
2017/08/14 Javascript
Node.js 中判断一个文件是否存在
2020/08/24 Javascript
vue中如何自定义右键菜单详解
2020/12/08 Vue.js
详解python的数字类型变量与其方法
2016/11/20 Python
Python使用time模块实现指定时间触发器示例
2017/05/18 Python
浅谈Series和DataFrame中的sort_index方法
2018/06/07 Python
Python lambda表达式filter、map、reduce函数用法解析
2019/09/11 Python
Python多重继承之菱形继承的实例详解
2020/02/12 Python
python实现人工蜂群算法
2020/09/18 Python
利用CSS3的transition属性实现滑动效果
2015/08/05 HTML / CSS
中专生自我鉴定范文
2013/12/19 职场文书
迟到检讨书400字
2014/01/13 职场文书
法学函授自我鉴定
2014/02/06 职场文书
物理研修随笔感言
2014/02/14 职场文书
年度考核自我鉴定
2014/03/19 职场文书
县长“四风”对照检查材料思想汇报
2014/10/05 职场文书
健康教育主题班会
2015/08/14 职场文书
恶魔之树最顶端的三颗果实 震震果实上榜,第一可以制造岩浆
2022/03/18 日漫
详解Python中__new__方法的作用
2022/03/31 Python
html,css,javascript是怎样变成页面的
2023/05/07 HTML / CSS