
因此當要測試較複雜的範例時,還是得開啟CodePen或是建立一個新網頁測試,才能預覽實際的效果,因此最近在尋找其它的Chrome的外掛時,無意間找到一款超強大的網頁編輯器工具Web Maker,畫面與CodePen相似度99%,甚至還支援儲存、下載外,還可將編輯的原始碼,同步回CodePen,因此想要一個離線版CodePen的朋友,不妨可試試Web Maker。
Web Maker
Step1
首先在進入Web Maker的外掛頁面後,點一下加入Chrome鈕,再新增到瀏覽器中。

Step2
當安裝完畢後,在網址列後方會看到一個黃橘的三角形圖示,點一下隨即就會進入Web Maker編輯模式,有沒有發現與CodePen極為相似。

Step3
若不習慣左右的畫面分割,也可透過下方來改變區塊的分割。

Step4
這時點區塊右上的放大圖示,就可將編輯區域延展到最大,這時就可輸入相關的原始碼進行測試,而下方這就是梅干最近可相當感興趣的tailwindcss框架。

Step5
若要將測試的原始碼,同步回CodePen的話,也可點下方的圓形圖示。

Step6
這樣就會將頁面導回到CodePen,甚至剛剛編輯的原始碼,也會同步顯示在CodePen中。

Step7
若測試沒問題,也可以選擇上方的Save儲存在本機端中,或是按下方的下載鈕,將它儲存成html檔。而WebMaker真的挺方便的,因此身為網頁設計師的你,也趕快下載吧!
