![梅問題-Web Maker 將CodePen移植到瀏覽器中,不但支援離線編輯、儲存、下載,甚至還可同步至CodePen](http://photo.minwt.com/img/Content/webdesign/web-maker/web-maker_00.jpg)
因此當要測試較複雜的範例時,還是得開啟CodePen或是建立一個新網頁測試,才能預覽實際的效果,因此最近在尋找其它的Chrome的外掛時,無意間找到一款超強大的網頁編輯器工具Web Maker,畫面與CodePen相似度99%,甚至還支援儲存、下載外,還可將編輯的原始碼,同步回CodePen,因此想要一個離線版CodePen的朋友,不妨可試試Web Maker。
Web Maker
Step1
首先在進入Web Maker的外掛頁面後,點一下加入Chrome鈕,再新增到瀏覽器中。
![梅問題-Web Maker 將CodePen移植到瀏覽器中,不但支援離線編輯、儲存、下載,甚至還可同步至CodePen](http://photo.minwt.com/img/Content/webdesign/web-maker/web-maker_01.jpg)
Step2
當安裝完畢後,在網址列後方會看到一個黃橘的三角形圖示,點一下隨即就會進入Web Maker編輯模式,有沒有發現與CodePen極為相似。
![梅問題-Web Maker 將CodePen移植到瀏覽器中,不但支援離線編輯、儲存、下載,甚至還可同步至CodePen](http://photo.minwt.com/img/Content/webdesign/web-maker/web-maker_02.jpg)
Step3
若不習慣左右的畫面分割,也可透過下方來改變區塊的分割。
![梅問題-Web Maker 將CodePen移植到瀏覽器中,不但支援離線編輯、儲存、下載,甚至還可同步至CodePen](http://photo.minwt.com/img/Content/webdesign/web-maker/web-maker_03.jpg)
Step4
這時點區塊右上的放大圖示,就可將編輯區域延展到最大,這時就可輸入相關的原始碼進行測試,而下方這就是梅干最近可相當感興趣的tailwindcss框架。
![梅問題-Web Maker 將CodePen移植到瀏覽器中,不但支援離線編輯、儲存、下載,甚至還可同步至CodePen](http://photo.minwt.com/img/Content/webdesign/web-maker/web-maker_04.jpg)
Step5
若要將測試的原始碼,同步回CodePen的話,也可點下方的圓形圖示。
![梅問題-Web Maker 將CodePen移植到瀏覽器中,不但支援離線編輯、儲存、下載,甚至還可同步至CodePen](http://photo.minwt.com/img/Content/webdesign/web-maker/web-maker_05.jpg)
Step6
這樣就會將頁面導回到CodePen,甚至剛剛編輯的原始碼,也會同步顯示在CodePen中。
![梅問題-Web Maker 將CodePen移植到瀏覽器中,不但支援離線編輯、儲存、下載,甚至還可同步至CodePen](http://photo.minwt.com/img/Content/webdesign/web-maker/web-maker_06.jpg)
Step7
若測試沒問題,也可以選擇上方的Save儲存在本機端中,或是按下方的下載鈕,將它儲存成html檔。而WebMaker真的挺方便的,因此身為網頁設計師的你,也趕快下載吧!
![梅問題-Web Maker 將CodePen移植到瀏覽器中,不但支援離線編輯、儲存、下載,甚至還可同步至CodePen](http://photo.minwt.com/img/Content/webdesign/web-maker/web-maker_07.jpg)