在开发web端项目时,偶尔会遇到在本地测试环境上没问题,发布到线上环境就有问题,这种BUG可以使用chrome浏览器里的Overrides进行线上调试然后找出问题 FixBug~
前提:chrome浏览器想必每个前端开发都有吧!!
一、创建一个新的文件夹
用于保存线上代码进行调试
二、开发者工具--Overrides
打开chrome浏览器开发者工具 Sources ---> Overrides 点击 +Select folder for overrides,然后选择刚才创建的新的文件夹,这时chrome浏览器上方有个提示,点击允许,点击允许,点击允许,重要的事情说三遍。这样浏览器就有我们的文件夹了。
三、调试样式css
直接在开发者工具上调试样式的,一般刷新后所调试的样式就会不见了。
我们把这段文字改为红色,原色是#86868b,正常情况下刷新之后,颜色就会变回#86868b,现在使用overrides调,可以防止这个情况~
首先在Sources-->page里面找到咱们要调试的代码文件,然后右键点击 Save for overrides
然后再去调试样式,刷新之后就不会变回原来的了,以上面改文字颜色的例子来说,现在去修改文字颜色,再刷新文字还是红色的,并不会变回原来的#86868b。
假如你不想直接在浏览器上调试 用编辑器打开你刚所创建的文件夹 里面有我们刚才Save for overrides的代码文件 也有我们刚才在页面上所修改的代码 也可以直接在这敲代码修改样式
四、调试js
如开头所说,有时候线上环境有BUG,这时想console打印看看接口的返回,就可以使用这个方法,和上面调css的流程一样,在Sources-->page里面找到咱们要调试的js文件,然后右键点击 Save for overrides (我已经点击过了所以没有显示出来)
然后编辑器打开所创建的文件夹,找到你刚sava的js文件,一般js打包后会被编译,先格式化文档。
虽然被编译过了,但是这个页面还是自己写的嘛,想调试哪个地方,哪个方法总归还是知道在哪的,例如这个中奖名单用的方法是getObtainList,搜一下这个方法,然后编辑代码,console打印返回的名单。
overrides调试大概就是这样
注意 调试完之后记得关闭overrides 不然你下次打开该页面会首先加载overrides里面的文件 你调试的东西会一直保留了
点击这个关闭overrdies!
属于一个开发的小技巧~感谢家人们