今天军哥给大家带来新的干活,在浏览器中调整样式,直接映射到代码中,不用重复在代码中修改了,让你瞬间觉得有飞的感觉
ps: 说人话就是以后调整样式直接在浏览器中调整,代码自动修改
- 1.第一步先创建工程,这个就不在重复了
-
2.工程创建好了直接在浏览器中预览
如图 -
3.点击下面的sources
会看到一个虚拟的代码库
ps: 这时候你修改了这个虚拟的并没有在代码中真的修改,那么如何在代码中修改呢?
-
4.在Sources里面,右键选择 Add floder to workspace --> 然后点击,找到你的真是文件夹的路径
点击
找到工程文件夹 -
5.浏览器会询问你是否允许
直接点击允许 -
6.然后就会出来真实的文件夹
看图 -
7.展开文件夹找到index.html --> 然后在文件上右键--> 会看到很多选项 ---> 选择mapxx代表映射
选择mapxx代表映射 -
8.接下来会弹框
直接点击 -
9.你就会看到2个文件夹就会合成一个文件夹,到此映射结束,你可以直接在浏览器中修改盒子的样式,这样代码会自动修改
- 10.到此就ok了,可以随心所欲修改代码,所见即所得
- 11.最后如果你用的编辑器是webStrom会发现不能映射,因为webStrom里面自带的服务器,所以映射失败,那么还想要所见即所得怎么办呢?这时候你只需要展开css文件夹,找到index.css文件,右键映射就OK了,这样你后面在修改的时候直接会修改css文件里面的代码.
ps:好了小伙伴们赶快去试试吧
持续更新实用的干货
微博关注coderYJ
简书关注coderYJ
微信公众号关注coderYJ
