星空网 > 软件开发 > 网页设计

谷歌浏览器修改CSS和js后同步保存到文件中 (译)

本文标题:谷歌浏览器修改CSS和js后同步保存到文件中。

文本作者:魔芋铃。

英文原文:http://www.stephensaw.me/google-chrome-devtools-source-maps/

谷歌的Chrome DevTools源地图

谷歌的Chrome DevTools发展得越来越好,尤其是他们快速的Blink and V8的性能 ,而且他们使DevTools更好。 最近我发现,编辑源代码的正确的方式是使用源映射了Chrome DevTools。
 

Source Maps

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

(按 F12,点击齿轮图标。)

 

谷歌浏览器修改CSS和js后同步保存到文件中 (译)

设置工作区

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

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

谷歌浏览器修改CSS和js后同步保存到文件中 (译)

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

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

谷歌浏览器修改CSS和js后同步保存到文件中 (译)

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

编辑JavaScript

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

谷歌浏览器修改CSS和js后同步保存到文件中 (译)

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

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

谷歌浏览器修改CSS和js后同步保存到文件中 (译)

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

谷歌浏览器修改CSS和js后同步保存到文件中 (译)

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

谷歌浏览器修改CSS和js后同步保存到文件中 (译)

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

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

调整

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

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

谷歌浏览器修改CSS和js后同步保存到文件中 (译)

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

谷歌浏览器修改CSS和js后同步保存到文件中 (译)

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

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

标签:chrome, devtools, javascript, source maps

    
 

 






原标题:谷歌浏览器修改CSS和js后同步保存到文件中 (译)

关键词:JS

JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

了解R标商标的申请流程及注意事项:https://www.kjdsnews.com/a/1359121.html
了解R标商标注册流程及时间:https://www.kjdsnews.com/a/1359122.html
了解C360007商标注册服务项目的全部内容:https://www.kjdsnews.com/a/1359123.html
买美国商标,亚马逊备案有何影响?:https://www.kjdsnews.com/a/1359124.html
买美国商标进行亚马逊营销时需要注意的注意事项:https://www.kjdsnews.com/a/1359125.html
了解商标国际分类30类的基本概念:https://www.kjdsnews.com/a/1359126.html
丽人丽妆2023年扭亏为盈 玉容初、美壹堂等自有品牌增速超40% :https://www.kjdsnews.com/a/1836576.html
一天拿下10万美金预售!深圳大卖出海第一年成为亚马逊供应商:https://www.kjdsnews.com/a/1836577.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流