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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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