掃二維碼與項目經(jīng)理溝通
我們在微信上24小時期待你的聲音
解答本文疑問/技術(shù)咨詢/運營咨詢/技術(shù)建議/互聯(lián)網(wǎng)交流
全球用戶數(shù):1,000,000+

創(chuàng)新互聯(lián)主要從事網(wǎng)站設計、網(wǎng)站建設、網(wǎng)頁設計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務。立足成都服務柳北,10余年網(wǎng)站建設經(jīng)驗,價格優(yōu)惠、服務專業(yè),歡迎來電咨詢建站服務:028-86922220
Wappalyzer可以幫助我們了解目標網(wǎng)站的構(gòu)建方式。工作當中存在大量此類情況,客戶需要我們參照某些網(wǎng)站來做開發(fā),作為一款建站前的研究工具,Wappalyzer可以在這方面有效的支持到我們,有助于幫我們了解目標網(wǎng)站具體有哪些技術(shù)應用。
尤其是在做大型項目開發(fā)前,這個工具可以給我們帶來很好啟發(fā)。
- 相關(guān)鏈接:
- https://chrome.google.com/webstore/detail/wappalyzer/gppongmhjkpfnbhagpmjfkannfbllamg
全球用戶數(shù):600,000+
在Web開發(fā)中,響應式網(wǎng)站設計已經(jīng)相當普遍。而在相關(guān)開發(fā)測試中,你大概率會在不同設備上查看正在構(gòu)建中的網(wǎng)頁效果、調(diào)整瀏覽器窗口的大小以及模擬不同的屏幕分辨率,那就用Window Resizer就好,它可以幫助我們查看網(wǎng)頁布局在特定分辨率下的外觀,自定義分辨率,設置窗口的寬度和高度和窗口位置等。
- 相關(guān)鏈接:
- https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh?hl=en
全球用戶數(shù):10,000+
我們?nèi)粘9ぷ髦邢蚩蛻艋蛏霞壵故敬a也是很常見的,常規(guī)的屏幕截圖可能并不太具有展示和“提案”性,有沒有考慮過讓代碼截圖更加生動有趣?
我使用Marmoset捕捉很酷的代碼快照,改變下視角和色彩主題,而后把置入到演示文稿或者線上,非常帥氣了呢~
- 相關(guān)鏈接:
- https://chrome.google.com/webstore/detail/marmoset/npkfpddkpefnmkflhhligbkofhnafieb
全球用戶數(shù):30,000+
如果你平時傾向于用Chrome,可能會在頁面上編寫CSS,當用到Inspect Element時,一定感覺相當麻煩。Code Cola是一個Chrome的擴展,是我所知道的最棒的Chrome CSS編輯器,尤其對于前端入門者來說,界面非常的友好和易用。
- 相關(guān)鏈接:
- https://chrome.google.com/webstore/detail/code-cola/lomkpheldlbkkfiifcbfifipaofnmnkn?hl=en
全球用戶數(shù):100,000+
如果你只需要查看網(wǎng)頁上的CSS屬性,那么CSSViewer就是不錯的選擇;只需單擊圖標,將鼠標指針懸停在我們要查看的任何元素上,即可看到其CSS屬性。
由于具有上面所說的懸停功能,因此個人感覺它與Chrome的Inspect Element相比,要更快捷,更易于使用。
- 相關(guān)鏈接:
- https://chrome.google.com/webstore/detail/cssviewer/ggfgijbpiheegefliciemofobhmofgce?hl=en
全球用戶數(shù):1,000,000+
當前端開發(fā)工作涉及到對數(shù)據(jù)傳輸?shù)奶幚頃r,JSON就會被用到,沒什么可說的,前端開發(fā)者必須了解有關(guān)JSON的原理,我們?nèi)粘5拇罅抗ぷ饕捕紩枰ゲ榭春万炞C網(wǎng)頁上的JSON文檔。
JSONView是幫助你執(zhí)行相關(guān)操作的一個簡單工具,這么多年了,它一直是我知道的同類工具中最好的。
- 相關(guān)鏈接:
- https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc?hl=en
全球用戶數(shù):600,000+
如今,自動化越來越成為前端發(fā)展的一個大趨勢,Lighthouse 正是一款開源的自動化工具,用于改進網(wǎng)絡應用的質(zhì)量;你可以借助這個工具來查看性能、訪問性、SEO情況等等。它將針對此頁面運行一連串的測試,然后生成一個有關(guān)頁面性能的報告。
Lighthouse絕對為我和我身邊的朋友提供了一種夢寐以求的網(wǎng)頁性能提升途徑,無法想象沒有它,我的日常工作會成什么樣子。
- 相關(guān)鏈接:
- https://developers.google.com/web/tools/lighthouse?hl=zh-cn
全球用戶數(shù):800,000+
每當需要清除Web瀏覽器上的緩存時,大多必須手動轉(zhuǎn)到設置頁面;前端開發(fā)人員往往被困在往返執(zhí)行這種低效工作的測試里。如果你擁有Clear Cache這個擴展工具,就可以提高效率,我一直在使用它,只需單擊即可完成操作,省下了大量寶貴時間。
- 相關(guān)鏈接:
- https://chrome.google.com/webstore/detail/clear-cache/cppjkneekbjaeellbfkmgnhonkkjfpdn?hl=en
全球用戶數(shù):20,000+
cookie管理器是前端開發(fā)的另一個關(guān)鍵“法寶“。市場上有很多cookie管理器,但我感覺這個Cookie Manager更適合我的工作流程,同時讓工作過程更加簡單高效。此外值得一提的是,它不僅為前端開發(fā)人員設計,而且還為注重隱私的Web用戶而設計。
- 相關(guān)鏈接:
- https://chrome.google.com/webstore/detail/cookiemanager-cookie-edit/hdhngoamekjhmnpenphenpaiindoinpo
全球用戶數(shù):100,000+
可以想象得到,我們有時很想確切地知道自己的網(wǎng)頁背后的一些運行情況,譬如:運行和使用中的哪些文件會被修改,這方面LiveReload能夠幫到我們;它是一個很好的預覽工具,讓我們了解網(wǎng)頁正在做什么,我們需要對網(wǎng)頁做什么調(diào)試,特別是幫我們知曉過往有哪些誤操作影響到了網(wǎng)頁的運行。
- 相關(guān)鏈接:
- https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei?hl=en
全球用戶數(shù):3,000,000+
最后,我們介紹API,其實這個貌似也沒什么好說的了,作為程序員你必須聽說過!
前端開發(fā)者在開發(fā)過程中必須處理API,才能將網(wǎng)頁與各種Web服務集成在一起。在全球范圍內(nèi)編寫代碼并不是最容易的事情,因此您需要一種可以更有效地執(zhí)行此操作的工具。
Postman名氣太大了,它是簡化API構(gòu)建過程的絕佳工具,并且還簡化了我們的聯(lián)調(diào)協(xié)作。我和自己的團隊完全不知道離開Postman的日子,該怎么過!
- 相關(guān)鏈接:
- https://chrome.google.com/webstore/detail/postman/fhbjgbiflinjbdggehcddcbncdddomop?hl=en

我們在微信上24小時期待你的聲音
解答本文疑問/技術(shù)咨詢/運營咨詢/技術(shù)建議/互聯(lián)網(wǎng)交流