当然事实并非如此我们明白

ruhul11

点。但路径是什么？从那时起，开发人员的旅程是什么......我的意思是，我认为保存或导出是不切实际的，因为没有办法将您在浏览器中所做的事情与那些产生该外观的源文件进行映射。但旅程是什么？你如何保存或导出，或者我猜是截屏？或者你做什么？

亚当：是的，这里有几条路。我想快速反思一下我们在 DevTools 中所做 B2C 电子邮件列表 的事情。比如说，DevTools，我们做了很多更改，DevTools 中有更改选项卡，我认为没有多少人知道它，它将显示您的源文件更改，以及您可以在其中进行的其他一些更改去复制粘贴吧。

亚当：是的，对于所有这些编辑代码输出的工具来说，这变得很困难，它们对源代码或创作文件没有任何了解。我的意思是，也许他们有源地图，但我认为那是一个非常有趣的未来。如果我们能够将计算的输出一直映射回未编译的源代码，那就太酷了。但在那之前，VisBug 确实会做与您在 DevTools 中所做的类似的事情。您只需复制粘贴此类片段即可。



亚当：但我会分享一些有趣的方法来让它变得更好。有一件事，假设您更改了标题、颜色并在此处进行了更改。您可以转到检查工具，当您将鼠标悬停在某物上时，它会显示一个增量。它会说：“本地修改。” 如果按住 Shift 键，您可以创建多个粘性固定检查。因此，您将转到标题，单击它，按住 Shift 键，单击另一个小框，然后按住 Shift 键单击另一个小框。现在，您可以看到工具提示，显示您对页面中的实际项目所做的更改，截取屏幕截图并将其发送给开发人员。

亚当：他们可以说，“好吧，我看到你将顶部边距更改为 20 像素。我在 CSS 中不使用像素或边距顶部。所以我将继续并更改为保证金块启动两个 RAM，谢谢你，再见。” 这很好，编辑不必关心或了解系统细节，他们只需直观地说一些内容并截屏即可。所以这个工作流程很好。它非常不干涉，并且创建了一个静态资产，适合进行很多更改。

亚当：但是，如果您进行了很多更改并且您确实更改了页面并且想要保存它，那么还有另一个扩展名为...让我们看看。页面，单个文件。单个文件会将整个当前页面下载为单个文件 HTML 元素，此时您可以将其直接拖动到 Netlify 中并获得原型的托管版本。

亚当：因为 VisBug 所做的是，它在 DOM 注释上编写自己的样式。所以保存文件是附带的。我有一条推文，我去了 GitHub，我做了……我刚刚完全调整了整个网站，它看起来很酷。我当时想，“好吧，保存文件。” 我保存了它，在新选项卡中打开它，只需将其拖到新选项卡中，我就想，“这真的很酷。” 因为 VisBug 想要这样的功能已经有一段时间了。但这是另一个扩展的责任，正在获取那些第三方资产，处理所有的内线......无论如何，所以它的存在真的很好。

亚当：因此，如果您愿意，您可以交付文件，或将其托管在某处，并共享多个生产版本的链接。你修改了生产，然后将其发送到 netlify，有人可以去检查它，并且此时它仍然具有响应能力，对吗？那时，您共享的不再是静态的比较，它仍然是实时的、响应式的……无论如何，这很令人兴奋。我的意思是，我认为这里的未来非常非常有趣，而且并不遥远。