Question

有没有办法使用Chrome开发工具测试不同的图片？我创建了一个新的背景图形，我想在已经在<body>标签上有背景图形的实际网站上进行测试。不过，我不想改变现场网站。只需测试它，看看新图像是什么样的。这可能吗？

Answer 1

这是答案，由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'现在应列在列表中，并勾选“Enabled”。如果文件夹位于网络驱动器或其他慢速驱动器上或有大量文件，则列表中可能需要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）”链接。

Answer 2

另一个选择是启动一个简单的http服务器。

在终端（或命令提示符）中，cd进入保存图像的目录，然后键入python -m SimpleHTTPServer。

现在，您可以使用http://localhost:8000/filename.jpg参考开发工具中的图像。

Answer 3

这不是您问题的准确答案，但您可以采用的方法是使用dropbox public folder之类的内容。一旦图像在文件夹中，您可以右键单击并复制公共URL以在开发工具中使用。

Answer 4

我认为最好，最简单的解决方案是将图像转换为Base64（您可以使用任何在线/离线工具），然后将输出粘贴到DevTools中。

如果您需要在IMG标签中使用它，请按照以下步骤操作：

<img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
    9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />

如果需要将其用作背景图像，则可以这样做：

.background {
  background-image: url("data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
    9TXL0Y4OHwAAAABJRU5ErkJggg==");
}

Answer 5

我的，六年有何不同！在https://umaar.com/dev-tips/174-drag-drop-image-local-overrides/

处发现了这种drop-dead-simple方法

打开Chrome检查器偏好设置。
选中“启用本地替代”。
在html中找到原始图像。
右键单击文件路径，然后选择“在源面板中查找”。
在“源”面板的左侧面板中选择图像后，拖动从桌面到预览面板上的替换图像在右边。
当您将鼠标悬停时，您会看到一个虚线框，上面有文字“ Drop image 文件放在这里。”将图像文件放到那里。;-）
您可能需要刷新页面才能显示新图像。是，只要检查器处于打开状态，并且“本地覆盖”已启用。

注意：文件名在浏览器中不会更改，但是新图像将显示在原始图像先前显示的位置。

Answer 6

~~您可以使用您要尝试的图片的网址替换Elements面板中背景图片的网址。 Check this link了解如何做到这一点。~~

~~此更改将立即在您的浏览器窗口中显示效果。正如Johan Linder所提到的，如果您的计算机上有图像，则必须将图像托管在某处。~~

nate wilton's answer正确地指出了如何使用Chrome扩展程序执行此操作。

使用Chrome开发工具在实时网站上测试本地背景图像？

6 个答案: