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

前言

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

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

一、定位js代码并标记dbug

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

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

二、格式化显示的JS代码

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

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

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

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

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

四、查看变量的值

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

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

五、利用Watch监视变量的值

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

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

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

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

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

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

总结

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 利用chrome浏览器进行js调试并找出元素绑定的点击事件详解

    前言 大家有没有遇到这样的一个问题,我们在分析一些大型电子商务平台的Web前端脚本时,想找到一个元素绑定的点击事件,并不是那么容易,因为有些前端脚本封装的比较隐蔽,甚至有些加密脚本,用传统的查找元素ID.或者页面源码方法去找,可能最后徒劳无功.下面我来介绍利用chrome浏览器来查找元素绑定的事件. Chrome开发工具中最有用的面板Sources.Sources面板几乎是最常用到的Chrome功能面板,也是解决一般问题的主要功能面板.通常只要是开发遇到了js报错或者其他代码问题,在审视一遍代码

  • 实用Javascript调试技巧分享(小结)

    实用Javascript调试技巧分享(小结)

    见过太多同学调试Javascript只会用简单的console.log甚至alert,看着真为他们捉鸡..因为大多数同学追求优雅而高效地写代码,却忽略了如何优雅而高效地调试代码,不得不说是有点"偏科"了.下面我就分享一些实用且聪明的调试技巧,希望能让大家调试自己代码的时候更加从容自信. 1. 不要使用alert 首先,alert只能打印出字符串,如果打印的对象不是String,则会调用toString()方法将该对象转成字符串(比如转成[object Object]这种),所以除非你打

  • 微信小程序结合mock.js实现后台模拟及调试

    一.创建小程序项目 mock.js 从 https://github.com/nuysoft/Mock/blob/refactoring/dist/mock.js 下载 api.js:配置模拟数据和后台接口数据,通过DEBUG = true;//切换数据入口 let API_HOST = "http://xxx.com/xxx"; let DEBUG = true;//切换数据入口 var Mock = require('mock.js') function ajax(data = '

  • js正则取值的结果数组调试方法

    如下所示: body="Darry 官网(戴珠宝官网)是戴珠宝指定官方网站,darry戴珠宝官网提供:戴珠宝产品包括:结婚戒指.求婚戒指等钻戒|对戒系列,欢迎进入戴珠宝唯一官网详细了解:"; var reg = /[a-z]+/i; res = body.match(reg); if(res.length>0){ console.log('res',res); } 原来设想res是个数组,值就应该与res.join()一样,结果测试不同. 如果让js代码按照预定思路走,调试过改成

  • 利用vscode调试编译后的js代码详解

    利用vscode调试编译后的js代码详解

    前言 在开发的过程中,几乎不可能一次性就能写出毫无破绽的程序,断点调试代码是一个普遍的需求. vscode 是一个非常棒的编辑器,内置功能强大的调试能力.经过简单的设定,就可以对 js 文件进行调试.但有时我们想要调试的内容是经过编译的,当然我们可以直接调试编译后的代码.但经过编译压缩以后的代码,可读性很差,且也可能无法分模块查看了,有什么方法进行编译前的代码调试么?答案当然是肯定的. 下面话不多说了,来一起看看详细的介绍吧. vscode 的常规调试 vscode 的调试界面在窗口最左边: 最

  • 灵活使用console让js调试更简单的方法步骤

    Web开发最常用的高度就是 console.log ,虽然 console.log 占有一席之地,但很多人并没有意识到 console 本身除了基本 log 方法之外还有很多其他方法. 适当使用这些方法可以使调试更容易,更快速,更直观. console.log() 在console.log 中有很多人们意想不到的功能.虽然大多数人使用 console.log(object) 来查看对象,但是你也可以使用 console.log(object, otherObject, string),它会把它们

  • Vue.js更改调试地址端口号的实例

    Vue项目一般使用自带的脚手架工具vue-cli和webpack打包方式进行项目构建运行.开发中,我们在控制台输入命令行npm run dev部署项目后,默认开启的页面调试地址是8080端口.但是有时候我们在进行多个项目开发需要同时部署多个vue项目,甚至有的还需要启动后台项目,这时就需要修改Vue项目的启动端口(不然会报端口被占用的错误,一个端口号只能一个进程占用). 本文像大家讲解如何找到Vue项目中端口的配置文件,并修改. 首先,我们打开项目根路径中webpack的配置文件package.

  • vscode调试node.js的实现方法

    在开发的过程中,几乎不可能一次性就能写出毫无破绽的程序,断点调试代码是一个普遍的需求. 作为前端开发工程师,以往我们开发的JavaScript程序都运行在浏览器端,利用Chrome提供的开发者工具就可以方便的进行源码断点调试.其步骤有四,详情不表,粗略概括如下: 打开Chrome开发者工具:点击进入Sources标签页,在页面的左侧就能看到JS代码的目录:找到需要设置断点的源文件,在需要中断的哪行代码左侧单击鼠标左键,就可以设置断点,如果你的代码是uglify过的,则需导入相应的source-m

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

    前言 之前调试前端bug都是在开发环境中做完并多次测试没有问题之后发布测试环境,验收合格之后发布生产.但生产环境偏偏会有和开发和测试环境不一致的情况,例如测试环境需要加密,而开发环境先不加密,测试环境传给我们的时间格式和生产环境时间格式不一致,数组对象不一致等导致线上生产报错的bug. 为了更好的在线上环境检测到具体的bug,节省我们在本地把地址改为生产的地址并走多一遍流程测试的麻烦,Chrome浏览器dbug测试就显得尤为重要了. 一.定位js代码并标记dbug 首先F12打开控制台,然后选择

  • JS在Chrome浏览器中showModalDialog函数返回值为undefined的解决方法

    本文实例讲述了JS在Chrome浏览器中showModalDialog函数返回值为undefined的解决方法.分享给大家供大家参考,具体如下: 主页面: <script type="text/javascript"> function SelectGroupCust() { var temp = window.showModalDialog("Default2.aspx?xx=" + Date(), "", "dialog

  • node.js调用Chrome浏览器打开链接地址的方法

    本文主要介绍的是node.js调用Chrome浏览器打开链接地址的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: 借助open模块实现 通过node-open模块,可以在任何平台上打开某个浏览器网址. 通过NPM安装 npm install open 使用Chrome打开网址 var open = require("open"); open("http://www.google.com", "chrome"); 调用Start打开

  • js判断IE浏览器版本过低示例代码

    js判断IE浏览器版本过低示例代码

    弄了个很简单的例子判断IE浏览器版本是否过低 例子结构如下,其实一个页面加引入jquery就可以了,顺便弄了个标准结构(注意在IE6和IE7版本较低情况下下才看到它的提示效果)   复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <h

  • python用selenium打开chrome浏览器保持登录方式

    python用selenium打开chrome浏览器保持登录方式

    目录 导读 selenium操作浏览器 打开chrome浏览器 使用selenium打开网站 总结 导读 我们在使用selenium打开google浏览器的时候,默认打开的是一个新的浏览器窗口,而且里面不带有任何的浏览器缓存信息.当我们想要爬取某个网站信息或者做某些操作的时候就需要自己再去模拟登陆 selenium操作浏览器 这里我们就以CSDN为例,来展示如何让selenium在打开chrome浏览器的时候带上用户的登录信息 打开chrome浏览器 from selenium import w

  • python使用selenium打开chrome浏览器时带用户登录信息实现过程详解

    python使用selenium打开chrome浏览器时带用户登录信息实现过程详解

    导读 我们在使用selenium打开google浏览器的时候,默认打开的是一个新的浏览器窗口,而且里面不带有任何的浏览器缓存信息.当我们想要爬取某个网站信息或者做某些操作的时候就需要自己再去模拟登陆 selenium操作浏览器 这里我们就以CSDN为例,来展示如何让selenium在打开chrome浏览器的时候带上用户的登录信息 打开chrome浏览器 from selenium import webdriver from selenium.webdriver import ChromeOpti

  • 使用Selenium控制当前已经打开的chrome浏览器窗口

    使用Selenium控制当前已经打开的chrome浏览器窗口

    目录 前言 应用场景(理论上) 1. 打开浏览器 2. 编写 Python程序获取控制 浏览器 3. 总结 后话 前言 有过几个小伙伴问过我如何利用 Selenium 获取已经打开的浏览器窗口,正巧近日看到有文章写到,我就很不要脸的拿来过拼凑到一起了. 这里使用 chrome浏览器 来做示例. 整个下来主要有两个步骤, 手动打开浏览器, 使用 Python程序 去获取到手动打开的 chrome浏览器. 应用场景(理论上) 登录账号并且需要输入手机验证码的网站: 登录账号并且需要人机验证的网站(如

  • 在chrome浏览器中，防止input[text]和textarea在聚焦时出现黄色边框的解决方法

    在chrome浏览器中，防止input[text]和textarea在聚焦时出现黄色边框的解决方法

    特别是input[text]和textarea,并且在textarea右下角还有一个可用鼠标拖动该表textarea大小的功能,如下图所示: input[text]: textarea: 有的时候黄色边框很影响页面效果,并且textarea拖动改变大小之后直接影响布局,所以为了不使这些多余的功能和效果影响页面,可以使用一下几句CSS清除掉chrome浏览器的默认效果,代码如下: 取消表单项聚焦时产生的黄色边框: 复制代码 代码如下: input,button,select,textarea{ou

  • java == 引发的线上异常详解

    今天分享遇到的一个线上的 bug,线上代码: class Scratch { public static void main(String[] args) { JSONArray arrays = JSONUtil.parseArray("[{'type':1},{},{'type':2},{'type':2}" + ",{'name':'zhangsan'},{'type':1},{'type':1},{'type':1}]"); List<User>

  • vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法

    一.vue中解决chrome浏览器自动播放音频 需求 有新订单的时候,页面自动语音提示和弹出提示框: 问题 chrome浏览器在18年4月起,就在桌面浏览器全面禁止了音视频的自动播放功能.严格地来说,是Chrome不允许在用户对网页进行触发之前播放音频.不光是这样,在页面加载完毕的情况下,用户没有click.dbclick.touch等主动交互行为,使用js直接调用.play() 方法的话,chrome都会抛出如下错误:Uncaught (in promise) DOMException: 解决

随机推荐