css修改同步保存到文件,谷歌浏览器修改css和js后同步保存到文件中 （译） -凯发k8官方网

要验证源地图的开启，转至devtools设置齿轮图标，然后验证源地图选项被选中。

(按 f12，点击齿轮图标。)

设置工作区

启用该功能后，我们需要设置一个工作区 ，就是我们的源代码所在的文件夹(或者在我们本地服务器的脚本)。

从菜单中打开开发人员工具 ，快捷方式f12或检查页面上的任何元素，点击右下角弹出设置对话框中设置齿轮图标，单击工作区的左侧面板上，浏览文件夹在那里我们的源位置，并允许chrome浏览器时，请求许可。

现在，我们的chrome浏览器被映射到本地文件夹正确。 现在，我们可以从chrome浏览器中的文件夹(注意，我们可以使用浏览本地ip)装入我们的页面。

让说我有一个名为index.html的 html页面，一个名为javascript文件app.js，一个名为app.css的css文件，它看起来像这样

我有2项(为什么不呢，我喜欢它的大)，其中一个有一个id，这将是用来显示一些文本，当按钮被点击时。我在页面上放了一个按钮，这将是连接到一个点击事件，在我的javascript函数，我的css只是简单的改变颜色和背景颜色。

编辑javascript

现在，我们可以通过将sources选项卡中开发工具访问从chrome的源代码，然后从面板上找到我们的javascript文件。

如果我不添加的文件夹在工作区中，我将无法看到chromedev文件夹那边。

有时候我遇到问题的文件夹显示出来，但devtools不知道哪个文件映射到，所以我必须通过右击做的，我想映射代码，并选择map to file system resource( 地图文件系统资源)。

之后，我会在匹配的文件名列表，选出我需要的。

到目前为止，按钮放在那里什么都没有做，让我们直接在里面devtools添加功能saywhat。 一旦我们编辑的代码，会出现一个小*的标签上注明，我们做了一些修改，并没有保存。

所以，简单地按cmd s或ctrl s保存代码。 在这种情况下，我们无需重新载入我们的页面、重新加载代码，我们再次单击该按钮，它会工作。从我的经验，即使我们调试javascript的，功能非常强大的作品，它一样有效。

之后，我们乐意与所有的变化，回到我们的本地文件夹，我们将很高兴我们在devtools所做的更改持续回到我们的源代码。

调整

等一下！ 如果我想找回一些代码，我修改，但开发工具覆盖我的源代码的盘，怎么办？

没问题，devtools帮助我们保持我们的代码进行修改。 只是，我们正在处理的文件，单击鼠标右键，并选择local modifications(本地修改)。

我们的更改历史记录将显示与恢复到特定修订版本的能力。

尽管devtools提供了便捷的方式为我们跟踪的变化，我还是喜欢工作在一个副本，以防万一。

这些只是什么devtools可以做一点点，我敢肯定，chrome团队将继续添加更多功能的工具。

总结

以上是凯发k8官方网为你收集整理的css修改同步保存到文件,谷歌浏览器修改css和js后同步保存到文件中 （译）的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发k8官方网网站内容还不错，欢迎将凯发k8官方网推荐给好友。