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 相关文章推荐
可以支持多中格式的JS键盘
May 02 Javascript
javascript 原型模式实现OOP的再研究
Apr 09 Javascript
用 Javascript 验证表单(form)中多选框(checkbox)值
Sep 08 Javascript
基于jQuery实现仿QQ空间送礼物功能代码
May 24 Javascript
Node.js Streams文件读写操作详解
Jul 04 Javascript
微信小程序 chooseImage选择图片或者拍照
Apr 07 Javascript
JavaScript正则表达式简单实用实例
Jun 23 Javascript
微信小程序实现的贪吃蛇游戏【附源码下载】
Jan 03 Javascript
利用原生的JavaScript实现简单拼图游戏
Nov 18 Javascript
微信小程序基于Taro的分享图片功能实践详解
Jul 12 Javascript
layui使用表格渲染获取行数据的例子
Sep 13 Javascript
vue/cli 配置动态代理无需重启服务的方法
May 20 Vue.js
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数据入库前清理 注意php intval与mysql的int取值范围不同
2010/12/12 PHP
php5.3以后的版本连接sqlserver2000的方法
2014/07/28 PHP
php爬取天猫和淘宝商品数据
2018/02/23 PHP
postman的安装与使用方法(模拟Get和Post请求)
2018/08/06 PHP
jquery HotKeys轻松搞定键盘事件代码
2008/08/30 Javascript
javascript css在IE和Firefox中区别分析
2009/02/18 Javascript
javascript RadioButtonList获取选中值
2009/04/09 Javascript
javascript下arguments,caller,callee,call,apply示例及理解
2009/12/24 Javascript
jquery 选项卡效果 新手代码
2011/07/08 Javascript
js获取某元素的class里面的css属性值代码
2014/01/16 Javascript
node.js中的path.dirname方法使用说明
2014/12/09 Javascript
jQuery中trigger()方法用法实例
2015/01/19 Javascript
JS实现灵巧的下拉导航效果代码
2015/08/25 Javascript
js实现瀑布流的三种方式比较
2020/06/28 Javascript
深入理解React中es6创建组件this的方法
2016/08/29 Javascript
js验证手机号、密码、短信验证码代码工具类
2020/06/24 Javascript
Vue+Vux项目实践完整代码
2017/11/30 Javascript
vue-cli axios请求方式及跨域处理问题
2018/03/28 Javascript
利用vscode调试编译后的js代码详解
2018/05/14 Javascript
浅入深出Vue之自动化路由
2019/08/06 Javascript
vue tab切换,解决echartst图表宽度只有100px的问题
2020/07/19 Javascript
python实现DNS正向查询、反向查询的例子
2014/04/25 Python
使用Python的urllib和urllib2模块制作爬虫的实例教程
2016/01/20 Python
django之常用命令详解
2016/06/30 Python
Scrapy框架CrawlSpiders的介绍以及使用详解
2017/11/29 Python
python多线程实现代码(模拟银行服务操作流程)
2020/01/13 Python
Python xlrd/xlwt 创建excel文件及常用操作
2020/09/24 Python
墨西哥皇宫度假村预订:Palace Resorts
2018/06/16 全球购物
某公司部分笔试题
2013/11/05 面试题
企业家王石演讲稿:坚持与放下
2014/04/27 职场文书
2014年销售人员工作总结
2014/11/27 职场文书
三年级学生评语大全
2014/12/26 职场文书
试用期解除劳动合同通知书
2015/04/16 职场文书
JUnit5常用注解的使用
2021/07/02 Java/Android
gateway网关接口请求的校验方式
2021/07/15 Java/Android
十大最帅动漫男主 碓冰拓海上榜,第一是《灌篮高手》男主角
2022/03/18 日漫