聽我的就完事！前端不易，我用工具。今天我可是不要臉的遍訪了四位經(jīng)驗豐富的前端工程師，歷經(jīng)七七四十天，九九八十一難，才整理出了這本葵花~啊不，前端開發(fā)工具寶典，用了你就知道，真香啊。

1、Responsively App：網(wǎng)頁調(diào)試必備法寶

像我一樣搞過前端的都知道，現(xiàn)在的大廠越來越重視網(wǎng)頁在移動端的使用體驗，是移動端的尺寸和型號太多，在不同的移動端上進行設(shè)備調(diào)試是個非常繁瑣的工作。雖然Chrome 瀏覽器默認(rèn)的工具也還不錯，但是一次只能針對一種尺寸，開發(fā)成本相對還是高了一些。

Responsively 最主要的特色就是你只需要在一臺設(shè)備上進行任何操作，便會實時同步到所有設(shè)備上，并且可以在一個窗口里查看所有目標(biāo)設(shè)備的情況，形成一個鏡像交互的效果。讓你在進行網(wǎng)頁調(diào)試的時候，如虎添翼。

2、D3.js：網(wǎng)紅級數(shù)據(jù)可視化工具

這個工具可能是最受歡迎和最廣泛的Javascript數(shù)據(jù)可視化庫，足足收獲了80kstars。它的優(yōu)勢就是在于能夠?qū)⒂袛?shù)據(jù)的文檔，使用HTML，SVG和CSS轉(zhuǎn)化為一個可視化的圖表，讓信息更直觀更靈活。而且它的通用性很強，并不需要通過專用框架，就可以直接與現(xiàn)代瀏覽器的功能結(jié)合，像是canvas類圖表, 無論你代碼操作粒度再細, 放在react組件里的無非就是一個canvas元素.而D3可以把任意數(shù)據(jù)綁定到文檔對象模型（DOM），與react更好的結(jié)合。

3. CodePen：實現(xiàn)新創(chuàng)意代碼

（codepen展示的優(yōu)秀作品）

Codepen可以說是前端界的Dribbble，（一個展示設(shè)計和作品的網(wǎng)站）。它最大的存在意義，就是將HTML、CSS、JavaScript等創(chuàng)作出來的設(shè)計，更進一步的實現(xiàn)出來，把工具推向一個更真實的境地。它幾乎支持所有你能夠想到的庫，也允許你添加外部資源，可以說是一塊很好的實現(xiàn)創(chuàng)意的“畫布”。所以如果你也是一個熱衷于demo實現(xiàn)的設(shè)計師，那這里也將會是你研究技術(shù)、參觀作品的靈感源泉。

4、bit.dev：很棒的組件中心

我一般用它來托管、記錄和管理不同項目中的可重用構(gòu)件。它最大的優(yōu)勢Bit可以輕松地在任何規(guī)模的項目和應(yīng)用程序之間共享和管理組件。等于是只編寫一次，就可以隨處使用。而且它具有完全自動化的依賴性定義/分辨率和可擴展的版本控制，基本上滿足設(shè)計系統(tǒng)所需，可以幫助你重新構(gòu)建系統(tǒng)。

它還允許在團隊之間共享組件，從而允許你的團隊與其他團隊協(xié)作。能夠提高你們的團隊協(xié)作效率，加快開發(fā)進程。

5、Npkill：系統(tǒng)打掃型工具

前端開發(fā)者一定能了解，node_modules 這個龐大的文件夾，每次執(zhí)行 npm install 的時候都會安裝項目的依賴包以及依賴的依賴，它存在于我們的每一個項目中，隨著時間越來越長，它會變得越來越大，占據(jù)了不少儲存空間。

當(dāng)你頭疼如何移除node模塊文件夾時，Npkill就派上了大用場。它相當(dāng)于是一個你系統(tǒng)清潔工，通過移除這些笨重的文件夾，給你的系統(tǒng)做一個瘦身。是開發(fā)者必須具備的清潔型工具。

俗話說，工欲善其事必先利其器，有了這些開發(fā)工具，希望能幫你提升戰(zhàn)斗力，咱們爭取聰明但不絕頂，偷懶也靠實力！