52個面向開發人員的頂級工具

正確開發的50種最佳工具清單

免費測試您的網站,完成Google和Moz審核

提供者

這裡提供了五十多種應用程序,Chrome擴展程序,網絡應用程序以及其他一些東西,希望它們可以在您編程的生活中派上用場。 發現新工具後,我們將更新此列表。

1.什麼

一個免費的瀏覽器擴展程序,使您僅需按一下按鈕即可識別網站上使用的技術。

鏈接到網站

替代文字

2。 Sizzy

開發人員專用的瀏覽器。 不再浪費時間並加快開發流程

鏈接到網站

替代文字

3.原木火箭

使用LogRocket,您可以重播網站上的用戶活動,更快地重現錯誤並解決問題。

鏈接到網站

替代文字

4.哨兵

Sentinel的應用程序監視平台可為任何開發人員提供幫助。 診斷,更正和優化代碼的性能。

鏈接到網站

替代文字

5.我可以使用嗎?

“我可以使用”提供更新的瀏覽器支持表,以支持台式機和移動Web瀏覽器中的前端Web技術。

鏈接到網站

替代文字

6.更漂亮

思想領袖,支持多種語言,與大多數編輯者集成,並且提供很少的選擇。

鏈接到網站

替代文字

7. CSS掃描

再見“檢查元素”-立即檢查懸停的任何元素的CSS,並一鍵複製所有規則。

鏈接到網站

替代文字

8.恐懼症

找出將npm計劃添加到計劃中的成本

鏈接到網站

替代文字

9.柏樹

對瀏覽器中完成的所有操作進行快速,輕鬆和可靠的測試。

鏈接到網站

替代文字

10.縮小

免費工具,用於最小化(解壓縮,取消阻塞)JavaScript,CSS,HTML,XML和JSON代碼,以使其可讀性和美觀性。

鏈接到網站

替代文字

11.正則表達式101

免費的基於PCRE的正則表達式調試器,具有實時說明,錯誤檢測和突出顯示功能。

鏈接到網站

替代文字

12。 清除緩存

一鍵清除緩存並瀏覽數據。

鏈接到網站

替代文字

13.窗口大小調整器

調整瀏覽器窗口的大小以模擬不同的屏幕分辨率。

鏈接到網站

替代文字

14。 Wappalyzer

Wappalyzer是一種實用程序,可揭示網站上使用的技術。 它可以識別內容管理系統,電子商務平台,Web框架,服務器軟件,分析工具等

鏈接到網站

替代文字

15. DND

MDN Web文檔網站包含有關開放式Web技術的信息,包括用於網站和漸進式Web應用程序的HTML,CSS和API。

鏈接到網站

替代文字

16.斧頭

可訪問性測試的標準。 Ax由Microsoft,Google,全球開發和測試團隊選擇,是全球領先的數字可訪問性工具包。

鏈接到網站

替代文字

17. Git圖

Visual Studio Code的Git Graph擴展。 從您的存儲庫中查看Git圖,並從圖中輕鬆執行Git操作。 可配置為看起來像您!

鏈接到網站

替代文字

18. Kontrast-WCAG對比度檢查器

在瀏覽器中實時檢查對比度,並使其適應WCAG 2.1的要求。

鏈接到網站

替代文字

19.八叉樹

瀏覽器擴展,可增強對GitHub代碼的審閱和探索。

鏈接到網站

替代文字

20.女郵差

郵遞員的網絡替代品-幫助您更快地創建需求並節省寶貴的開發時間

鏈接到網站

替代文字

21.響應式應用

開發響應式Web應用程序的速度提高了5倍! 所有前端開發人員必不可少的DevTool,使您的工作更加輕鬆。

鏈接到網站

替代文字

22. FullStory

讓我們易於使用的智能軟件確定用戶戰鬥何時,何地以及如何影響您的銷售和客戶忠誠度,從而提供卓越的體驗

鏈接到網站

替代文字

23. gitignore.io

為您的項目創建有用的Gitignore文件

鏈接到網站

替代文字

24. 1局

206在一行代碼中最喜歡的JavaScript實用程序! 不再!

鏈接到網站


25.它會變異嗎?

鏈接到網站

替代文字

26.密碼

按任意鍵獲取JavaScript事件鍵的代碼

鏈接到網站

替代文字

27.值得:現代JS版

該工具分析頁面以使用模塊/無模塊模型來確定現代瀏覽器中下載的JavaScript少了多少。

鏈接到網站

替代文字

28. npmview

用於查看npm軟件包文件的Web應用程序。

鏈接到網站

替代文字

29. CSS轉換為JS

在CSS對象,JS和JSX道具之間進行轉換。

鏈接到網站

替代文字

30.所有字符

一個簡單的頁面,顯示所有不同的字符及其HTML代碼。

鏈接到網站

替代文字

31.守望者

這是一個可用於查找Unicode字符的工具。 查找您不知道其名字的特定字符是一個問題。 在Shapecatcher.com上,您只需要知道角色的形狀即可!

鏈接到網站

替代文字

32.嘲笑

不要等待後端完成,使用Mocky生成自定義API響應並立即開始在您的應用程序上工作

鏈接到網站

替代文字

33.解釋殼

編寫命令行以顯示與每個參數匹配的幫助文本

鏈接到網站

替代文字

34. Base64映像

將圖像轉換為Base64

鏈接到網站

替代文字

35.打開圖檢查

在Facebook和其他社交網絡上共享內容時,點擊吸引力非常重要。 針對目標群體量身定制的優化概述可以大大提高點擊率。 Opengraphcheck.com幫助您做得更好。 最好的是,Open Graph Check是免費的!

鏈接到網站

替代文字

36. Brotli專業版

布羅特利。 下一級。 壓縮。 準備?

鏈接到網站

替代文字

37.響應斷點

只需生成響應圖像的最佳尺寸

鏈接到網站

替代文字

38.我的房東還快嗎?

實際用戶在瀏覽Web時遇到的實際服務器響應延遲(到第一個字節的時間)。

鏈接到網站

替代文字

39。 檢查我的鏈接

“檢查我的鏈接”是一個鏈接檢查器,可檢索您的網站並查找斷開的鏈接。

鏈接到網站

替代文字

40. JSON Web令牌

編碼或解碼JWT

鏈接到網站

替代文字

41.吉特·克拉肯

適用於Windows,Mac和Linux的傳奇Git客戶端。 免費開源

鏈接到網站

替代文字

42. BEM備忘單

當找到正確的類別名稱時,它會很快導致絕望。 即使是最有經驗的CSS開發人員,也無法總是立即找到正確的類名。 該工具旨在通過建議一些最常見的Web組件的名稱來幫助您避免在BEM宇宙中迷路。

鏈接到網站

替代文字

43.我可以發電子郵件嗎

鏈接到網站

替代文字

44。 CSS網格生成器

您可以為列和行設置數字和單位,然後我將為您創建一個CSS網格! 在框中拖動以創建放置在網格上的div。

鏈接到網站

替代文字

45.屏幕尺寸圖

與設備無關的像素屏幕尺寸的比較

鏈接到網站

替代文字

46.誰可以使用?

誰可以使用這種顏色組合?

鏈接到網站

替代文字

47.會不會發生CORS?

告訴此CORS魔術機您想要什麼,它將告訴您確切的操作。

鏈接到網站

替代文字

48. extractCSS

從HTML提取CSS

鏈接到網站

替代文字

49.元標記

中繼標記可讓您編輯和試驗您的內容,然後預覽您的網站在Google,Facebook,Twitter等上的外觀!

鏈接到網站

替代文字

50. Shieldfy

在代碼投入生產之前,自動識別並修復代碼中的安全問題和漏洞。

鏈接到網站

替代文字

51. YAML檢查器

YAML Checker是驗證YAML的快速簡便的方法。 鍵入時,將使用漂亮的語法突出顯示和錯誤信息來驗證YAML。

鏈接到網站

替代文字

52.多窗格

在一個獨立的瀏覽器中構建響應迅速,可訪問且快速的網站和應用程序所需的所有工具。

鏈接到網站

替代文字

改編和自由翻譯。

感謝https://dev.to/iainfreestone/50-developer-tools-to-make-your-life-a-little-easier-4oc5

本穆勒

作為內容策略師,他向公眾傳達了一致的品牌信息。 他的多種方法使他能夠整合營銷技巧,從而確定客戶的需求並提出最佳的產品和服務。