当前位置: 首页 > news >正文

Chrome浏览器使用Overrides调试线上代码的技巧

在做pc端开发的时候,发布到线上的代码,一般都会存在BUG,为了避免不停的发代码进行测试,可以先在线上的源码中改好,然后复制到本地,可以达到事半功倍的效果。

那么怎么实现呢?利用chorme中的Overrides(替换)功能就可以实现。

1. 准备好Chrome浏览器

一般前端开发都会用谷歌浏览器,在这里就不多说了。

2. 创建文件夹

在自己电脑任何地方创建一个空的文件夹,比如:我在桌面上创建了一个test文件夹。

3. 打开浏览器开发者工具

f12可打开浏览器开发者工具,找到Sources=>Overrides=>+Select folder for overrides选择文件,找到创建的test文件夹,记住不要双击进文件夹,直接单击选择,然后下面窗口下面的选择文件夹即可。

image

注意: 选择了文件夹后,浏览器上方会有个提示,点击允许。点击允许后,选择的文件夹就会显示在浏览器里面。

image

4. 打开线上源码

找到线上需要调试的代码,一般都是在network里面找到需要修改的文件,然后选中文件,在右边可以显示出读取的源码,然后鼠标右击选择菜单中的Open in Sources panel,就会自动转到刚刚选择文件夹的界面。

image

5. 编辑代码

编辑源码,比如我在源码中增加了一行代码,然后ctrl+s直接保存,就可以看到左侧test文件夹中就多了一个文件夹,里面就是保存的就是web.html到本地。

image

6. 刷新页面,看效果

刷新,就可以看到console控制台中多了一行打印,说明已经实现了该功能。

image

浏览器其实还有很多开发中都需要用到的技巧,后面会分享更多相关干货。

如果有帮助,可以点赞、收藏,这样可以帮助到更多的人哟!!!

如果任何疑问的可以在评论区留言,还可以加QQ群交流:568984539,加群备注‘地区-名字-技术类型’。

更多前端等相关知识可关注我个人博客:https://blog.csdn.net/qq_42961150?spm=1011.2124.3001.5343

相关文章:

  • js查找json数据中的最大值和最小值方法集结
  • CSS3 Border-color
  • uniapp+unicloud开发微信小程序流程
  • 微信小程序解决saveImageToPhotosAlbum:fail invalid file type
  • Cacti 不出图像的解决办法(完整版)
  • 我的CSDN博客、UNI技术成长之路
  • websoket封装版 参数配置化 开箱即用
  • h5页面js监听页面失去焦点、获取焦点
  • uniapp之vuex在vue2和vue3两种模式下前端工程化动态导入文件
  • css实现三角形的最简单方式原理剖析
  • android4.4.2内核移植3.4.1
  • js正则提取字符串中http等地址
  • 解决 多列 布局 左右等高问题
  • unicloud云函数时间慢8小时的解决方案
  • 前端js实现字符转义和反转义
  • 【399天】跃迁之路——程序员高效学习方法论探索系列(实验阶段156-2018.03.11)...
  • 10个最佳ES6特性 ES7与ES8的特性
  • bearychat的java client
  • canvas 绘制双线技巧
  • gulp 教程
  • JavaScript工作原理(五):深入了解WebSockets,HTTP/2和SSE,以及如何选择
  • java第三方包学习之lombok
  • Java面向对象及其三大特征
  • js中forEach回调同异步问题
  • Koa2 之文件上传下载
  • Meteor的表单提交:Form
  • php的插入排序,通过双层for循环
  • php面试题 汇集2
  • Sublime Text 2/3 绑定Eclipse快捷键
  • unity如何实现一个固定宽度的orthagraphic相机
  • WePY 在小程序性能调优上做出的探究
  • 给初学者:JavaScript 中数组操作注意点
  • 解决jsp引用其他项目时出现的 cannot be resolved to a type错误
  • 前端性能优化——回流与重绘
  • 强力优化Rancher k8s中国区的使用体验
  • 容器服务kubernetes弹性伸缩高级用法
  • 项目管理碎碎念系列之一:干系人管理
  • 因为阿里,他们成了“杭漂”
  • [Shell 脚本] 备份网站文件至OSS服务(纯shell脚本无sdk) ...
  • 新年再起“裁员潮”,“钢铁侠”马斯克要一举裁掉SpaceX 600余名员工 ...
  • ​MPV,汽车产品里一个特殊品类的进化过程
  • ​水经微图Web1.5.0版即将上线
  • #DBA杂记1
  • #绘制圆心_R语言——绘制一个诚意满满的圆 祝你2021圆圆满满
  • (2.2w字)前端单元测试之Jest详解篇
  • (C++17) optional的使用
  • (C++20) consteval立即函数
  • (Forward) Music Player: From UI Proposal to Code
  • (Java)【深基9.例1】选举学生会
  • (js)循环条件满足时终止循环
  • (翻译)terry crowley: 写给程序员
  • (四) 虚拟摄像头vivi体验
  • (四)c52学习之旅-流水LED灯
  • (五)c52学习之旅-静态数码管
  • (一)基于IDEA的JAVA基础10