如何用 Chrome 的 Local Overrides 巧妙地替换图像以及如何通过推送来替换

介绍

即使现在还不是接触代码的时候，您是否曾经想用您当前正在创建的图像替换您网站上的横幅和图像？
我有时

本文介绍了使用 Chrome 的 DevTools 中提供的本地覆盖功能替换图像。

环境

铬（版本 106）

目标听众

想要替换网站上的图片并截图的人
那些想要在编码之前检查设计的人
那些觉得看 Google 的英文帮助很麻烦的人

什么是本地覆盖

本地覆盖是 Chrome 的 DevTools 中实现的功能。
即使您重新加载页面，您的更改也会保留。
CSS、JS 更改等也可以在重新加载时保持适应。

本地覆盖并不是真正的新功能。
它是在 Chrome65 时提供的。

如果主屋介绍够了，请看下面的文章。

使用本地覆盖智能替换图像

1.准备图像

首先，准备要替换的图像。
一旦准备就绪，我们就有了从 DevTools 调用它的地方。
任何本地位置都可以。
我经常在桌面等上临时创建它。

您在 DevTools 端所做的任何更改都将保存在此目录中。
DevTools 将看到您本地修改的文件，因此 CSS 更改之类的内容将能够在重新加载后持续存在。

2.设置覆盖

打开开发工具
ソース 打开面板
オーバーライド打开标签单击
选项卡下的 +オーバーライド用のフォルダを選択 文本链接
选择一个目录来保存1中准备的更改
消息デベロッパーツールでは /選択したディレクトリのpath/ へのフルアクセスがリクエストされます。機密情報の漏洩にご注意ください。显示在Chrome的Header下，同时也显示了“允许”和“拒绝”按钮。
选择“允许”
然后你会看到选中的目录
勾选“启用本地覆盖”，一切顺利
3.指定要替换的图片
1. 转到包含要替换的图像的页面
2. ソース 打开面板
3. 选择ページ 选项卡并指定要替换的图像
4. 确保要更改的图像显示在右侧
  4.替换图片
  1. 使用拖放从本地目录拖放图像
  2. 重新加载页面
  3. 这将替换图像
    - 出现问题时可以用超级重载替换（⌘ + shift + R 在 Mac 上）
    替换 Qiita 的我的页面图标的示例
    
    前后
    
    5.最后截图
    
    使用 Devtools スクリーンショットをキャプチャ 等进行截图。
    
    拍摄后禁用覆盖并删除目录
    
    就这些！
    谢谢你的辛勤工作……我想说。
    
    由于某种原因，有时我无法用这种方法很好地替换它，所以我找到了一种方法来推送它。
    
    如何从此处使用本地覆盖将图像替换为推送
    
    老实说，我真的不明白为什么上述程序有时无法替换。
    很抱歉我没能追究这个事业。
    不过，我也找到了一种克服伤病的方法，所以我也会分享一下。
    
    即使不是永久更改，如果您仍然可以截图，请看一下以供参考。
    
    最多2个
    
    智能图像替换方法的步骤 1 和 2 相同。
    
    3.获取要替换的图片路径
    1. 从2中选择的目录中选择一个图像，并在右侧区域显示该图像
    2. 右键单击显示的图像并选择データURIとして画像をコピー
      4.替换图片
      1. 打开 DevTools 要素 面板
      2. 将要更改的img标签中src的路径更改为3中复制的URI
      3. 这将替换图像
        替换 Qiita 的我的页面图标的示例
        
        前后
        
        结果和智能更换一样！
        但是，当您重新加载时，它会消失。
        
        5.最后截图
        
        使用 DevTools スクリーンショットをキャプチャ 等截图。
        
        就这样，推送结束了！
        感谢您这次的辛勤工作。
        
        我希望这篇文章对某人有所帮助。
        
        拍摄后禁用覆盖并删除目录