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