使用 Chrome 开发工具在实时站点上测试本地背景图像？
Posted
技术标签:
【中文标题】使用 Chrome 开发工具在实时站点上测试本地背景图像？【英文标题】：Test Local Background Image on Live Site with Chrome Dev Tools? 【发布时间】：2014-09-07 06:18:18 【问题描述】：有没有办法使用 Chrome 开发工具来测试不同的图像？我创建了一个新的背景图形，我想在一个已经在 <body> 标签上具有背景图形的实时站点上对其进行测试。不过，我还不想更改实时站点。只需对其进行测试以查看新图像的外观。这可能吗？
【问题讨论】：
Google Chrome Extensions - Can't load local images with CSS的可能重复 【参考方案1】：另一种选择是启动一个简单的 http 服务器。
在您的终端（或命令提示符）中，cd 进入保存图像的目录，然后为 Python 2 输入 python -m SimpleHTTPServer。
对于 Python 3，使用以下命令：python -m http.server [<portNo>]
现在您可以使用 http://localhost:8000/filename.jpg 在开发工具中引用图像。
【讨论】：
刚用过这个。非常好的解决方法。我想知道为什么现在是政策（当我开始上网时没有回来）。如果允许“localhost”是一个安全修复程序，这似乎也很愚蠢 智能、简单，最重要的是，快速 希望我先阅读这篇文章。 chrome 扩展是一个聪明的解决方案，但对于那些使用现成的 http-server 命令的人来说，这要简单得多。 这是真正的解决方案，哇，永远改变我的生活。从字面上看需要2秒。太棒了。【参考方案2】：天哪，六年有多么不同！在https://umaar.com/dev-tips/174-drag-drop-image-local-overrides/ 找到了这个非常简单的方法
打开 Chrome 检查器首选项。
选中“启用本地覆盖”。
在html中找到原图。
右键单击文件路径，然后选择“在源面板中定位”。
在源面板的左侧面板中选择图像后，拖动 桌面上的替换图像并放到预览面板上 在右边。
当您将鼠标悬停时，您会看到一个虚线轮廓，其中包含文字“Drop image 文件在这里。” 将图像文件放在那里。;-)
您可能需要刷新页面才能显示新图像。是的， 只要 Inspector 处于打开状态并且“本地 覆盖”已启用。
注意：文件名在浏览器中不会改变，但新图像将显示在原来显示的位置。
【讨论】：
最后，这对我有用..!!简单，只需拖放东西?【参考方案3】：我认为最好和最简单的解决方案是将您的图像转换为 Base64（您可以使用任何在线/离线工具），然后将输出粘贴到 DevTools 中。
如果您在 IMG 标签中需要它，请这样做：
<img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" />
如果你需要它作为背景图片，你可以这样做：
.background
background-image: url("data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==");
【讨论】：
【参考方案4】：您可以将Elements 面板中的背景图片的网址替换为您想尝试的图片的网址。 Check this link 看看是怎么做到的。
此更改将立即在您的浏览器窗口中生效。正如Johan Linder 所提到的，您必须将图像托管在某处，以防您的计算机上有图像。
nate wilton's answer 正确指出了如何使用 Chrome 扩展程序来做到这一点。
【讨论】：
无需在某处托管图像，只需使用file:// URL（除非页面有严格的内容安全策略。）
我无法让file:// 工作。我在 Chrome 中打开本地图像并将 url (file:///Users/mcarroll/Desktop/SLAM!/BBB/background.png) 复制到背景图像属性中，但它仍然无法加载。我最终只是将文件上传到另一个站点，复制 URL，然后将其粘贴到属性中。效果很好。
@mcography：你说得对，Chrome 的安全策略不允许你加载本地资源。我不认为有任何方法可以改变这一点。【参考方案5】：
这是答案，由 Rob Donovan @ superuser 提供（来自https://superuser.com/a/839500/454034）
由于您提到了“Chrome”，您可以使用 Chrome 扩展程序来执行此操作，以启用对您文件的本地访问。
按照以下步骤操作：
1) 在图片所在的本地文件夹中，创建名为“manifest.json”的文件并输入：
"name": "File Exposer",
"manifest_version": 2,
"version": "1.0",
"web_accessible_resources": ["*.jpg","*.JPG"]
2) 这是你的 chrome 地址栏：chrome://extensions/
3) 确保选中“开发者模式”（页面右上角）
4) 点击“加载解压扩展”按钮
5) 导航到图片和manifest.json文件所在的本地文件夹，点击确定
6) 扩展名“File Exposer”现在应该列在列表中，并且对“已启用”有一个复选标记。如果文件夹位于网络驱动器或其他慢速驱动器上或包含大量文件，则可能需要 10-20 秒或更长时间才会出现在列表中。
7) 请注意与您的扩展程序关联的“ID”字符串。这是 EXTENSION_ID
8) 现在在您的 HTML 中，您可以使用以下内容访问该文件，将“EXTENSION_ID”更改为您的扩展程序生成的任何 ID：
<img src='chrome-extension://EXTENSION_ID/example1.jpg'>
注意，*.jpg 是递归的，它会自动匹配指定文件夹和所有子文件夹中的文件，您不需要为每个子文件夹指定。另请注意，它区分大小写。
在“img”标签中，您没有指定原始文件夹，它与该文件夹的相对关系，因此只需要指定子文件夹。
如果您修改 manifest.json 文件，您需要点击扩展旁边的“重新加载 (Ctrl+R)”链接。
【讨论】：
这仅适用于前景图像吗？我正在尝试添加到 CSS，但我看不到它的工作。我想知道它是否仅适用于 img 标签？ 非常感谢。我已经使用这种技术来连接本地 css。有没有办法查看实时更新或在不加载恢复到旧参考的 dom 的情况下刷新 css 的方法？ @tiny_m 它适用于开发工具的标签和 CSS 部分。如果这就是你的意思，我没有尝试将它放在 CSS 文件中。【参考方案6】：这不是您问题的确切答案，但您可以使用类似dropbox public folder 的方法来解决此问题。图像在文件夹中后，您只需右键单击并复制公共 url 以在开发工具中使用。
【讨论】：
为了可用性/易于找到解决方案，这是一个很棒的答案。谢谢。比扩展黑客更省力。 由于 stack-o 的信誉系统，我无法对上述内容发表评论，但上述 Dropbox 方法不再有效。自 2017 年 9 月 1 日起，所有用户的公共链接均已停用。 正如这个答案中的链接现在所说，没有更多的公共 Dropbox 链接。 如果您不关心公开分享，imgur 也可以使用以上是关于使用 Chrome 开发工具在实时站点上测试本地背景图像？的主要内容，如果未能解决你的问题，请参考以下文章