mco*_*phy 16 css testing google-chrome image google-chrome-devtools
有没有办法使用Chrome开发工具测试不同的图像？我创建了一个新的背景图形,我想在一个已经在<body>标签上有背景图形的实际网站上进行测试.不过,我不想改变现场网站.只需测试它,看看新图像是什么样的.这可能吗？
小智 33
这是答案,由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)"链接.
小智 16
另一个选择是启动一个简单的http服务器.
在终端(或命令提示符)中,cd进入保存图像的目录,然后键入python -m SimpleHTTPServer.
现在,您可以使用开发工具引用图像http://localhost:8000/filename.jpg.
我认为最好、最简单的解决方案是将图像转换为 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==");
}
Chi*_*g64 -1
您可以将面板中背景图像的 url 替换Elements为您想要尝试的图像的 url。检查此链接以了解这是如何完成的。
此更改将立即在您的浏览器窗口中显示效果。正如Johan Linder提到的，如果您的计算机上有该图像，则必须将图像托管在某处。
nate wilton 的答案正确地指出了如何使用 Chrome 扩展来做到这一点。
| 归档时间： |
|
| 查看次数： |
37790 次 |
| 最近记录： |