如何将文件从我的文件系统添加到 chrome 检查元素开发工具？答案

【问题标题】：How to add a file from my filesystem to chrome inspect element dev tools?如何将文件从我的文件系统添加到 chrome 检查元素开发工具？
【发布时间】：2019-09-30 09:26:08
【问题描述】：

我正在尝试使用检查元素和 chrome 开发人员网络工具编辑我可以在线访问的网页。

我想将本地文件系统中的图像添加到网页。我该怎么做？

【问题讨论】：

标签： google-chrome-devtools

【解决方案1】：

打开检查元素，然后转到Sources 选项卡。现在点击Filesystem 选项卡（在Sources 内），在Page 旁边。

如下所示，您会看到一个按钮，上面写着Add folder to workspace。单击它，然后将包含要添加到页面的文件的文件夹添加到页面中。

现在，如果您右键单击该图像，您将看到您可以获得一个表示它的数据 URI。

您可以使用它代替img 标签的src 中的链接，如下所示： <img src="YOUR DATA URI">

【讨论】：

优秀的答案！只是一个提示：如果您添加文件夹，chrome 可能会询问您是否允许在顶部栏中添加它（我没有注意到，并认为这个答案不再起作用）。