使用Chrom调试css样式

在写css的过程中，难免要遇到对样式进行微调的情况，比如一个间距稍微向某个方向调整多少才好，或者是在选颜色时候可能要改一次代码，刷新一次页面查看效果，也可以浏览器的开发者工具调试出合适的颜色，但是这个修改后的颜色并不会同步到代码中，还要自己去源码中改掉。最近在慕课网上学到了如何用Chrom来调试css样式，简单实用！

1.打开Chrom开发者工具(F12)，切换到Sources，你会发现sources是这样的:

2.在sources的空白处右键，将自己的项目文件夹添加到工作目录，之后你的项目文件夹就会出现在这个Sources中，添加后是这样的(我的项目文件夹就叫blog):

3.这里有两种方法，结果是一样的:

• 在你自己添加的项目文件夹(blog)中，找到你想要调试的css文件，右键，选择map to network resource...

• 在服务器的代码(localhost:3000)中找到你要调试的css文件，右键，选择map to file system resource...

这时工具会自动地帮你匹配到相应的css文件，点击确定，映射成功。

4.大功告成，之后就可以在Chrom中直接调试css，调试好之后直接ctrl+c保存，不用再切回到编辑器里再改一遍了！