前端開發者必備的12個工具

{"type":"doc","content":[{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"作爲前端開發者，這些工具必定讓你事半功倍。"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"前端 web 開發是一個令人興奮的領域，越來越多的需求，形成了一個高薪的職業。同時，Web 領域還有很多可靠的工作，使得 Web 開發者能夠更加高效的工作。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"下面是我在日常前端開發中經常用到的 12 個工具，分享給大家，希望能對大家有所幫助。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"譯者注：這些工具都是 Chrome 擴展（也適用於 Microsoft Edge、Opera 等 Chromium 內核的瀏覽器），標題後面的數字是下載量。"}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"1. Wappalyzer — 1,000,000+"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/wechat\/images\/ed\/ed49c9432fac32c6fcb94da61018780f.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這個"},{"type":"link","attrs":{"href":"https:\/\/chrome.google.com\/webstore\/detail\/wappalyzer\/gppongmhjkpfnbhagpmjfkannfbllamg","title":"xxx","type":null},"content":[{"type":"text","text":"工具"}]},{"type":"text","text":"可以讓你瞭解到某個網站是用什麼搭建的，即它的內容管理系統、電子商務平臺或營銷自動化工具。研究如何創建一個網站，這是一個很棒的工具。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"它還創建了使用某些技術的網站列表，這些技術可以幫助你瞭解如何構建客戶的網站。準備大型項目時，我無數次地使用這個工具。"}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"2. Window Resizer — 600,000+"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/wechat\/images\/cd\/cd6cb8e42384f684d1eb215837157c1f.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"響應式設計是現代網站最重要的特性之一。你需要測試你的網站是否可以在各種各樣類型的設備上查看。我使用"},{"type":"link","attrs":{"href":"https:\/\/chrome.google.com\/webstore\/detail\/window-resizer\/kkelicaakdanhinjdeammmilcgefonfh","title":"xxx","type":null},"content":[{"type":"text","text":" Window Resizer"}]},{"type":"text","text":" 來調整我的網頁瀏覽器窗口的大小，以模擬不同的屏幕分辨率。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"然後你可以看到你的佈局在特定分辨率下的外觀。你可以自定義分辨率、設置窗口寬度和高度、窗口位置等。"}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"3. Marmoset — 10,000+"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/wechat\/images\/4c\/4c2bca5e2067beaf3786f8a83dc0f449.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"程序員工作的一部分就是向客戶或上級展示他們的代碼，但是常規的屏幕截圖可能不那麼吸引眼球，所以你要讓它們變得生動起來。我用 "},{"type":"link","attrs":{"href":"https:\/\/chrome.google.com\/webstore\/detail\/marmoset\/npkfpddkpefnmkflhhligbkofhnafieb","title":"xxx","type":null},"content":[{"type":"text","text":"Marmoset "}]},{"type":"text","text":"爲我的代碼拍了一些很酷的快照，然後把這些快照放在我的幻燈片上，從而給人留下好印象。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"不用說，我的代碼幻燈片一點也不無聊。我開始修改模版和顏色主題，使我的演講更加令人難忘。"}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"4. Web Developer Checklist— 40,000+"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/wechat\/images\/33\/33dc6ee0b034169d05399d8cedf35b66.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"作爲一個前端開發者，很容易忘記需要做的每一件事。當你在截止時間前急着完成項目的時候，你可能跳過了關鍵的步驟。這就是 Toptal 的 "},{"type":"link","attrs":{"href":"https:\/\/chrome.google.com\/webstore\/detail\/web-developer-checklist\/iahamcpedabephpcgkeikbclmaljebjp","title":"xxx","type":null},"content":[{"type":"text","text":"Web Developer Checklist"}]},{"type":"text","text":"，它可以節省你的時間。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我使用 Web Developer Checklist 來確保我考慮到每個項目中的所有基本點。它提供了前端 web 開發中最重要步驟的清單。它還分析網頁中是否存在違反最佳實踐的情況，以便你可以修復這些問題。"}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"5. Code Cola: Source Code Viewer — 30,000+"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/wechat\/images\/4c\/4c125cd19617d5f8bf6b7fc0f65d64bd.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如果你使用 Chrome 並且想要在頁面上編輯 CSS，那麼可以使用審查元素特性（譯者注：Google Chrome 瀏覽器打開網頁後，點擊右鍵出現的菜單：Inspect\/ 審查），但是它可能太過於靈活。"},{"type":"link","attrs":{"href":"https:\/\/chrome.google.com\/webstore\/detail\/code-cola\/lomkpheldlbkkfiifcbfifipaofnmnkn","title":"xxx","type":null},"content":[{"type":"text","text":"Code Cola"}]},{"type":"text","text":" 是一個 Chrome 擴展，使用起來容易得多。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這是 Chrome 上最好的 CSS 編輯器，對初學者有特別友好的界面。我已經用了很多次，嘗試在我的網頁上編輯 CSS。"}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"6. CSSViewer — 100,000+"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/wechat\/images\/ec\/ec19457152d70d3973d3c37b2d46a2e0.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如果你只需要查看網頁上的 CSS 屬性，"},{"type":"link","attrs":{"href":"https:\/\/chrome.google.com\/webstore\/detail\/cssviewer\/ggfgijbpiheegefliciemofobhmofgce","title":"xxx","type":null},"content":[{"type":"text","text":"CSSViewer "}]},{"type":"text","text":"非常棒。只需單擊圖標並將光標懸停在要檢查的任何元素上，就可以看到它的 CSS 屬性。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我發現這比 Chrome 的 Inspect 元素更快更容易使用，因爲它有懸停特性。"}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"7. JSONView —1,000,000+"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/wechat\/images\/04\/040e3e1bee51b8af016a924541fcedc2.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"JSON 經常用於那些需要處理數據傳輸的網站，任何前端開發者都需要掌握並熟悉它。使用 JSON 時，通常需要查看和驗證頁面上的 JSON 文檔。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https:\/\/chrome.google.com\/webstore\/detail\/jsonview\/chklaanhfefbnpoihckbnefhakgolnmc","title":"xxx","type":null},"content":[{"type":"text","text":"JSONView"}]},{"type":"text","text":" 是一個簡單的工具。多年來，我學到了簡單至上，沒有比 JSONView 更簡單的了。"}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"8. Lighthouse — 600,000+"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/wechat\/images\/ed\/ed638a782722a79a8085d4d253cd7c0a.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"譯者注：Lighthouse 已經集成到了 Google Chrome（或 Microsoft Edge），無需單獨下載。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如今，自動化越來越成爲前端開發的必要條件。"},{"type":"link","attrs":{"href":"https:\/\/github.com\/GoogleChrome\/lighthouse","title":"xxx","type":null},"content":[{"type":"text","text":"Lighthouse "}]},{"type":"text","text":"是一個開源的自動化工具，用於提高網頁質量。你可以使用它來檢測頁面性能、可訪問性、搜索引擎優化 SEO 等等。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"現在，我不會在不使用 Lighthouse 的情況下進行前端項目的開發。它以各種方式幫助我改進網頁。"}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"9. Clear Cache — 800,000+"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"每當需要清除網頁瀏覽器上的緩存時，通常必須手動轉到“設置”頁。這是前端開發者經常做的一項任務，用於測試他們正在處理的網頁。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"用一個 Chrome 擴展來做這件事，更有效率。我一直在使用"},{"type":"link","attrs":{"href":"https:\/\/chrome.google.com\/webstore\/detail\/clear-cache\/cppjkneekbjaeellbfkmgnhonkkjfpdn","title":"xxx","type":null},"content":[{"type":"text","text":" Clear Cache "}]},{"type":"text","text":"擴展，只需單擊一下就可以完成，避免浪費寶貴的時間。"}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"10. Cookie Manager — 20,000+"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/wechat\/images\/7f\/7fa6bb378346dacba81694ff997d2928.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"擁有一個好的 cookie 管理器是前端開發的另一個關鍵的工具，尤其是當你的網站處理數據時。"},{"type":"link","attrs":{"href":"https:\/\/chrome.google.com\/webstore\/detail\/cookiemanager-cookie-edit\/hdhngoamekjhmnpenphenpaiindoinpo","title":"xxx","type":null},"content":[{"type":"text","text":"Cookie Manager"}]},{"type":"text","text":" 使這個過程更加簡單和高效。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"有很多 cookie 管理器，我發現這個 cookie 管理器適合我的工作流程。它不僅是爲前端開發者設計，也適合有隱私意識的 web 用戶。"}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"11. LiveReload: Preview Tool — 100,000+"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/wechat\/images\/ca\/ca72ddc5f43fc7ec988d5298e1f7467d.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"你可能想確切地知道你的網頁在背後做了什麼，比如它在使用時會改變什麼文件。"},{"type":"link","attrs":{"href":"https:\/\/chrome.google.com\/webstore\/detail\/livereload\/jnihajbhpnppcggbcgedagnkighmdlei","title":"xxx","type":null},"content":[{"type":"text","text":"LiveReload"}]},{"type":"text","text":" 是一個很好的預覽工具。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我用 LiveReload 查看我的網頁到底在做什麼。它讓我更好地瞭解我的網頁是如何工作的。如果出錯了，我能做些什麼。"}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"12. Postman — 3,000,000+"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/wechat\/images\/73\/732b523c99cd294a54ab619066eb141e.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"最後，我們來看看 API。如今，前端開發者必定要處理 API，以便將頁面與各種 web 服務集成在一起。整體上看，爲它編寫代碼並不是最簡單的事情，因此需要一個能夠讓你更有效的工具。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這是簡化 API 構建過程的一個很好的工具，它還簡化了團隊協作。我和我的團隊都不知道如何在不使用 "},{"type":"link","attrs":{"href":"https:\/\/chrome.google.com\/webstore\/detail\/postman\/fhbjgbiflinjbdggehcddcbncdddomop","title":"xxx","type":null},"content":[{"type":"text","text":"Postman"}]},{"type":"text","text":" 的情況下開發 API。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"譯者注：Postman 現在已經升級成非 Chrome 插件的獨立客戶端。"}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"結論"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"上面列出的工具是一些我用過的最好的工具。試一下吧，看你喜不喜歡。當我第一次組裝我的個人前端開發工具包時，就是這麼做的。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我從過去的經驗中學到，擁有最好的前端開發工具有助於提高效率，這肯定會爲你節省大量寶貴的時間，將使你在編碼和解決問題方面做得更好。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"原文地址："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https:\/\/medium.com\/javascript-in-plain-english\/11-front-end-developer-tools-i-cant-live-without-c3a62b5d0db2","title":"","type":null},"content":[{"type":"text","text":"https:\/\/medium.com\/javascript-in-plain-english\/11-front-end-developer-tools-i-cant-live-without-c3a62b5d0db2"}]}]}]}