今天軍哥給大家帶來新的干活,在瀏覽器中調整樣式,直接映射到代碼中,不用重復在代碼中修改了,讓你瞬間覺得有飛的感覺
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
