浏览器开发HTML5-所见即所得

作者: coderYJ | 来源:发表于2017-02-24 15:40 被阅读339次

今天军哥给大家带来新的干活,在浏览器中调整样式,直接映射到代码中,不用重复在代码中修改了,让你瞬间觉得有飞的感觉
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文件里面的代码.