盤點2021線上程式碼片段編輯偵錯網站

2021-07-28 03:02:45

對於一些前端的樣式和js效果，我們非常希望可以將這些程式碼片段儲存起來，然後分享給那些想要使用這些樣式特效的人，慶幸的是，網路上已經有很多這樣的網站了，今天我們就來盤點一下這些非常好用的網站。

誕生比較早的一個程式碼片段網站，它集成了主流的js框架，你可以輕鬆地在需要使用的時候引入它們，同時它也支援引入外部css連結，通過將html，css,js程式碼片段分離，讓使用者有了非常清楚的程式碼結構，非常方便程式碼地偵錯。

它支援登入功能，登入以後，你可以將自己的程式碼片段進行儲存和分享。

一個支援多種程式語言的程式碼運行網站，你可以儲存自己的程式碼，你可以運行各個常用的程式語言程式碼，缺點是有時候需要輸入驗證碼，有些功能需要升級vip才能使用。

和jsfiddle很類似，也是專業的網頁編輯器，可以引入js,css,對於html,js,css分為三個視窗進行管理，登入之後可以儲存程式碼片段和分享程式碼片段。即使不登入，也可以使用它進行臨時的程式碼編輯和測試。

也是一款線上程式碼編輯網站，也是可以編輯html和css，js程式碼片段，可以引入第三方庫，可以引入第三方css，可以檢視控制檯的輸出。

它可以儲存截圖，可以生成模板，同樣也支援程式碼打包下載。

它提供了很多優秀的程式碼案例，如果你沒有思路或者僅僅只是想欣賞下他人的優秀程式碼，你可以來這裡找到你想要的，類似於jsfiddle,它也是支援html，js，css程式碼編輯的，它的預覽展示頁面看起來很大，非常方便檢視。

它的html支援markdown和slime進行處理，它的js支援coffeescript,它的css支援sass,scss,less等。

它主要支援的是css程式碼塊的測試，它目前不支援js，它的程式碼編輯塊字型可以非常方便地進行調整。

網上有很多類似的程式碼編輯網站，如果你感興趣的話，你也可以去github上檢視Plunker等項目開原始碼進行分析研究，自行搭建屬於自己的程式碼片段編輯網站。