chrome浏览器使用Overrides线上调试

4,268 阅读2分钟

在开发web端项目时,偶尔会遇到在本地测试环境上没问题,发布到线上环境就有问题,这种BUG可以使用chrome浏览器里的Overrides进行线上调试然后找出问题 FixBug~

前提:chrome浏览器想必每个前端开发都有吧!!

一、创建一个新的文件夹

用于保存线上代码进行调试

二、开发者工具--Overrides

打开chrome浏览器开发者工具 Sources ---> Overrides overrides位置.png 点击 +Select folder for overrides,然后选择刚才创建的新的文件夹,这时chrome浏览器上方有个提示,点击允许,点击允许,点击允许,重要的事情说三遍。这样浏览器就有我们的文件夹了。

overrides选择文件夹.png

三、调试样式css

直接在开发者工具上调试样式的,一般刷新后所调试的样式就会不见了。

css调试.png

我们把这段文字改为红色,原色是#86868b,正常情况下刷新之后,颜色就会变回#86868b,现在使用overrides调,可以防止这个情况~

首先在Sources-->page里面找到咱们要调试的代码文件,然后右键点击 Save for overrides

选择需要调试的文件.png

然后再去调试样式,刷新之后就不会变回原来的了,以上面改文字颜色的例子来说,现在去修改文字颜色,再刷新文字还是红色的,并不会变回原来的#86868b。

假如你不想直接在浏览器上调试 用编辑器打开你刚所创建的文件夹 里面有我们刚才Save for overrides的代码文件 也有我们刚才在页面上所修改的代码 也可以直接在这敲代码修改样式

编辑css代码.png

四、调试js

如开头所说,有时候线上环境有BUG,这时想console打印看看接口的返回,就可以使用这个方法,和上面调css的流程一样,在Sources-->page里面找到咱们要调试的js文件,然后右键点击 Save for overrides (我已经点击过了所以没有显示出来)

选择调式文件js.png

然后编辑器打开所创建的文件夹,找到你刚sava的js文件,一般js打包后会被编译,先格式化文档。

格式化文档.png

虽然被编译过了,但是这个页面还是自己写的嘛,想调试哪个地方,哪个方法总归还是知道在哪的,例如这个中奖名单用的方法是getObtainList,搜一下这个方法,然后编辑代码,console打印返回的名单。

编辑代码.png

打印出来的数据.png


overrides调试大概就是这样

注意 调试完之后记得关闭overrides 不然你下次打开该页面会首先加载overrides里面的文件 你调试的东西会一直保留了

关闭调试.jpg

点击这个关闭overrdies!

属于一个开发的小技巧~感谢家人们