轉(zhuǎn)載說(shuō)明：原創(chuàng)不易，未經(jīng)授權(quán)，謝絕任何形式的轉(zhuǎn)載

瀏覽器是開(kāi)發(fā)人員最強(qiáng)大的工具。 99% 的人不會(huì)在 100% 的時(shí)間里使用他們的瀏覽器。 這里有30個(gè)瀏覽器擴(kuò)展，如果能合理地充分利用它們sketch 圖標(biāo)庫(kù)插件，將大大提高你的開(kāi)發(fā)效率。 本文是其中的第二部分。

11.

它是一款面向微軟瀏覽器的開(kāi)源設(shè)計(jì)工具插件，主要面向網(wǎng)頁(yè)設(shè)計(jì)師和后端開(kāi)發(fā)人員，讓設(shè)計(jì)師可以更方便地在瀏覽器中編輯和調(diào)試網(wǎng)頁(yè)設(shè)計(jì)。

支持在任意狀態(tài)下通過(guò)點(diǎn)擊、拖動(dòng)、縮放等方式編輯設(shè)計(jì)網(wǎng)頁(yè)，如同在畫(huà)板上一樣。 通過(guò) ，用戶可以檢測(cè)樣式、間距、距離、可訪問(wèn)性和對(duì)齊方式等細(xì)節(jié)，并在任何設(shè)備規(guī)格下微調(diào)布局和內(nèi)容。 用戶可以在 Adob??e/etc 中使用他們的技能。 設(shè)計(jì)軟件在混亂的環(huán)境中進(jìn)行設(shè)計(jì)，將實(shí)際生產(chǎn)環(huán)境或原型作為藝術(shù)板和設(shè)計(jì)機(jī)會(huì)。

它還支持模擬延遲、國(guó)際化、媒體查詢、平臺(tái)限制、CPU、屏幕尺寸等激勵(lì)措施，讓用戶在后端做出更好的決策（如可訪問(wèn)性、響應(yīng)性、邊緣情況等）。 用戶可以直接編輯終端狀態(tài)的設(shè)計(jì)并執(zhí)行/測(cè)試自己的視圖，無(wú)需等待開(kāi)發(fā)者。

目標(biāo)是為設(shè)計(jì)師和內(nèi)容創(chuàng)作者帶來(lái)更多控制權(quán)。 通過(guò)將設(shè)計(jì)工具的交互和快捷鍵帶入瀏覽器，設(shè)計(jì)師可以更自由地發(fā)揮自己的創(chuàng)造力和想象力，從而提高網(wǎng)頁(yè)設(shè)計(jì)和開(kāi)發(fā)的效率和質(zhì)量。

12.

它是微軟的一個(gè)瀏覽器擴(kuò)展程序，主要用于檢測(cè)、編輯和導(dǎo)入用CSS和One制作的動(dòng)畫(huà)效果。

通過(guò)這個(gè)，用戶可以點(diǎn)擊錄制按鈕與頁(yè)面進(jìn)行交互，被測(cè)量的CSS和One動(dòng)畫(huà)將被繪制在經(jīng)典的時(shí)間軸界面上。 用戶可以使用播放控件從任何時(shí)間點(diǎn)開(kāi)始瀏覽和重播動(dòng)漫。

在編輯方面，用戶可以添加、移動(dòng)和刪除關(guān)鍵幀，使用自定義控件編輯值和緩動(dòng)，并實(shí)時(shí)反映在頁(yè)面上。

導(dǎo)入方面，用戶完成動(dòng)畫(huà)優(yōu)化后，點(diǎn)擊導(dǎo)入按鈕即可立即生成代碼。 用戶可以將任何動(dòng)畫(huà)導(dǎo)入為 CSS 過(guò)渡、CSS 動(dòng)畫(huà)或一個(gè)。

總的來(lái)說(shuō)，它為用戶提供了一個(gè)方便的工具，幫助他們?cè)跒g覽器中檢測(cè)、編輯和導(dǎo)入動(dòng)畫(huà)效果。 它提供了直觀的界面和強(qiáng)大的編輯功能，使動(dòng)畫(huà)效果的創(chuàng)建和修改更加容易和高效。

13.

是 瀏覽器擴(kuò)展，旨在快速檢測(cè)和調(diào)整文本和背景對(duì)比度以符合 Web 內(nèi)容可訪問(wèn)性指南 (WCAG)。

提供以下功能：

? 手動(dòng)檢測(cè)所選元素的對(duì)比度

? 顯示可訪問(wèn)性百分比

? 手動(dòng)獲取最接近的 WCAG 兼容顏色

? 顏色滑塊

?RGB 和 HSL 模式

? 顏色選擇器

? 輕松復(fù)制顏色（HEX、RGBA、HSLA）

? 忽略 CSS 懸停效果

? 深色模式

使用 可以幫助用戶快速檢測(cè)和調(diào)整頁(yè)面中的文字和背景對(duì)比度，以滿足 WCAG 要求，提高網(wǎng)站的可訪問(wèn)性。 通過(guò)手動(dòng)檢查對(duì)比度和顯示可訪問(wèn)性百分比，用戶可以快速確定頁(yè)面元素是否符合 WCAG 并在必要時(shí)進(jìn)行調(diào)整。 此外，它還提供了豐富的顏色工具，幫助用戶輕松選擇和編輯顏色。

14.

是一個(gè) 插件，可幫助開(kāi)發(fā)人員和標(biāo)記設(shè)計(jì)人員在 HTML 頂部疊加半透明圖像以進(jìn)行像素完美比較。

功能：

15. 網(wǎng)站

Site 是一個(gè)免費(fèi)的微軟瀏覽器擴(kuò)展，可以從任何網(wǎng)站中提取顏色，是設(shè)計(jì)師和后端開(kāi)發(fā)人員必備的工具。 它具有以下功能：

使用 Site，您可以輕松提取任何網(wǎng)站中使用的顏色并生成完整的調(diào)色板。 它還可以生成共享鏈接，以便您可以與您的團(tuán)隊(duì)或客戶共享調(diào)色板。 站點(diǎn)支持多個(gè)調(diào)色板生成器并支持 Adob??e。 您還可以在 .co 和藝術(shù)調(diào)色板上微調(diào)您的調(diào)色板。

16.

for 是微軟的一個(gè)插件，可以將 CSS 注入當(dāng)前頁(yè)面，以更好地查看頁(yè)面上各種元素的布局。

通過(guò)該插件，您可以快速查看頁(yè)面中各個(gè)元素的位置和大小，以便于更好的設(shè)計(jì)和開(kāi)發(fā)。 它可以幫助您在調(diào)試和故障排除時(shí)更有效地定位元素，并更好地了解網(wǎng)頁(yè)的結(jié)構(gòu)和布局。 它還可用于網(wǎng)站的可訪問(wèn)性測(cè)試，以確保各個(gè)元素的大小和位置符合適當(dāng)?shù)臉?biāo)準(zhǔn)和要求。

17.

這個(gè)插件叫做“”sketch 圖標(biāo)庫(kù)插件，主要功能是幫助開(kāi)發(fā)者測(cè)試不同屏幕規(guī)格下網(wǎng)頁(yè)的響應(yīng)式布局。

插件特點(diǎn)：

該插件對(duì)于開(kāi)發(fā)人員在進(jìn)行響應(yīng)式設(shè)計(jì)時(shí)進(jìn)行測(cè)試非常有幫助。 通過(guò)預(yù)覽不同規(guī)格下的網(wǎng)頁(yè)，開(kāi)發(fā)者可以保證網(wǎng)頁(yè)的布局在各種設(shè)備上都能很好的展示和使用，提高網(wǎng)站的可訪問(wèn)性和用戶體驗(yàn)。

18.

是一個(gè) 瀏覽器插件，提供多種功能，使 Web 開(kāi)發(fā)人員和設(shè)計(jì)人員的工作更加輕松。 以下是主要功能：

吸管工具 - 可以獲取網(wǎng)頁(yè)上任意像素的顏色。 - 類似的功能，可以抓取和調(diào)整任何顏色。 CSS - 可以生成 CSS 漸變代碼。 Web Color - 獲取任何網(wǎng)站的調(diào)色板。 調(diào)色板查看器 - 可以預(yù)覽 7 個(gè)預(yù)裝的調(diào)色板。 顏色歷史 - 記錄最近選擇的顏色。 元素信息展示——展示標(biāo)簽名稱、類、ID、尺寸等信息。 手動(dòng)將所選顏色復(fù)制到剪貼板。 支持鼠標(biāo)快捷鍵。 獲取動(dòng)態(tài)懸停元素的顏色。 單擊以開(kāi)始選擇顏色（僅）。 從 Flash 對(duì)象獲取顏色。 可以在任何縮放級(jí)別選擇顏色。

基本功能的顏色選擇需要訪問(wèn)所有站點(diǎn)上的數(shù)據(jù)。 但它不會(huì)收集用戶的任何數(shù)據(jù)或?yàn)g覽活動(dòng)，并特別注意用戶隱私。 如果用戶遇到問(wèn)題或者發(fā)現(xiàn)bug，可以直接聯(lián)系插件官方尋求幫助。

19. Lorem Ipsum

這是一款名為“”的微軟瀏覽器插件，可以快速生成默認(rèn)文本或文本。 默認(rèn)設(shè)置優(yōu)化了插件體驗(yàn)，但用戶也可以自定義設(shè)置以獲得更合適的文本。 每個(gè)句子都是隨機(jī)生成的，以模擬真實(shí)文本。

此插件的選項(xiàng)包括：

插件只需要獲取存儲(chǔ)權(quán)限，方便保存用戶偏好。 如果你需要快速獲取占位符文本或者文本，這個(gè)插件會(huì)是一個(gè)不錯(cuò)的選擇。

20.代碼

這是一個(gè)用于美化 CSS 和 JSON 代碼的微軟瀏覽器擴(kuò)展。 它可以在您打開(kāi) .css、.js 或 .json 文件時(shí)手動(dòng)（可選）美化源代碼。

該插件的功能包括：

支持CSS(Less/Scss/Sass)/(JSON/JSX/)低格式支持解包或反混淆支持60多種句型高亮主題使用()和()。

使用此插件，您可以在打開(kāi) CSS 或 JSON 文件時(shí)以越來(lái)越美觀和可讀的形式瀏覽源代碼。

總結(jié)

今天，微軟瀏覽器插件已經(jīng)成為每個(gè)網(wǎng)頁(yè)開(kāi)發(fā)者或設(shè)計(jì)者的必備神器之一。 上面提到的插件可以讓用戶輕松地進(jìn)行網(wǎng)頁(yè)測(cè)試、顏色選擇、默認(rèn)文本生成、代碼優(yōu)化等。 這種插件不僅可以提高工作效率，還可以讓用戶更專注于網(wǎng)頁(yè)的細(xì)節(jié)設(shè)計(jì)。 無(wú)論您是網(wǎng)頁(yè)開(kāi)發(fā)者還是網(wǎng)頁(yè)設(shè)計(jì)師，這款插件都將成為您不可或缺的好幫手。

明天的內(nèi)容就分享到這里，剩下的10篇我會(huì)在下一篇介紹，敬請(qǐng)期待。 如果喜歡我的分享，別忘了點(diǎn)贊轉(zhuǎn)發(fā)，讓更多人聽(tīng)到。 最后別忘了關(guān)注“前端專家”。 您的支持將是我分享最大的動(dòng)力，以后會(huì)繼續(xù)輸出更多內(nèi)容敬請(qǐng)期待。

如有侵權(quán)請(qǐng)聯(lián)系刪除！