CSS 是否有一种方法可以在页面重新加载之间保存远程资源的CSS/JS更改，或在开发工具中将远程资源映射到本地

在本文中，我们将介绍是否有一种方法可以在页面重新加载之间保存远程资源的CSS/JS更改，或在开发工具中将远程资源映射到本地。

阅读更多：CSS 教程

远程资源与本地资源的区别

在开发网页时，我们通常使用远程资源（如CSS和JS文件）来引用样式和功能。远程资源可以通过链接到外部服务器上的文件来实现，这样我们可以随时更新和修改它们。然而，这种设置在进行开发和调试时可能会遇到一些问题。

当我们进行页面开发和调试时，我们经常需要频繁地重新加载页面来查看所做的更改。这可能非常耗时，尤其是在网速较慢的情况下。此外，如果我们对远程资源进行了更改，重新加载页面时这些更改可能会被重置，我们需要重新进行调整，这样会大大降低我们的开发效率。

因此，我们需要一种方法来保存在页面重新加载之间对远程资源的更改，并且可以在开发工具中映射远程资源到本地，以方便我们进行开发和调试。

Chrome 开发工具的使用

在开发工具中，特别是在Chrome浏览器的开发者工具中，有一些强大的功能可以帮助我们解决这些问题。

Sources 面板中的文件映射

在Chrome的开发者工具中，有一个名为”Sources”的面板，它允许我们查看和编辑页面的源代码、样式表和脚本。使用Sources面板，我们可以将远程资源映射到本地文件，并进行相应的编辑。

在Sources面板中，我们可以找到”Filesystem”部分，它允许我们将本地文件夹映射到远程服务器。通过添加这个映射，我们就可以在开发工具中编辑本地文件，而不必每次重新加载页面。这就解决了我们在远程资源上进行更改后重新加载页面时的问题。

Overrides 功能

除了文件映射之外，Chrome浏览器的开发者工具还提供了一个名为”Overrides”的功能。它允许我们在本地进行更改，并将这些更改保存到浏览器的缓存中，以便在页面重新加载时保留这些更改。

使用Overrides功能，我们可以在开发工具中直接编辑和保存CSS和JS文件，而不必将其映射到本地文件。这样，我们就可以在页面重新加载时保留我们所做的更改，而不用担心被远程资源覆盖。

示例说明

假设我们正在开发一个网页，并使用一个远程CSS文件来设置页面的样式。我们可以按照以下步骤将远程CSS文件保存在本地，并在页面重新加载时保留更改。

1. 打开Chrome浏览器，并进入所需的网页。
2. 打开开发者工具，可以使用快捷键”Ctrl+Shift+I”（Windows）或”Cmd+Opt+I”（Mac）。
3. 在开发者工具中，切换到”Sources”面板。
4. 在”Sources”面板的”Filesystem”部分，单击”＋ Add folder to workspace”按钮，选择要保存远程资源的本地文件夹。
5. 找到远程CSS文件，并将其拖动到刚刚添加的本地文件夹中。

现在，我们已经成功将远程CSS文件映射到本地文件夹中。我们可以在开发工具中直接编辑该文件，并且这些更改将在页面重新加载时保留。

另外，我们还可以使用”Overrides”功能来直接在开发工具中编辑和保存CSS文件。这样，我们可以在页面重新加载时保留我们所做的更改，并且无需进行文件映射操作。

总结

在本文中，我们介绍了在开发过程中如何保存远程资源的CSS/JS更改，以及如何在开发工具中映射远程资源到本地。通过使用Chrome浏览器的开发者工具，我们可以在页面重新加载之间保留对远程资源的更改，并且方便地进行开发和调试。

通过文件映射和Overrides功能，我们可以直接在开发工具中编辑和保存CSS和JS文件，而不必担心重新加载页面时的更改丢失。这些功能大大提高了我们的开发效率，并且使得开发过程更加便捷。

希望本文对你有所帮助，使你在开发和调试过程中更加高效和方便！