前端本地覆盖资源(local override)调试

这篇具有很好参考价值的文章主要介绍了前端本地覆盖资源(local override)调试。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


前言

Chrome 65 中的开发者工具将包含以下新功能:

本地替换
新的无障碍工具
更改标签页
新的搜索引擎优化 (SEO) 和性能审核
Performance 面板中的多个录制内容
使用 worker 和异步代码执行可靠的代码单步调试

本篇文章主要学习与实践下本地替换这个功能


提示:以下是本篇文章正文内容,下面案例可供参考

一、本地替换(local override)能干啥?

简单的概括下,部署上线的网站,打开后我们可以用本地的资源覆盖网站指定的图片资源,Css样式,Js代码,Api请求。刷新浏览器后,优先走本地的资源,达到调试线上部署好的网站的目的。

二、以CSDN为例 实践一波

前端本地覆盖资源(local override)调试,前端调试技巧,前端

  • 1.F12 打开要调试的网站。

  • 2.在source Tab 找到 override 功能,select a folder 选择一个存在本地资源的目录

  • 3.第一次弄时,会弹出是否允许写入的权限验证,我们点击Allow (允许)

    进行上述3步后,准备工作就差不多了(前提条件Chrome 浏览器版本 Chrome 65 ,没有这个功能,可以更新下Chrome浏览器)

替换图片资源

在network,找到想替换的图片资源,右键打开选择 **Save for override ** 保存一份到本地覆盖
前端本地覆盖资源(local override)调试,前端调试技巧,前端
在override 下面就可以看到多一个项目文件名的图片,替换这个图片,然后刷新浏览器
前端本地覆盖资源(local override)调试,前端调试技巧,前端
替换调试的图片,然后再次刷新
前端本地覆盖资源(local override)调试,前端调试技巧,前端
发现替换成功
前端本地覆盖资源(local override)调试,前端调试技巧,前端
类似以上操作还可以替换js资源,css资源。达到调试js代码,css代码的目的


总结

简单介绍了Chrome 65的新特性,其中实现了本地替换的功能,而且用图片资源简单试验了一下,详情资源传送门:
官网详细描述文章来源地址https://www.toymoban.com/news/detail-792296.html

到了这里,关于前端本地覆盖资源(local override)调试的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包