巧妙使用工具，不用自己費時費力，它不香嗎??以下為大家整理了8款減輕前端開發人員生活壓力的工具，快來領走吧!

1.DebuCSSer

DebuCSSer是CSS調試工具的簡易版，通過線框的形式呈現網頁上的DOM元素，這款工具非常簡單，按住 CTRL 鍵然后用鼠標在頁面上進行滑動，就會看到對應元素被加上了線框，還會顯示元素的寬高和對應的class或id。當你按住 CTRL + SHIFT 時，頁面上所有的元素都會以線框的形式進行呈現，元素與元素之間的關系變得清晰。快捷鍵、線框樣式你都可以自己設置。

2.Animated CSS burger

這是一款漢堡動畫變換(三條橫線)的CSS插件，也就是三個橫線的動畫變換，比如做導航的側滑菜單時就會經常看到它，點擊圖標變成叉號菜單打開，再次點擊叉號菜單關閉，又會恢復成三條橫線。這款插件除了可以變成叉號，叉號的變換效果也能進行細微控制，比如旋轉，擠壓、側滑、滑動等等，也能變成各個方向的箭頭。

3.CSS Grid Generator

它可以讓你你可以設置行和列的數字還有單位，為您生成一個 CSS Grid網格布局!在方框中拖動來創建 div 放置在網格內。但它只是一種快速使用 CSS Grid 網格布局功能的方法。很多人覺得這個太復雜了難以理解。其實Grid可以做很多事情，而這個小的生成器只涉及到了一小部分功能。可以讓大家快速上手并創造更多有趣的布局。

4.Darkmode.Js

很多網站都有白天或夜間的閱讀模式，你也可以花幾秒鐘就制作出來。這個插件使用 css mix-blend-mode的特性可以給你的網站添加夜間模式。只需要復制粘貼代碼在網頁上添加一個小部件就可以進行模式切換，當然你還可以用編程的方式使用它。該插件是輕量級的，

窗口小部件自動適應窗口大小，能夠記住用戶的選擇，如果操作系統偏好設置為夜間黑暗深色主題的話，會自動顯示為“夜間模式”，用編程的方式進行實現的話就無需掛載小部件。

5.EnjoyCSS

EnjoyCSS也是一款易操作的工具，完全可以成為你費勁兒學習CSS時的救星。它很大程度地改變了你的工作流程。在創建復雜的CSS樣式時，十分節省時間和精力。如果你是新手也沒問題，不需要太多的專業知識就可以完成一個復雜的CSS。

6.CSSmatic

這是一款一體化的工具其中含有①噪聲紋理工具: 創建帶有臟像素和噪點的細微背景圖案，更改顏色和值，實時預覽結果②漸變生成工具: 使用多種顏色和不透明光圈生成驚艷的漸變③邊框圓角工具: 超級好用又省時，同時更改所有選定的邊框，實現需要的圓角效果④盒陰影工具: 在單個位置創建完美陰影效果所需的功能都應有盡有。這些工具的UI都非常直觀，你值得擁有。

7.StackBlitz

這個工具非常有用，尤其在嘗試在線使用示例代碼片段或庫時。有時為了一個新性能從頭開始創建一個新項目，時間一定不足夠。如果你有StackBlitz就可以在短短幾分鐘時間里輕松使用新的NPM軟件包，無需在本地從頭開始。

8.CanIUse

這是一個在線工具，可以讓你知道當前實現的功能是否與期望對接的瀏覽器兼容。你是否有過這樣的經歷：其他瀏覽器不支持應用程序中使用的一些功能。所以必須要檢查瀏覽器的兼容性。

原文地址：https://www.toutiao.com/i6914559304389558797/