如何在 Google Chrome 的开发工具中保存到我网站的源代码？

Posted 2023-05-07

【中文标题】如何在 Google Chrome 的开发工具中保存到我网站的源代码？

【英文标题】：How do I save to my site's source in Google Chrome's dev tools?

【发布时间】：2014-03-14 00:41:54

【问题描述】：

我在 Mac 上使用 Google Chrome。

我刚开始使用谷歌浏览器的开发工具编辑我的网站，这是一种简单快捷的体验，但没有说我可以在哪里保存我的修改。

谁能给我一个大致的介绍，因为我在其他任何地方都找不到答案。

【问题讨论】：

试试这个***.com/questions/6843495/…

【参考方案1】：

嗯，你不能。如果可以，每个人都可以更改您的网站。 这是基于客户端的实时 DOM 操作，只有您可以看到！

你必须像往常一样调整你的文件。

【讨论】：

哦，有没有办法可以复制更改后的标记？

好吧，你可以选择文本然后复制它，这行得通（我这样做）。正如我使用它的方式：当我在 html 文件中有一个新元素时，我可以使用给定的类实时设置它的样式，然后选择它并将其复制到我的 css 文件中。这是一种快速设置网站样式的方法，因为您可以实时查看哪些内容是好的，以及它是否有效。并且 pronal 产品被复制到您的 css 文件中:)

【参考方案2】：

没有办法直接从开发者工具中执行此操作，因为这会导致任何人按照 Pinki 所说的那样更改您的源文件

话虽如此，如果您转到Source 选项卡并更改那些 文件，则可以将更改后的文件保存到您的目录中。有关如何执行此操作的更详细说明，check out this article 或 this gif tutorial

另一种一般做法是随时更改源代码，这意味着如果您对喜欢的开发工具进行了更改，则立即将其添加到源代码中。我经常使用彼此相邻的窗格来做到这一点

【参考方案3】：

当你编辑一个文件时，你只需点击右键并使用另存为

您还可以使用 Workspaces 将远程资产映射到本地资产，这在您使用本地 HTTP 服务器时特别有用。如果您知道如何使用 Chrome 开发工具，它可以成为一个强大的工具。我建议您浏览其中的一些链接：

https://developers.google.com/chrome-developer-tools/

http://discover-devtools.codeschool.com/

http://remysharp.com/2012/12/21/my-workflow-never-having-to-leave-devtools/