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

[[374174]]

1.DebuCSSer

DebuCSSer是CSS調(diào)試工具的簡易版，通過線框的形式呈現(xiàn)網(wǎng)頁上的DOM元素，這款工具非常簡單，按住 CTRL 鍵然后用鼠標(biāo)在頁面上進(jìn)行滑動(dòng)，就會(huì)看到對(duì)應(yīng)元素被加上了線框，還會(huì)顯示元素的寬高和對(duì)應(yīng)的class或id。當(dāng)你按住 CTRL + SHIFT 時(shí)，頁面上所有的元素都會(huì)以線框的形式進(jìn)行呈現(xiàn)，元素與元素之間的關(guān)系變得清晰。快捷鍵、線框樣式你都可以自己設(shè)置。

2.Animated CSS burger

這是一款漢堡動(dòng)畫變換(三條橫線)的CSS插件，也就是三個(gè)橫線的動(dòng)畫變換，比如做導(dǎo)航的側(cè)滑菜單時(shí)就會(huì)經(jīng)常看到它，點(diǎn)擊圖標(biāo)變成叉號(hào)菜單打開，再次點(diǎn)擊叉號(hào)菜單關(guān)閉，又會(huì)恢復(fù)成三條橫線。這款插件除了可以變成叉號(hào)，叉號(hào)的變換效果也能進(jìn)行細(xì)微控制，比如旋轉(zhuǎn)，擠壓、側(cè)滑、滑動(dòng)等等，也能變成各個(gè)方向的箭頭。

3.CSS Grid Generator

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

4.Darkmode.Js

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

窗口小部件自動(dòng)適應(yīng)窗口大小，能夠記住用戶的選擇，如果操作系統(tǒng)偏好設(shè)置為夜間黑暗深色主題的話，會(huì)自動(dòng)顯示為“夜間模式”，用編程的方式進(jìn)行實(shí)現(xiàn)的話就無需掛載小部件。

5.EnjoyCSS

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

6.CSSmatic

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

7.StackBlitz

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

8.CanIUse

這是一個(gè)在線工具，可以讓你知道當(dāng)前實(shí)現(xiàn)的功能是否與期望對(duì)接的瀏覽器兼容。你是否有過這樣的經(jīng)歷：其他瀏覽器不支持應(yīng)用程序中使用的一些功能。所以必須要檢查瀏覽器的兼容性。