专栏名称: 前端大全
分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯
目录
相关文章推荐
程序员鱼皮  ·  讲了个免费的前端项目,小白也能学! ·  3 天前  
格斗迷  ·  “三无青年“白大拿的“命中贵人” ·  3 天前  
格斗迷  ·  “三无青年“白大拿的“命中贵人” ·  3 天前  
光伏资讯  ·  收购时机在哪? ·  4 天前  
光伏资讯  ·  收购时机在哪? ·  4 天前  
前端早读课  ·  【小册】CSS实战 ·  5 天前  
前端早读课  ·  【早阅】 2024年HTML现状调查报告 ·  6 天前  
51好读  ›  专栏  ›  前端大全

利用Chrome浏览器使用Overrides调试线上代码,真是太方便啦!

前端大全  · 公众号  · 前端  · 2024-12-16 11:50

正文

本文作者:HED

https://juejin.cn/post/7423210982547767334

利用Chrome开发者工具断点调试功能调试修改代码,一刷新就什么都没有了,且只能调试JS代码,太尴尬了。

想刷新后,原来修改调试的的代码还在,且JSP、JS、CSS等能调试,那赶快试试下面这种方法吧。

第一步:

在浏览器开发者工具中打开下面的面板sources-->overrides!


第二步:

打开Select folder for overrides,选择要存放代码的文件夹


第三步:

点击允许访问文件夹,overrides生成刚才选择的文件夹


第四步:

在Network中选择一个文件,右击 Override content 修改文件,并按ctrl+s保存,就会在本地生成对应页面的代码。


第五步:

刷新页面,即可在页面上看到修改的内容

  第六步:

如果想去掉修改的内容,删除对应修改的内容或直接删除本地文件,再刷新即可。


如果你不想运行代码或没有源码而想通过浏览器调试代码,或者在生产环境有问题时需要定位找原因时,那用上述方法调试真是太方便了!


推荐阅读  点击标题可跳转

1、NPM 作者推出全新的 JavaScript 包管理器!

2、重磅!Chrome 被强制出售?谷歌或将抛弃 ChromeOS 全面转向 Android 系统

3、浏览器节能机制导致Websocket断连的巨坑!