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 相关文章推荐
jquery的Tooltip插件 qtip使用详细说明
Sep 08 Javascript
js动态添加onclick事件可传参数与不传参数
Jul 29 Javascript
CSS javascript 结合实现悬浮固定菜单效果
Aug 23 Javascript
Javascript中的数据类型之旅
Oct 18 Javascript
30分钟快速掌握Bootstrap框架
May 24 Javascript
javascript实现秒表计时器的制作方法
Feb 16 Javascript
jQuery实现鼠标经过显示动画边框特效
Mar 24 jQuery
微信小程序动态的加载数据实例代码
Apr 14 Javascript
详解win7 cmd执行vue不是内部命令的解决方法
Jul 27 Javascript
JS 实现百度搜索功能
Feb 01 Javascript
vue地区选择组件教程详解
May 04 Javascript
使用 vue 实例更好的监听事件及vue实例的方法
Apr 22 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 输出URL的快捷方式示例代码
2013/09/22 PHP
PHP实现获取中英文首字母
2015/06/19 PHP
PHP检测接口Traversable用法详解
2017/12/29 PHP
JS解密入门之凭直觉解
2008/06/25 Javascript
js限制文本框只能输入数字(正则表达式)
2012/07/15 Javascript
ie浏览器使用js导出网页到excel并打印
2014/03/11 Javascript
Backbone.js 0.9.2 源码注释中文翻译版
2015/06/25 Javascript
JavaScript的MVVM库Vue.js入门学习笔记
2016/05/03 Javascript
AngularJS基础 ng-value 指令简单示例
2016/08/03 Javascript
JS中append字符串包含onclick无效传递参数失败的解决方案
2016/12/26 Javascript
bootstrap table操作技巧分享
2017/02/15 Javascript
canvas 绘制圆形时钟
2017/02/22 Javascript
jquery实现Ajax请求的几种常见方式总结
2019/05/28 jQuery
vue实现简单的日历效果
2020/09/24 Javascript
vue下使用nginx刷新页面404的问题解决
2019/08/02 Javascript
如何在vue 中使用柱状图 并自修改配置
2021/01/21 Vue.js
Django实现自定义404,500页面教程
2017/03/26 Python
python学习教程之使用py2exe打包
2017/09/24 Python
PyQt5每天必学之关闭窗口
2018/04/19 Python
python 实现登录网页的操作方法
2018/05/11 Python
解决Python3中的中文字符编码的问题
2018/07/18 Python
Python学习笔记之抓取某只基金历史净值数据实战案例
2019/06/03 Python
CSS3过渡transition效果实例介绍
2016/05/03 HTML / CSS
纯CSS3实现漂亮的input输入框动画样式库(Text input love)
2018/12/29 HTML / CSS
css3翻牌翻数字的示例代码
2020/02/07 HTML / CSS
什么是数据抽象
2016/11/26 面试题
九州传奇上机题
2014/07/10 面试题
医学专业毕业生推荐信
2013/11/14 职场文书
高中竞选班长演讲稿
2014/04/24 职场文书
幼儿园户外活动总结
2014/07/04 职场文书
2014学习优秀共产党员先进事迹材料思想汇报
2014/09/14 职场文书
党的群众路线教育实践活动个人对照检查材料
2014/09/22 职场文书
捐资助学感谢信
2015/01/21 职场文书
大班下学期个人总结
2015/02/13 职场文书
Python实现文本文件拆分写入到多个文本文件的方法
2021/04/18 Python
JS轻量级函数式编程实现XDM三
2022/06/16 Javascript