聽我的就完事！前端不易，我用工具。今天我可是不要臉的遍訪了四位經驗豐富的前端工程師，歷經七七四十天，九九八十一難，才整理出了這本葵花~啊不，前端開發工具寶典，用了你就知道，真香啊。1、Responsively App：網頁調試必備法寶像我一樣搞過前端的都知道，現在的大廠越來越重視網頁在移動端的使用體驗，是移動端的尺寸和型號太多，在不同的移動端上進行設備調試是個非常繁瑣的工作。雖然Chrome 瀏覽器默認的工具也還不錯，但是一次只能針對一種尺寸，開發成本相對還是高了一些。Responsively 最主要的特色就是你只需要在一臺設備上進行任何操作，便會實時同步到所有設備上，并且可以在一個窗口里查看所有目標設備的情況，形成一個鏡像交互的效果。讓你在進行網頁調試的時候，如虎添翼。2、D3.js：網紅級數據可視化工具這個工具可能是最受歡迎和最廣泛的Javascript數據可視化庫，足足收獲了80kstars。它的優勢就是在于能夠將有數據的文檔，使用HTML，SVG和CSS轉化為一個可視化的圖表，讓信息更直觀更靈活。而且它的通用性很強，并不需要通過專用框架，就可以直接與現代瀏覽器的功能結合，像是canvas類圖表, 無論你代碼操作粒度再細, 放在react組件里的無非就是一個canvas元素.而D3可以把任意數據綁定到文檔對象模型（DOM），與react更好的結合。3. CodePen：實現新創意代碼（codepen展示的優秀作品）Codepen可以說是前端界的Dribbble，（一個展示設計和作品的網站）。它最大的存在意義，就是將HTML、CSS、JavaScript等創作出來的設計，更進一步的實現出來，把工具推向一個更真實的境地。它幾乎支持所有你能夠想到的庫，也允許你添加外部資源，可以說是一塊很好的實現創意的“畫布”。所以如果你也是一個熱衷于demo實現的設計師，那這里也將會是你研究技術、參觀作品的靈感源泉。4、bit.dev：很棒的組件中心我一般用它來托管、記錄和管理不同項目中的可重用構件。它最大的優勢Bit可以輕松地在任何規模的項目和應用程序之間共享和管理組件。等于是只編寫一次，就可以隨處使用。而且它具有完全自動化的依賴性定義/分辨率和可擴展的版本控制，基本上滿足設計系統所需，可以幫助你重新構建系統。它還允許在團隊之間共享組件，從而允許你的團隊與其他團隊協作。能夠提高你們的團隊協作效率，加快開發進程。5、Npkill：系統打掃型工具前端開發者一定能了解，node_modules 這個龐大的文件夾，每次執行 npm install 的時候都會安裝項目的依賴包以及依賴的依賴，它存在于我們的每一個項目中，隨著時間越來越長，它會變得越來越大，占據了不少儲存空間。當你頭疼如何移除node模塊文件夾時，Npkill就派上了大用場。它相當于是一個你系統清潔工，通過移除這些笨重的文件夾，給你的系統做一個瘦身。是開發者必須具備的清潔型工具。俗話說，工欲善其事必先利其器，有了這些開發工具，希望能幫你提升戰斗力，咱們爭取聰明但不絕頂，偷懶也靠實力！