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

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