css修改同步保存到文件,谷歌浏览器修改CSS和js后同步保存到文件中（译）

要验证源地图的开启，转至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团队将继续添加更多功能的工具。

css修改同步保存到文件,谷歌浏览器修改CSS和js后同步保存到文件中（译）相关推荐

谷歌浏览器修改CSS和js后同步保存到文件中（译）
本文标题:谷歌浏览器修改CSS和js后同步保存到文件中. 文本作者:魔芋铃. 英文原文:http://www.stephensaw.me/google-chrome-devtools-source-m ...
谷歌浏览器弹出窗口html代码,谷歌浏览器显示通知消息JS代码
谷歌浏览器显示通知消息JS代码点击显示通知会弹出通知对话框,如下图效果: h5通知消息对话框代码如下: 开心洋葱谷歌浏览器通知消息JS代码 * {margin: 0; padding: 0;} bo ...
easyui修改css样式,修改easyui的easyloader的默认css目录路径
easyloader默认情况下会使用js文件所在目录下的themes文件夹中的css,这里改成项目自定义的css文件夹. 首先找到: var m=src.match(/easyloader\.js(\ ...
前端资源文件（图片 css js）同步到阿里云OSS
前端资源文件(图片 css js)同步到阿里云OSS 需求: 为了实现自动化更新前端资源,前端资源已放到了阿里云OSS,实现自动上传. 思路: 1.因为使用的是php语言开发项目,自然会想到用php实 ...
修改时间服务器失败,电脑系统同步时间失败怎么办修改时间服务器的方法。...
一般来说,自己设定系统时间没有办法那么准确,因此更多的是利用时间同步功能,但是windows时间服务器不在中国,因此系统时间同步服务经常出错,那么如何解决系统时间同步出错的问题呢?下面给大家介绍修改电 ...
如何使用谷歌浏览器修改cookie的值（黑客成长之路）
成长笔记今天晚上在练习靶机(黑客丛林之旅:http://www.fj543.com/),在第三关时,由于之前都在burp suite修改cookie或者login的值,晚上用的是自己的电脑,没有bu ...
linux修改文件句柄数生效_linux修改句柄数
linux服务器大并发调优时,往往需要预先调优linux参数,其中修改linux最大文件句柄数是最常修改的参数之一. 在linux中执行ulimit -a 即可查询linux相关的参数,如下所示: [ ...
css学习（第一天）（css基础选择器，css字体属性，css文本属性，css引入方式）
CSS第一天 1.css简介 1.1 html的局限性 1.2 css-网页的美容师 1.3 css语法规范 1.4 css代码风格 1.4.1 样式格式书写 1.4.2 样式大小写风格 1.4.3 ...
css颜色rgba代码对照表_改善 CSS 的 10 个最佳实践
戳蓝字「前端技术优选」关注我们哦! CSS 看起来是一种非常直接且不易犯错的语言.只需要添加规则以对网站进行样式设置就可以了,对吗?对于只需要几个 CSS 文件的小型站点,可能是这种情况.但是在 ...

css修改同步保存到文件,谷歌浏览器修改CSS和js后同步保存到文件中（译）

css修改同步保存到文件,谷歌浏览器修改CSS和js后同步保存到文件中（译）相关推荐

最新文章

热门文章

css修改同步保存到文件,谷歌浏览器修改CSS和js后同步保存到文件中 （译）

css修改同步保存到文件,谷歌浏览器修改CSS和js后同步保存到文件中 （译）相关推荐

最新文章

热门文章

css修改同步保存到文件,谷歌浏览器修改CSS和js后同步保存到文件中（译）

css修改同步保存到文件,谷歌浏览器修改CSS和js后同步保存到文件中（译）相关推荐