谷歌浏览器如何将页面中更改的css保存到本地

谷歌浏览器如何将页面中更改的css保存到本地

本篇说一下谷歌浏览器在开发者工具中更改了页面css样式后如何将修改的样式文件更新本地项目中的css文件

首先用谷歌浏览器打开本地项目的一个页面，如下图所示

fn+f12打开开发者工具如下所示

点击到Elements面板中可以看到左边区域为DOM树，点击DOM树中的某个DOM节点可以在右边区域的Styles区域显示出该DOM节点所对应的CSS样式

在Styles区域可以点击css属性所对应的值更改原来的css，也可以在原来的属性分号后面点击一下在下方出现的输入框中添加另外的CSS样式，如下图所示将页面样式进行了更改；在样式区域可以看到此样式所对应的css文件，点击这个文件会跳转到Sources面板中

在Sources面板中可以看到css文件的具体代码，和刚刚更改的css样式

在css文件中右键，点击save as，选择项目中css文件所在目录，替换掉之前的css文件就能更改本地的css文件了

刷新页面发现页面样式发生了相应的变化