建站
咨詢
售后
建站咨詢
新聞中心
| “進步不是勤奮者的功勞。它是懶惰者在嘗試尋找更簡單的方法時取得的成果。”
——羅伯特·海因萊因 |
CSSViewer
這款工具用來識別和顯示元素的 CSS 屬性是非常方便的。它包含一個浮動面板，你可以將其懸停以檢查頁面上的元素。CSSViewer 將你選擇的 CSS 顯示在一個提示框中，使你可以輕松地復(fù)制所選的 CSS。
它比我們?yōu)g覽器中的內(nèi)置版本先進得多，后者只能顯示其下方元素的寬度和高度。
https://chrome.google.com/webstore/detail/cssviewer/ggfgijbpiheegefliciemofobhmofgce?hl=en
Angury
這是我的最愛，也是我的 DevTool 擴展首選。
Augury 是由 Rangle.io 構(gòu)建的 DevTool 擴展，用于調(diào)試、分析和優(yōu)化 Angular 項目。
Augury 在 DevTools 中提供了豐富的 UI，你可以在其中：
- 查看組件的 DI 樹圖
- 編輯和更改組件中的屬性
- 發(fā)射事件
- 還有更多功能……
當(dāng)我想了解組件的變更檢測觸發(fā)器可以進入組件樹多深時，我覺得這款工具是很有用的。
如果你是 Angular 開發(fā)人員，并且沒有在 DevTools 中使用過 Augury，這次可不要錯過它了。當(dāng)你要直接從瀏覽器調(diào)試 Angular 應(yīng)用程序時，Angury 就是你需要的一切。
https://chrome.google.com/webstore/detail/augury/elgalmkoelokbchhkhacckoklkejnhcd?hl=en
React Developer Tools
可以將 React Developer Tools 視為“React 版的 Angury”。
這是 React 團隊開發(fā)的，很棒的開發(fā)工具。
就像 Augury 一樣，React Developer Tools 提供了一個內(nèi)容豐富的 UI，我們可以在其中監(jiān)控 React 組件中的事件流。你可以檢查 React 組件的 props 和狀態(tài)，隨意更改 props 和狀態(tài)，并查看在組件樹中是如何更改和傳播的。
我經(jīng)常使用的一項很酷的功能是高亮顯示重渲染的組件。
https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en
JSONView
瀏覽器通常不擅長顯示 JSON 數(shù)據(jù)。通常情況下，數(shù)據(jù)都會以黑白兩種顏色顯示，而且看起來十分密集，理解起來也很困難，尤其是在嘗試定位深層嵌套的屬性時會讓人感覺特別麻煩。
JSONView 能格式化并美化 JSON 數(shù)據(jù)。它以彩色樹狀視圖顯示它們，讓我們更容易識別屬性和值。
https://chrome.google.com/webstore/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobh
Library Sniffer
我經(jīng)常會在瀏覽一些網(wǎng)頁的時候想知道這個網(wǎng)頁是用哪個框架構(gòu)建的，以及它所使用的是哪些庫。
對于有和我一樣的需求的開發(fā)者，Library Sniffer 絕對是一個絕佳的選擇。這款工具將為你提供網(wǎng)頁上的詳細(xì)信息，Library Sniffer 會告訴你，你正在瀏覽的網(wǎng)頁到底是運行在哪個框架上，是 React、Angular、Vue、Svelte 還是 WordPress 等等。有的時候你肯定想知道這些，就像我一樣。
https://chrome.google.com/webstore/detail/library-sniffer/fhhdlnnepfjhlhilgmeepgkhjmhhhjkh?hl=en
Web Developer
這是一個工具包。Web Developer 在你的瀏覽器上添加一個工具欄。這個工具欄有許多方便的道具，程序員和設(shè)計人員都可以在日常工作中用到它們，從而簡化自己的工作。它的用途包括添加輪廓到元素、顯示標(biāo)尺、查找頁面上所有損壞的圖像、更改頁面的布局和處理圖像等。
它還將更多常用功能添加到了默認(rèn)的 DevTools 檢查器中。
https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm
LambdaTest
瀏覽器兼容性永遠(yuǎn)是 Web 開發(fā)的大坑之一。開發(fā)人員經(jīng)常要考慮如何在不同的瀏覽器上呈現(xiàn)自己的網(wǎng)站。
我們通常選擇的方法是在計算機上安裝不同的瀏覽器，以便我們可以啟動任何瀏覽器并在其上測試我們的網(wǎng)站。
這款擴展程序為你完成了所有工作。它讓你可以使用桌面和移動設(shè)備上的各種瀏覽器來截取網(wǎng)頁的屏幕快照，從而快速、果斷地解答兼容性問題。
https://chrome.google.com/webstore/detail/lambdatest-screenshots/fjcjehbiabkhkdbpkenkhaahhopildlh?ref=producthunt
ColorPick Eyedropper
ColorPick Eyedropper 有一個浮動面板，這個浮動面板懸停在網(wǎng)頁中的元素上方，以顯示元素的顏色。單擊該元素會將所選元素的顏色復(fù)制到剪貼板。這是快速發(fā)現(xiàn)、復(fù)制和粘貼顏色的好方法。
https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg?hl=en
CSSPeeper
另一個檢查和復(fù)制元素樣式的出色工具。
使用 CSSPeeper，你可以將鼠標(biāo)懸停在網(wǎng)頁上的任何元素上，然后單擊鼠標(biāo)即可復(fù)制元素的樣式。
如果你曾經(jīng)試過在 chromeinspector 工具中從一個元素復(fù)制 CSS 樣式代碼，就能輕松理解 CSSPeeper 所帶來的價值。
https://chrome.google.com/webstore/detail/css-peeper/mbnbehikldjhnfehhnaidhjhoofhpehk?hl=en
WhatFont
| “排版是基于經(jīng)驗和想象力的二維架構(gòu)?！? ——赫爾曼·薩普夫 |
在查看網(wǎng)頁時，經(jīng)常讓我眼前一亮的是網(wǎng)頁所使用的字體。如果我看上了某種字體，就會本能地單擊鼠標(biāo)右鍵來查看頁面源，進而檢查并揭示這一奇跡的源頭。但這套流程對于這么簡單而常見的東西來說有些過于復(fù)雜。
WhatFont 讓字體查看起來更加容易。你可以將鼠標(biāo)懸停在文本上以快速查閱其字體系列。
https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=en
附贈：
Bit除了上面的十個擴展程序外，Bit 也值得一提。Bit 不是 Chrome 擴展程序，但絕對是遵從“讓你的開發(fā)工作更輕松”這一精神的工具。
你可以使用 Bit 從任何代碼庫中“獲取”可重用組件，并將它們共享到 bit.dev 中的組件集合中。與你的團隊成員一起使用它，可以最大程度地(在存儲庫內(nèi)和在不同存儲庫之間)重用代碼，加快開發(fā)速度，并使代碼庫更易維護。
因此，無論你是要創(chuàng)建自己的可重用組件的私有集合，還是要查閱由開源社區(qū)構(gòu)建的無數(shù)組件列表，Bit 都是你的好伙伴：
https://github.com/teambit/bit
文章名稱：提升前端開發(fā)效率：你應(yīng)該知道的10個Chrome擴展程序
路徑分享：http://m.5511xx.com/article/djhegii.html
