如何保存样式面板的CSS谷歌Chrome开发工具?
在工具的网站上提到,我们可以在资源面板中看到所有的变化
但我在本地工作的CSS文件,但更改没有显示在资源面板为我
顺便问一下,你知道任何插件,工具,以保存css更改Chrome开发工具? 我知道Firebug有很多https://stackoverflow.com/search?q=firebug+CSS+changes+save
如何保存样式面板的CSS谷歌Chrome开发工具?
在工具的网站上提到,我们可以在资源面板中看到所有的变化
但我在本地工作的CSS文件,但更改没有显示在资源面板为我
顺便问一下,你知道任何插件,工具,以保存css更改Chrome开发工具? 我知道Firebug有很多https://stackoverflow.com/search?q=firebug+CSS+changes+save
当前回答
"资料"你找错地方了。
它不在“本地存储”下面,而是在“帧”下面:
上面的截图显示了原始样式与devtools中所做的新修改的差异。您可以右键单击左侧窗格中的项目并将其保存回磁盘。
其他回答
Tincr Chrome扩展更容易安装(不需要运行节点服务器),还附带LiveReload一样的功能开箱即用!这就是双向编辑!:)
锡。cr的网站
Chrome网络商店链接
安迪的博客文章
现在Chrome 18已经在上周发布了所需的api,我在Chrome网络商店中发布了我的Chrome扩展。扩展自动保存CSS或JS在开发工具到本地磁盘的更改。去看看吧。
要回答你关于任何可以保存更改的扩展的问题的最后一部分,有一个修补程序
它允许您将更改从Chrome开发工具直接保存到GitHub。从那里,你可以在GitHub上设置一个接收后的钩子来自动更新你的网站。
只要你没有在element.style中插入CSS:
转到您已添加的样式。应该有一个链接说inspector-stylesheet:
单击它,它将打开您在源代码面板中添加的所有CSS 复制粘贴——耶!
如果你一直在使用element.style:
您只需右键单击HTML元素,单击Edit as HTML,然后复制并粘贴带有内联样式的HTML。
仅供参考,如果您使用内联样式或直接修改DOM(例如添加一个元素),工作区不能解决这个问题。这是因为DOM存在于内存中,并且没有与DOM的活动状态相关联的实际文件。
为此,我喜欢从控制台获取dom的“之前”和“之后”快照: 复制(document.getElementsByTagName (html) [0] .outerHTML)
然后我把它放在一个diff工具中来查看我的更改。
全文:https://medium.com/@theroccob/get- coded -out- chrome.devtools -and-into your-- defaf5651b4a