網(wǎng)頁(yè)開(kāi)發(fā)行業(yè)節(jié)奏飛快，緊跟潮流並非易事。因此，充分利用現(xiàn)有工具至關(guān)重要。本文將介紹十款 Chrome 擴(kuò)展程序，旨在優(yōu)化您的 Web 開(kāi)發(fā)工作流程，提升效率。

核心要點(diǎn)：

• Chrome 擴(kuò)展程序是小型軟件，可增強(qiáng) Web 開(kāi)發(fā)人員的瀏覽體驗(yàn)和生產(chǎn)力。一些熱門(mén)選擇包括 Web Developer、您的框架開(kāi)發(fā)者工具、Daily 2.0、Toggl Button、Lighthouse、OneTab、CSS Peeper、User CSS、Web Developer Checklist 和 Tampermonkey。
• Web Developer 是必備擴(kuò)展程序，提供一系列網(wǎng)頁(yè)分析工具，包括禁用 JavaScript、圖像輪廓、瀏覽器窗口調(diào)整大小、HTML 驗(yàn)證和元標(biāo)記信息查看等。
• Daily 2.0 收集來(lái)自互聯(lián)網(wǎng)的最新 Web 開(kāi)發(fā)和技術(shù)文章，並以用戶友好的佈局顯示在新標(biāo)籤頁(yè)上，幫助開(kāi)發(fā)人員了解行業(yè)新聞。
• Tampermonkey 是一款用戶腳本管理器，允許開(kāi)發(fā)人員更改網(wǎng)頁(yè)行為，添加額外功能、自動(dòng)化重複性任務(wù)或根據(jù)個(gè)人喜好調(diào)整網(wǎng)站佈局。

什麼是 Chrome 擴(kuò)展程序？

如 Chrome 開(kāi)發(fā)者門(mén)戶網(wǎng)站所述，擴(kuò)展程序是小型軟件程序，可以自定義您的瀏覽體驗(yàn)。這可以是任何東西，從檢查您鍵入內(nèi)容的拼寫(xiě)和語(yǔ)法檢查器，到保存您最喜愛(ài)的網(wǎng)站登錄詳細(xì)信息的密碼管理器。

Chrome 提供數(shù)千個(gè)擴(kuò)展程序，所有這些擴(kuò)展程序都可從 Chrome 網(wǎng)上應(yīng)用店免費(fèi)下載。您可以訪問(wèn)瀏覽器中的以下鏈接來(lái)檢查當(dāng)前安裝的擴(kuò)展程序：chrome://extensions/。

為什麼選擇 Chrome？

本文重點(diǎn)介紹 Google Chrome 瀏覽器，因?yàn)樗鼡碛芯薮蟮氖袌?chǎng)份額（目前為 65%，並且還在增長(zhǎng)）。還有許多基於 Chrome 的瀏覽器支持?jǐn)U展程序。這些包括 Brave、Vivaldi 以及即將推出的 Microsoft Edge。但是，我們應(yīng)該記住，Chrome 並非唯一的選擇，此處提到的許多擴(kuò)展程序都有 Firefox 和/或 Opera 等效程序。

最後，在我們深入研究擴(kuò)展程序之前，請(qǐng)花一點(diǎn)時(shí)間記住 Chrome 是 Google 發(fā)布的專有軟件。眾所周知，使用 Google 產(chǎn)品存在隱私問(wèn)題，因此您也許可以訪問(wèn) GitHub 並查看 ungoogled-chromium 項(xiàng)目。顧名思義，這是 Google Chromium，不包含與 Google 的集成。

1. Web Developer

我們將從擴(kuò)展程序的瑞士軍刀開(kāi)始。 Web Developer 在 Chrome 網(wǎng)上應(yīng)用店擁有超過(guò) 100 萬(wàn)用戶和 4.5 星評(píng)級(jí)，堪稱必備之選。它向 Chrome 添加了一個(gè)工具欄按鈕，單擊該按鈕即可顯示可用於任何網(wǎng)頁(yè)的大量工具。這些工具按類別（CSS、表單、圖像等）分組，允許您執(zhí)行諸如禁用 JavaScript、用缺少 alt 屬性的圖像輪廓、調(diào)整瀏覽器窗口大小、驗(yàn)證頁(yè)面的 HTML、查看頁(yè)面的元標(biāo)記信息等等操作。

您可以從此處下載它。

2. 您的框架開(kāi)發(fā)者工具

如果您使用 JavaScript 框架開(kāi)發(fā)應(yīng)用程序，而沒(méi)有使用該框架的開(kāi)發(fā)者工具，那麼您可能做錯(cuò)了。讓我以 Vue 為例進(jìn)行解釋。

如果您需要調(diào)試 Vue 應(yīng)用程序，或者只想了解幕後情況，那麼您該怎麼做？檢查頁(yè)面的源代碼將顯示 Vue 正在呈現(xiàn)的 HTML，但 Vue 應(yīng)用程序遠(yuǎn)不止於此。組件的 props、數(shù)據(jù)或計(jì)算屬性呢？或者您的應(yīng)用程序的狀態(tài)或路由呢？您如何檢查這些內(nèi)容？

好消息是 Vue.js 開(kāi)發(fā)者工具可以滿足您的需求。只需安裝擴(kuò)展程序並在運(yùn)行 Vue 開(kāi)發(fā)版本的頁(yè)面上打開(kāi)它，即可準(zhǔn)確查看應(yīng)用程序中發(fā)生的情況。

以下是下載三大框架開(kāi)發(fā)者工具的鏈接：

• Vue
• React
• Ember

3. Daily 2.0 – 忙碌開(kāi)發(fā)人員的資源

由於我們工作在快節(jié)奏的行業(yè)中，跟上新聞和動(dòng)態(tài)有時(shí)可能是一項(xiàng)挑戰(zhàn)。 Daily 2.0 應(yīng)運(yùn)而生，這是一個(gè)擴(kuò)展程序，它從互聯(lián)網(wǎng)上收集最新的 Web 開(kāi)發(fā)和技術(shù)文章，並以具有吸引力的砌體式佈局顯示在新標(biāo)籤頁(yè)上。

該擴(kuò)展程序易於使用。安裝它時(shí)，系統(tǒng)會(huì)要求您從一堆您感興趣的類別中進(jìn)行選擇，Daily 2.0 會(huì)完成其餘工作。將鼠標(biāo)懸停在新標(biāo)籤頁(yè)上的側(cè)邊欄上，可以根據(jù)標(biāo)籤和來(lái)源過(guò)濾您的 Feed。

您可以從此處獲取它。

4. Toggl Button：生產(chǎn)力和時(shí)間跟蹤器

如果您是一位忙碌的自由職業(yè)者，如果您遠(yuǎn)程工作，或者您只需要跟蹤您在項(xiàng)目上花費(fèi)的時(shí)間，那麼 Toggl 正適合您。

此擴(kuò)展程序要求您在使用之前創(chuàng)建一個(gè)帳戶。登錄後，它可以快速輕鬆地進(jìn)行實(shí)時(shí)生產(chǎn)力跟蹤，所有數(shù)據(jù)都存儲(chǔ)在您的 Toggl 帳戶中。它帶有一個(gè)內(nèi)置的 Pomodoro 計(jì)時(shí)器，以及許多互聯(lián)網(wǎng)服務(wù)的集成（例如 GitHub、Trello 和 Slack）。我最喜歡的功能之一是，當(dāng)您處?kù)犊臻f狀態(tài)並且計(jì)時(shí)器正在運(yùn)行時(shí)，它會(huì)彈出通知，允許您丟棄時(shí)間。

Toggl 可從此處下載。

5. Lighthouse

Lighthouse 是一款開(kāi)源自動(dòng)化工具，用於改進(jìn)網(wǎng)頁(yè)的性能和質(zhì)量。您可以通過(guò) Chrome 網(wǎng)上應(yīng)用店安裝它，或者從 Chrome 60 版開(kāi)始，可以直接從瀏覽器的 DevTools 的“審核”選項(xiàng)卡運(yùn)行它（按 F12 並選擇“審核”）。

打開(kāi) Lighthouse 後，單擊“生成報(bào)告”，並可選擇選擇要包含的審核類別。 Lighthouse 將針對(duì)頁(yè)面運(yùn)行選定的審核，並生成有關(guān)頁(yè)面執(zhí)行情況的報(bào)告。您可以使用失敗的審核作為改進(jìn)頁(yè)面的指標(biāo)。每個(gè)審核還包含指向進(jìn)一步閱讀和潛在修復(fù)的鏈接。

Lighthouse 由 Google 製作，大概使用與他們的搜索引擎相同的排名因素。這意味著它可以為您提供一些關(guān)於如何優(yōu)化您的網(wǎng)站的最佳建議。

您可以從此處獲取它。

6. OneTab

情況是這樣的。您正在處理您的 Web 應(yīng)用程序，突然遇到一個(gè)意外的錯(cuò)誤。您花幾個(gè)小時(shí)跟蹤修復(fù)程序，當(dāng)您完成時(shí)，您的瀏覽器中打開(kāi)了很多標(biāo)籤頁(yè)。將這些添加到您昨天正在處理的項(xiàng)目的標(biāo)籤頁(yè)中，以及所有您還沒(méi)有時(shí)間閱讀的文章中，很快您就會(huì)發(fā)現(xiàn)自己陷入了標(biāo)籤混亂之中。

這就是 OneTab 擴(kuò)展程序可以幫助您恢復(fù)理智的地方。每當(dāng)您發(fā)現(xiàn)自己有太多標(biāo)籤頁(yè)時(shí)，單擊 OneTab 圖標(biāo)即可將所有標(biāo)籤頁(yè)轉(zhuǎn)換為列表。當(dāng)您需要再次訪問(wèn)標(biāo)籤頁(yè)時(shí)，您可以單獨(dú)或全部一次性恢復(fù)它們。如果使用得當(dāng)，此擴(kuò)展程序可以極大地提高您的工作效率。

OneTab 可從此處下載。

7. CSS Peeper

CSS Peeper 將自己定位為專為設(shè)計(jì)師設(shè)計(jì)的 CSS 查看器，允許您提取 CSS 並構(gòu)建精美的樣式指南。它允許您檢查頁(yè)面上任何元素的 CSS 規(guī)則，並以簡(jiǎn)單明了的方式呈現(xiàn)所有樣式信息。它還列出了頁(yè)面的所有顏色和圖像，這些顏色和圖像可以復(fù)製到剪貼板，或者只需點(diǎn)擊一下按鈕即可導(dǎo)出。

此擴(kuò)展程序比瀏覽器的內(nèi)置“檢查元素”功能更容易使用，唯一的缺點(diǎn)是您無(wú)法動(dòng)態(tài)更改元素的樣式。

您可以在此處找到 CSS Peeper。

8. User CSS

此擴(kuò)展程序與 CSS Peeper 配合使用，提供了一種快速簡(jiǎn)便的方法來(lái)向網(wǎng)頁(yè)添加自定義 CSS。安裝後，User CSS 易於使用 - 單擊擴(kuò)展程序圖標(biāo)並在滑出的側(cè)面板中輸入您的樣式。

此擴(kuò)展程序的一個(gè)不錯(cuò)的功能是它會(huì)保留您的自定義 CSS 樣式。這意味著您還可以使用它來(lái)永久隱藏您經(jīng)常訪問(wèn)的網(wǎng)站上的令人分心的功能，例如 Twitter 上的趨勢(shì)小部件。

您可以從此處下載 User CSS。

9. Web Developer Checklist

上線新項(xiàng)目在任何時(shí)候都可能充滿壓力 - 有很多事情需要記住和協(xié)調(diào)。例如，您是否記得驗(yàn)證網(wǎng)站的 HTML？您是否檢查了 SEO？輔助功能檢查呢？您是否通過(guò) Google Page Speed 運(yùn)行它？列表還在繼續(xù)。

這就是 Web Developer Checklist 擴(kuò)展程序可以提供幫助的地方。它會(huì)分析網(wǎng)頁(yè)中違反最佳實(shí)踐的情況，並允許您在將網(wǎng)頁(yè)交給客戶之前發(fā)現(xiàn)網(wǎng)站中的問(wèn)題區(qū)域。該擴(kuò)展程序是出色的 WebDevChecklist.com 的配套程序。

Web Developer Checklist 可從此處下載。

10. Tampermonkey

用戶腳本是小型計(jì)算機(jī)程序，允許您更改網(wǎng)頁(yè)的行為。這些可以用於各種任務(wù)，例如根據(jù)您的喜好調(diào)整網(wǎng)站佈局、向頁(yè)面添加額外功能或自動(dòng)化重複性任務(wù)。

Tampermonkey 是一款用戶腳本管理器 - 一個(gè)允許您管理和運(yùn)行用戶腳本以及創(chuàng)建您自己的用戶腳本的擴(kuò)展程序。正是最後一種功能使其在列表中佔(zhàn)據(jù)一席之地，因?yàn)槟梢杂行У厥褂?Tampermonkey 來(lái)簡(jiǎn)化您的 Web 開(kāi)發(fā)工作流程。例如，我最近正在處理一個(gè)需要測(cè)試的大型表單。我沒(méi)有每次都手動(dòng)輸入值，而是編寫(xiě)了一個(gè) Tampermonkey 腳本來(lái)為我執(zhí)行此操作，從而節(jié)省了無(wú)數(shù)次按鍵。

Tampermonkey 可在此處找到。

結(jié)論

在本文中，我們介紹了十個(gè)我最喜歡的 Chrome 擴(kuò)展程序，以提升您的 Web 開(kāi)發(fā)工作流程。我希望這能給您一些啟發(fā)，但請(qǐng)記住，此列表絕非詳盡無(wú)遺。

如果您錯(cuò)過(guò)了您最喜歡的擴(kuò)展程序，或者您有寶石要與其他讀者分享，我很樂(lè)意在下面的評(píng)論中收到您的來(lái)信。

感謝您的閱讀。

關(guān)於用於 Web 開(kāi)發(fā)工作流程的 Chrome 擴(kuò)展程序的常見(jiàn)問(wèn)題 (FAQ)

用於 Web 開(kāi)發(fā)工作流程的頂級(jí) Chrome 擴(kuò)展程序有哪些？

有幾個(gè) Chrome 擴(kuò)展程序可以顯著增強(qiáng)您的 Web 開(kāi)發(fā)工作流程。一些頂級(jí)擴(kuò)展程序包括 Web Developer、Window Resizer、ColorZilla、CSSViewer 和 JSONView。這些擴(kuò)展程序提供一系列功能，從檢查任何網(wǎng)頁(yè)上的 HTML 和 CSS 元素到調(diào)整瀏覽器窗口大小以模擬各種屏幕分辨率。

如何使用 Web Developer Chrome 擴(kuò)展程序來(lái)改進(jìn)我的工作流程？

Web Developer 擴(kuò)展程序向您的瀏覽器添加一個(gè)工具欄按鈕，其中包含各種 Web 開(kāi)發(fā)者工具。這可以幫助您快速訪問(wèn)諸如禁用 JavaScript、查看 CSS 和檢查元素等功能。它還可以幫助您驗(yàn)證代碼並檢查任何錯(cuò)誤或不一致之處，從而使您的 Web 開(kāi)發(fā)過(guò)程更高效。

Window Resizer 擴(kuò)展程序如何增強(qiáng) Web 開(kāi)發(fā)？

Window Resizer 允許您調(diào)整瀏覽器窗口大小以模擬各種屏幕分辨率。這對(duì)於響應(yīng)式設(shè)計(jì)測(cè)試特別有用，因?yàn)樗试S您查看您的網(wǎng)站或應(yīng)用程序在不同設(shè)備上的外觀。您可以從預(yù)設(shè)屏幕分辨率列表中進(jìn)行選擇，也可以創(chuàng)建您自己的自定義大小。

ColorZilla 如何幫助 Web 開(kāi)發(fā)？

ColorZilla 是 Web 開(kāi)發(fā)人員和圖形設(shè)計(jì)師的便捷工具。它包括吸管、顏色選擇器、漸變生成器和許多其他與顏色相關(guān)的工具。使用 ColorZilla，您可以從瀏覽器中的任何點(diǎn)獲取顏色讀數(shù)，并快速調(diào)整它或?qū)⑵湔迟N到另一個(gè)程序中。

CSSViewer 在 Web 開(kāi)發(fā)中的用途是什麼？

CSSViewer 是一個(gè)簡(jiǎn)單的 CSS 屬性查看器。它允許您將鼠標(biāo)懸停在網(wǎng)頁(yè)上的任何元素上並查看其 CSS 屬性。當(dāng)您試圖了解如何實(shí)現(xiàn)特定設(shè)計(jì)或調(diào)試您自己的 CSS 代碼時(shí)，這非常有用。

JSONView 如何改進(jìn) Web 開(kāi)發(fā)工作流程？

JSONView 是一個(gè) Chrome 擴(kuò)展程序，有助於在瀏覽器中查看 JSON 文檔。通常，JSON 文檔僅顯示為純文本。 JSONView 格式化並突出顯示這些文檔，使它們更容易閱讀。當(dāng)您使用 API 或任何其他 JSON 格式的數(shù)據(jù)時(shí)，這特別有用。

有哪些用於調(diào)試 JavaScript 的 Chrome 擴(kuò)展程序？

是的，有幾個(gè) Chrome 擴(kuò)展程序可用於調(diào)試 JavaScript。其中最受歡迎的是 JavaScript Errors Notifier。它通過(guò)工具欄欄中的圖標(biāo)或通知彈出窗口通知您 JavaScript 錯(cuò)誤。

如何使用 Chrome 擴(kuò)展程序來(lái)提高我的編碼效率？

Clear Cache 和 Session Buddy 等 Chrome 擴(kuò)展程序可以顯著提高您的編碼效率。 Clear Cache 允許您只需單擊一下即可清除緩存、Cookie 和其他瀏覽數(shù)據(jù)，而 Session Buddy 允許您管理瀏覽器會(huì)話，從而節(jié)省您的時(shí)間並幫助您保持井井有條。

有哪些用於 Web 設(shè)計(jì)的 Chrome 擴(kuò)展程序？

是的，有幾個(gè) Chrome 擴(kuò)展程序可用於 Web 設(shè)計(jì)。一些頂級(jí)擴(kuò)展程序包括 WhatFont，它允許您識(shí)別網(wǎng)頁(yè)上使用的字體，以及 Eye Dropper，它允許您從網(wǎng)頁(yè)中選擇顏色。

如何查找和安裝 Chrome 擴(kuò)展程序？

您可以從 Chrome 網(wǎng)上應(yīng)用店查找和安裝 Chrome 擴(kuò)展程序。只需搜索您想要的擴(kuò)展程序，然後單擊“添加到 Chrome”即可安裝它。您可能需要重新啟動(dòng)瀏覽器才能使擴(kuò)展程序生效。

以上是您的Web開(kāi)發(fā)工作流程的10個(gè)頂級(jí)鍍鉻擴(kuò)展名的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！