互聯網技術開發者必備的調試工具和腳本

時間 2019-12-09

原文原文鏈接

俗話說的好：武功再好，一磚撂倒；功夫再高,也怕菜刀。可想而知，擁有工具是多麼重要！！！哈哈，不閒扯了，直接給你們上工具吧。不少大牛都是有一套本身鍾愛的工具集和資源集的哦。在今天這篇文章中，我將介紹一些可以幫助你高效開發的工具腳本和資源，權當拋磚引玉，但願可以帶給你們幫助。javascript

1. JSFIDDLE
JSFIDDLE是一個超棒的在線JS/CSS/HTML調試和分享工具，你們能夠方便的在web頁面中分享代碼，或者調試代碼。而且有效的和同事或者朋友分享。css

2. JSBin
JSbin是另一個至關不錯的在線調試和分享網站，和JSFIDDLE很是相似，可是總體界面更偏重於編輯和調試。你擁有更大的編輯區域，並且擁有控制檯能夠查看錯誤。html

3. HTML/CSS/Javascript的在線開發工具 – Fiddle Salad
超棒的HTML/CSS/Javascript的在線開發工具，若是你使用過JSFIDDLE的話，相信你們會更喜歡這個功能強大的在線整合開發環境。前端

4. Tinkerbin
另一個在線調試和演示前端開發工具，和jsfiddle比較起來，TinkerBin界面功能比較簡答，可是界面佈局更加合理。使用jsfiddle的時候，總感受每個窗口的輸入都比較費勁，用戶不得不來回的拖拉窗口。而使用Tinkerbin，你能夠更加容易的切換多個窗口或者單一個窗口來瀏覽器CSS、HTML或者JS代碼。java

5. Browser Support
做爲一個前端開發者來講，處理不一樣瀏覽器的兼容性問題如同屢見不鮮，可是若是讓你說出不一樣瀏覽器的CSS兼容性區別，還真不太容易，這裏介紹的這個工具Browser Support，能夠很方便的告訴你不一樣瀏覽器下的CSS區別以及是否被支持。至關的方便！jquery

6. openwebicon
若是你厭倦了圖片生成的圖標的話，使用openwebicon是一個不錯選擇，你只須要添加class便可生成須要的圖標。git

7. gradient-scanner
這個工具超酷，可以幫助你將上傳圖片中的漸變特效生成CSS樣式，很是便捷和高效，也很是實用。github

8. Em Calculator
Em calculator是一個輕巧的JavaScript工具，可以幫助你建立靈活的CSS設計。它幫助你轉換像素到em單位。能夠幫助你有效的查看、比對像素和字體大小。web

9. CSS ARROW PLEASE!
一個在線的、簡單實用的生成氣泡式提示的web工具。瀏覽器

10. checkmycolours
一個幫助你檢查網站顏色對比度的工具，可以有效的幫助你設計搭配完美的顏色方案。

11. Screenqueri.es
若是你須要開發響應式佈局設計的網站的話，這個工具確定可以幫你大忙，它可以模擬不一樣設備的屏幕尺寸，而且幫助你佔線不一樣設計上的網站顯示效果，絕對是測試必備工具。

12. Dirty Markup
若是你須要一個幫助你規整書寫混亂的代碼的工具的話，我強烈推薦給你這個在線代碼美化工具。這個在線工具可以幫助你有效的處理HTML/HTML五、CSS和JavaScript代碼。

13. jQuery mobile原型設計開發工具 – codiqa
一個超棒的在線原型設計開發工具，這個在線設計工具可以幫助咱們快速的使用拖拽的方式來構建一個基於jQuery mobile的web應用程序。

14. Screenfly
Screenfly是一個免費測試工具，能夠用來測試不一樣客戶端下（不一樣顯示器或者移動設備）網站顯示情況的工具。它使用一個代理服務器來模擬設備，而且支持最流行的平板電腦或者移動設備。

15. Fixie
fixiejs是一個超實用的虛構內容生成腳本，若是你設計網站或者網頁，每每須要添加一些文字或者圖片內容來查看效果，這個腳本能夠有效的幫助你生成不一樣類型內容，讓你專一於設計自己！

16. SimpleCart
超酷的純JavaScript實現的購物車程序，可以頗有效的幫助你生成一個B2C購物車。簡單、實用、快捷！

17. Animate.css
animate.css 是一套超棒的CSS動畫腳本，能夠幫助你使用CSS實現各類類型的動畫，不一樣的淡入、淡出，或者旋轉、翻轉特效。絕對是幫助你快速生成特效的好工具，你能夠經過使用jQuery的addClass來給你的元素添加特效，方便實用，很是易於整合。相信你必定會喜歡的！

18. Redactor – HTML富編輯器
基於jQuery的一個超棒WYSIWYG編輯器。這個編輯器使用jQuery技術做爲框架開發完成，整合了不少炫酷的功能，好比，拖拽上傳文件、自動保存等，速度很快，而且體積很是小。

19. jqueryboilerplate
jQuery Boilerplate是一個不錯的jQuery插件開發工具，使用這個工具能夠幫助你快速的構建一個jQuery插件。