使用Chrome开发者工具overrides实现不同环境本地调试

最新推荐文章于 2024-03-31 15:00:22 发布
最新推荐文章于 2024-03-31 15:00:22 发布
阅读量1w 收藏 12
点赞数 4
分类专栏： Chrome devtools 文章标签： chrome devtools 前端 chrome html5 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43834227/article/details/109161756
版权

使用Chrome开发者工具overrides实现不同环境本地调试

1.在需要调试的网页下打开开发者工具，在Sources面板下选择overrides菜单。
在这里插入图片描述

选择一个本地文件夹来存放本地副本，开发者工具会有一个权限请求，选择允许
在这里插入图片描述
在这里插入图片描述
启用本地覆盖 ,面板上会显示你刚刚选择的文件夹。
在这里插入图片描述
2.在Source面板下的page里选择你要修改的文件，ctrl+s保存修改，此时会在overrides中你选择的文件夹下生产目录对应的本地副本文件。当存在本地副本时，本地覆盖启用，且工作空间下有该网站的同名覆盖文件，浏览器会优先执行覆盖文件。

在这里插入图片描述
在这里插入图片描述

3.刷新页面，此时会调用本地副本文件，可以在控制台看到我刚刚对index.js 增加的log。
在这里插入图片描述

现在就可以愉快地在各个环境进行调试啦！

渡渡鸟7
关注
  • 4
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
antd配置config-overrides.js文件的操作
01-21
下载antd 包 npm install antd 下载依赖包（定义组件按需求打包） npm install react-app-rewired customize-cra babel-plugin-import 自定义less-loader,改变antd默认样式 npm install less less-loader 根目录定义加载按需打包的js配置模块: config-overrides.js const {override,fixBabelImports,addLessLoader} =require('customize-cra'); module.exports =
Chrome浏览器使用Overrides调试线上代码的技巧
qq_42961150的博客
03-15 8642
在做pc端开发的时候，发布到线上的代码，一般都会存在BUG，为了避免不停的发代码进行测试，可以先在线上的源码中改好，然后复制到本地，可以达到事半功倍的效果。
import-map-overrides:浏览器和NodeJS javascript库，用于覆盖导入映射
05-07
导入地图覆盖 一个浏览器和nodejs javascript库，用于能够覆盖。 这适用于本机浏览器导入映射， 导入映射， 导入映射等。 动机 导入映射是一种控制从哪个URL下载javascript模块的方法。 import-map-overrides库允许您通过将替代存储在本地存储中来动态更改javascript模块的url。 这使开发人员可以在模块开发期间覆盖各个模块以指向其本地主机，而不必与所有其他模块和后端服务器一起启动本地环境。 您不应该将import-map-overrides用作页面上唯一的导入地图，因为您不能依靠每个人对所有模块都具有有效值的本地存储。 相反，应该将import-map-overrides视为开发人员体验增强和开发工具-开发人员可以在部署的环境上进行开发和调试，而不必启动本地环境。 以下是一些教程视频，可以更深入地说明这一点： 文献资料 用于impor
covid-ext:使用covid19 API的Chrome扩展
04-24
Chrome扩展程序 此扩展程序有什么作用？ 每次打开新的浏览器标签时，此扩展程序都会显示美国随机的covid-19统计信息。 此Covid Chrome扩展程序利用的Covid-19 API每天提取数据1次，并将该数据存储在用户的localStorage中。 每次在Chrome浏览器中打开新标签页时，扩展程序都会使用manifest.json文件中列出的chrome_url_overrides键为文档提供自定义替换，并加载键值中记下的html页面：newtab.html newtab.html Newtab.html执行js / script.js文件，该文件将今天的日期与用户从API中提取的最后日期进行比较。 该脚本将每天从API提取数据的时间限制为一次，并将结果存储在用户的localStorage中。 在一天的持续时间内，每次打开新标签页时，脚本都会从用户的localStora
Ajax Interceptor-crx插件
03-09
修改Ajax请求的响应文本 1. You may have to restart chrome after you added this extension. 2. It is recommended that you turn off this extension(the icon should be gray) when you are not using it. 3. This extension only overrides the response data in the XMLHTTPRequest object as well as the fetch method. The "real" response which you can see in DevTools' "Network" panel will not be changed. github: https://github.com/YGYOOO/ajax-interceptor 你可以用该插件修改页面上Ajax请求的返回结果。 注意： 1. 建议第一次安装完重启浏览器，或者刷新你需要使用的页面。 2. 当你不需要使用该插件时，建议把开关关上（插件icon变为灰色），以免对页面正常浏览造成影响。 3. 该插件只会在JS层面上对返回结果进行修改，即只会修改全局的XMLHTTPRequest对象和fetch方法里的返回值，进而影响页面展现。而你在chrome的devtools的network里看到的请求返回结果不会有任何变化。 github地址（欢迎star~有问题也可来提issue）： https://github.com/YGYOOO/ajax-interceptor ------------------------------ 更新记录： 0.5： 1、修复bug：https://github.com/YGYOOO/ajax-interceptor/issues/1 0.4： 1、fetch发起的请求也可以被修改了 0.3： 1、新增JSON编辑功能； 2、修复一些bug 支持语言:中文 (简体)
chrome-response-override:Chrome devtools扩展程序可即时修改响应，无需安装外部应用
05-05
Chrome响应覆盖 Chrome devtools扩展程序可即时修改响应，无需安装外部应用程序。 使用简单的“查找和替换”步骤提供支持以覆盖API / HTML / *响应。 无需安装外部应用程序。 在Chrome扩展程序中覆盖响应正文的步骤 打开devtools，导航到“响应替代”选项卡 点击“添加行” 输入URL包含值，仅此URL响应将被修改。 如果要在主页上修改URL，例如 ，但没有URI路径，请在URL包含字段中使用特殊变量~NO_URI~ 。 输入查找值这是一个javascript正则表达式模式。 输入替换值替换为。 无需提供内容类型 单击“保存”以保存所有内容。 单击“播放”按钮开始修改响应。 您必须单击暂停按钮才能停止此修改。 您必须保持此devtools打开 覆盖问题，要么打开私有选项卡，仅在私有选项卡中启用此插件，要么尝试禁用其他与网络一起使用的插件，例
Chrome 的local overrides
wwj256的专栏
12-07 1077
Chrome 65更新了一个不错的功能local overridesOverride network requests and server local resource instead简单来说就是可在浏览器中直接修改一些请求的返回数据，可以帮助我们用来重写一些资源请求，不用再去不停的往服务器拖文件，而是直接在浏览器中修改代码，刷新就可以看到效果。比如之前在调试的时候要改一些条件什么的，每次刷新都要重新修改一遍，现在省事多了。也不用往服务器拖文件或者改数据，影响别人了。打开开发者工具的sources页，可以
chrome overrides 怎么用？
游戏人生
12-04 708
再去你创建的那个目录里查看 会发现 他自动帮你创建了目录。右键选择override content。在network里找到你想替换的文件。他会把线上的被替换目标文件放在里面。紧接着他会提示你 点允许。他会提示你选择文件夹。你直接修改他就可以了。
【C++ 关键字 override】C++ 重写关键字override(强制编译器检查该函数是否覆盖已存在的虚函数)
探索C++编程的奥秘，分享深入的技术见解和实践，旨在激发读者创造力与解决问题的思维。
07-09 2542
如果派生类在虚函数声明时使用了override描述符，那么该函数必须重载其基类中的同名函数，否则代码将无法通过编译。 C++中的关键字override（重载）用于在派生类中声明一个函数与其基类中同名函数的关系。当派生类在虚函数声明时使用override描述符时，需要重载其基类中的同名函数，否则编译器将会提示错误。 这是因为在C++中，虚函数的定义与函数重载非常相似。虚函数定义的方式是使用关键字virtual在函数声明中进行声明，同时可以通过重载来指定函数的行为。如果派生类重载了基类中的同名函数，则该函数
浏览器本地替换（local overrides）快速定位前端样式问题的案例详解（也是hook js的手段）
王森的博客
03-26 1500
如果想避免未封闭，或者引号使用错误等等，可以使用强大的 webstorm，但是这个开发工具需要收费，需要破解的可以找我，我有破解安装方式，采用 command + - 进行折叠，不过 webstorm 比较卡，一般机器运行比较慢。如果不想继续覆盖，或者避免以后遗忘，一定要在定位到问题后及时关闭覆写，不然会造成你有朝一日忘记此事，发现无论怎么修改中台的静态页自己的电脑都不变，而又不找原因！这是我吃的亏，切记切记。通过以上删除法，可以很快的定位影响样式的位置所在，定位问题，加以修改，就搞定了。
深层学习：心智如何超越经验 Deep Learning How the Mind Overrides Experience
12-05
Deep Learning: How the Mind Overrides Experience 项目的性质 心理学中，我们忙于对事物进行解释，或多或少会对用以解释的说辞感到乏味。 ——Robert Cummins[1] 在理论化[信息加工]水平，对可观测行为的解释……是由产生这种行为的原始信息加工的程序所提供的。
bootstrap_package_overrides
07-08
关于如何扩展 bootstrap_package 的 TYPO3 扩展示例 TYPO3 6.2 的新介绍包是一个包含内容、资产和配置的发行版。 它基于 Benjamin Kott 提供的扩展。 当我们看到介绍包的使用越来越多时，我们认为展示我们认为您应该如何使其适应您的工作流程可能是一个好主意。 这个扩展是强烈反对的。 主要是因为我认为 TYPO3 社区中的任何人都应该遵守某些约定。 - 开发商与否。 关于模板扩展模式的备注 我们通常认为将大多数设置存储在目标数据库中的 TypoScript 模板中是一种反模式。 要拥有一个易于重现的环境（或新项目的入门扩展），您肯定希望将覆盖放在扩展中，而不是放在 DB 或 fileadmin 中。 配置和模板是系统数据，除开发人员外，其他任何人都不应看到或触及。 如果您有一个基于单一文件管理/模板目录的工作流 - 欢迎来到 21 世纪：有一些扩展
Yocto边玩边学：BitBake中的条件变量-OVERRIDES
简单IoT
08-15 2432
BitBake 使用 OVERRIDES 来控制在 BitBake 解析食谱和配置文件后去覆盖哪些变量。下面会描述如何把 OVERRIDES 用作条件元数据，并且讨论与 OVERRIDES 有关的关键字展开，同时提供一些示例来帮助理解。 条件变量元数据 我们可以用OVERRIDES来有条件地选择变量的特定版本，以及有条件地附加或添加变量的值。 注意：OVERRIDES名称（值）只能使用小写字符。另外，名称中不允许使用下划线，因为它们用于将OVERRIDES与其他名称和变量名称分开。 选择一个变量：OVE
python的overrides库
zhangzhechun的专栏
07-24 317
需要注意的是，overrides 库只能覆盖已经存在的类和函数，而无法添加新的类和函数。此外，由于 overrides 库使用装饰器实现，因此可能会对代码的性能产生一定的影响。该代码使用 overrides 装饰器覆盖了基类和子类中的同名方法，并在调用时打印出不同的结果。overrides 是一个 Python 库，它提供了一种用于覆盖类和函数的装饰器，以实现对已有代码的修改，而无需修改代码本身。该代码使用 overrides 装饰器覆盖了原始函数，并在调用时打印出不同的结果。
Chrome浏览器扩展开发系列之七：override页面
weixin_30247159的博客
09-17 502
Chrome浏览器通常提供了一些默认页面，如标签管理器页面chrome://bookmarks、浏览历史记录页面chrome://history或新建Tab页面chrome://newtab等。 Chrome浏览器扩展中的override页面，顾名思义就是重写的页面，可以替换上述默认页面。不过，一个Chrome浏览器扩展只能替换一种默认页面。Chrome浏览器扩展可替换的默认页面如下： 如...
Sources 修改调试代码方法：Local Override
weixin_43827779的博客
07-01 899
Sources 调试代码、Local Override
Override Pages(重置页面) AND Overrides的使用方法
qq_36775614的博客
08-22 1090
Override Pages(重置页面) AND Overrides的使用方法
Chrome Overrides
SeriousLose
04-26 434
Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.https://serious-lose.notion.site/Chrome-Overrides-48d13f823d494612abbd8d716aff7a11
Chrome DevTools中的骚操作
最新发布
dfc_dfc的博客
03-31 1062
谷歌浏览器工具骚操作
使用vcpkg的overrides怎么指定版本
04-27
使用vcpkg的overrides可以通过以下步骤指定版本： 1. 创建一个名为vcpkg.json的文件，在该文件中指定你想要的版本号和包名。 2. 将vcpkg.json文件放置在vcpkg根目录下。 3. 在命令行中输入以下命令：vcpkg install --overlay-ports=path/to/your/overlay。 4. 运行上面的命令后，vcpkg将会尝试从你指定的路径中获取指定版本的包，并将其安装在你的系统中。 希望我的回答可以帮助你！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值