作為Web開發(fā)人員井厌，我們在一個(gè)節(jié)奏非车咄ǎ快的行業(yè)中工作址晕，并且始終掌握最新信息有時(shí)是一個(gè)挑戰(zhàn)。這就是為什么我相信我們應(yīng)該充分利用我們所擁有的一切工具來幫助我們保持頭腦清醒顿锰。今天谨垃，將介紹十個(gè)Chrome擴(kuò)展，它們旨在優(yōu)化您的Web開發(fā)工作流硼控，希望能讓您的工作效率提高一點(diǎn)刘陶。
什么是Chrome擴(kuò)展程序？
可以在Chrome的開發(fā)人員門戶網(wǎng)站上閱讀牢撼，擴(kuò)展是一些小軟件程序匙隔，可以定制你的瀏覽體驗(yàn)。這可以是任何東西熏版，從拼寫和語法檢查器纷责，檢查您的寫作鍵入，密碼管理器撼短，保存您最喜歡的網(wǎng)站登錄細(xì)節(jié)再膳。
Chrome可以使用數(shù)千種擴(kuò)展程序，所有這些擴(kuò)展程序都可以從Chrome網(wǎng)上應(yīng)用店免費(fèi)下載阔加。您可以訪問瀏覽器中的以下鏈接：chrome：// extensions /饵史，檢查您當(dāng)前安裝的擴(kuò)展程序满钟。
為何選擇Chrome胜榔？
本文關(guān)注的是Google Chrome瀏覽器，因?yàn)樗鼡碛芯薮蟮氖袌龇蓊~（目前占65%湃番，且還在增長）夭织。還有許多基于Chrome的瀏覽器支持?jǐn)U展。其中包括Brave吠撮、Vivaldi以及即將推出的Microsoft Edge尊惰。然而，我們應(yīng)該記住泥兰，Chrome并不是唯一的展會(huì)弄屡，這里提到的許多擴(kuò)展都有Firefox或Opera版本。
最后鞋诗，在深入討論擴(kuò)展之前膀捷，花一分鐘的時(shí)間記住chrome是Google發(fā)布的專有軟件。我們都知道削彬，使用谷歌產(chǎn)品會(huì)帶來隱私問題全庸，所以不妨去GitHub看看ungoogle -chromium項(xiàng)目秀仲。顧名思義，這是 Google Chromium壶笼，沒有與谷歌整合神僵。
1. Web開發(fā)人員
我們將從Swiss army knife擴(kuò)展開始。擁有超過100萬的用戶和4.5星的Chrome網(wǎng)絡(luò)商店評(píng)級(jí)覆劈，Web Developer是必備的保礼。它在Chrome瀏覽器上添加了一個(gè)工具欄按鈕，點(diǎn)擊這個(gè)按鈕责语，就會(huì)顯示出可以在任何網(wǎng)頁上使用的大量工具氓英。它們按類別(CSS、表單鹦筹、圖像等)進(jìn)行分組铝阐，允許您禁用JavaScript、列出缺少alt屬性的圖像铐拐、調(diào)整瀏覽器窗口大小徘键、驗(yàn)證頁面的HTML、查看頁面的元標(biāo)記信息等等遍蟋。
你可以在這里下載吹害。
2.您的框架的開發(fā)人員工具
如果您正在使用JavaScript框架開發(fā)應(yīng)用程序并且您沒有使用該框架的開發(fā)人員工具，那么您可能做錯(cuò)了虚青。讓我以Vue為例進(jìn)行解釋它呀。
如果您有一個(gè)需要調(diào)試的Vue應(yīng)用程序，或者您只是想看看幕后發(fā)生了什么棒厘，那么您做什么纵穿？檢查頁面的源代碼將顯示Vue正在呈現(xiàn)的HTML，但Vue應(yīng)用程序還有更多內(nèi)容奢人。組件的道具谓媒，數(shù)據(jù)或計(jì)算屬性怎么樣？或者你的應(yīng)用程序的狀態(tài)或路由何乎？你如何檢查這些句惯？
好消息是Vue.js開發(fā)工具可以滿足您的需求。只需安裝擴(kuò)展程序并在運(yùn)行Vue開發(fā)版本的頁面上打開它支救，即可確切了解應(yīng)用程序中發(fā)生的情況抢野。
以下是為三大框架下載開發(fā)工具的鏈接。
●Vue
3. Daily 2.0 – Source for Busy Developer
由于我們工作在一個(gè)快節(jié)奏的行業(yè)各墨，跟上新聞和時(shí)事有時(shí)可能是一個(gè)挑戰(zhàn)指孤。進(jìn)入Daily 2.0，這是一個(gè)擴(kuò)展欲主，它收集了互聯(lián)網(wǎng)上最新的web開發(fā)和技術(shù)文章邓厕，并以吸引人的masonie風(fēng)格顯示在新標(biāo)簽頁上逝嚎。
擴(kuò)展程序易于使用。當(dāng)您安裝它時(shí)详恼，系統(tǒng)會(huì)要求您從一系列您感興趣的類別中進(jìn)行選擇补君，而Daily 2.0會(huì)對其余類別進(jìn)行選擇。將鼠標(biāo)懸停在新標(biāo)簽頁的側(cè)欄上可以根據(jù)標(biāo)簽和來源過濾Feed昧互。
你可以在這里得到它挽铁。
4. Toggl Button：生產(chǎn)力和時(shí)間跟蹤器
如果你是一個(gè)忙碌的自由職業(yè)者，如果你是遠(yuǎn)程工作敞掘，或者你只是需要跟蹤你在項(xiàng)目上花費(fèi)的時(shí)間叽掘，那么Toggl就適合你。
此擴(kuò)展程序要求您在使用之前創(chuàng)建帳戶玖雁。登錄后更扁，可以使用Toggl帳戶中存儲(chǔ)的所有數(shù)據(jù)快速輕松地實(shí)時(shí)跟蹤生產(chǎn)力。它配備了內(nèi)置的番茄鐘計(jì)時(shí)器赫冬，以及一系列互聯(lián)網(wǎng)服務(wù)（如GitHub浓镜，Trello和Slack）的集成。我最喜歡的功能之一是它會(huì)在您閑置并且計(jì)時(shí)器正在運(yùn)行時(shí)彈出通知劲厌，允許您丟棄時(shí)間膛薛。
Toggl可以在這里下載。
5. Lighthouse
Lighthouse是一個(gè)開源的补鼻、自動(dòng)化的工具哄啄，用于提高web頁面的性能和質(zhì)量。您可以通過Chrome Web Store安裝它风范，或者從Chrome 60版本開始咨跌，您可以直接從瀏覽器的DevTools的audit選項(xiàng)卡運(yùn)行它(按F12并選擇audit)。
打開Lighthouse后乌企，單擊Generate report并選擇要包含哪些審計(jì)類別虑润。Lighthouse將對頁面運(yùn)行所選的審計(jì)成玫，并生成關(guān)于頁面執(zhí)行情況的報(bào)告加酵。從那里，您可以使用失敗的審計(jì)作為如何改進(jìn)頁面的指示器哭当。每個(gè)審計(jì)還包括進(jìn)一步閱讀和潛在修復(fù)的鏈接猪腕。
Lighthouse是由谷歌制作的，大概和他們的搜索引擎使用相同的排名因子钦勘。這意味著它可以為你提供一些關(guān)于如何優(yōu)化網(wǎng)站的最佳建議陋葡。
你可以在這里下載。
6. OneTab
所以情況就是這樣彻采。當(dāng)你突然遇到意外錯(cuò)誤時(shí)腐缤，你正在使用你的網(wǎng)絡(luò)應(yīng)用程序捌归。您需要花費(fèi)幾個(gè)小時(shí)來跟蹤修復(fù)，當(dāng)您完成修復(fù)時(shí)岭粤，您的瀏覽器中會(huì)打開一大堆標(biāo)簽惜索。將這些添加到您昨天正在處理的項(xiàng)目的選項(xiàng)卡中，以及所有那些尚未完全閱讀的文章剃浇，很快就會(huì)發(fā)現(xiàn)自己處于標(biāo)簽混亂狀態(tài)巾兆。
這是OneTab擴(kuò)展可以幫助您重新獲得理智的地方。每當(dāng)您發(fā)現(xiàn)自己有太多標(biāo)簽時(shí)虎囚，請單擊OneTab圖標(biāo)將所有標(biāo)簽轉(zhuǎn)換為列表角塑。當(dāng)您需要再次訪問選項(xiàng)卡時(shí)，可以單獨(dú)還原或一次性還原淘讥。如果使用得當(dāng)圃伶，這個(gè)擴(kuò)展可以提高生產(chǎn)力。
OneTab可以從這里下載蒲列。
7. CSS Peeper
CSS Peeper將自己稱為為設(shè)計(jì)師量身定制的CSS查看器留攒，它允許您提取CSS并構(gòu)建漂亮的樣式指南。它通過允許您檢查頁面上任何元素的CSS規(guī)則并以簡單但組織良好的方式呈現(xiàn)所有樣式信息來實(shí)現(xiàn)此目的嫉嘀。它還列出了頁面的所有顏色和圖像炼邀，可以將其復(fù)制到剪貼板，或者只需按一下按鈕即可導(dǎo)出剪侮。
此擴(kuò)展比瀏覽器的內(nèi)置Inspect Element功能更容易使用拭宁，唯一的缺點(diǎn)是您無法動(dòng)態(tài)更改元素的樣式壹粟。
你可以在這里找到CSS Peeper秀姐。
8. User CSS
此擴(kuò)展與CSS Peeper密切配合凤优，提供了一種快速簡便的方法來添加自定義CSS網(wǎng)頁树枫。安裝后堕绩，用戶CSS易于使用 - 您單擊擴(kuò)展圖標(biāo)并在側(cè)面面板中輸出您的樣式财松。
此擴(kuò)展的一個(gè)很好的功能是您的自定義CSS樣式是持久的堪伍。這意味著您還可以使用它永久隱藏您經(jīng)常訪問的網(wǎng)站上令人分心的功能靡砌，例如Twitter上的趨勢小部件驼仪。
您可以在此處下載User CSS掸犬。
9. Web Developer Checklist
一個(gè)新項(xiàng)目的實(shí)施在最好的時(shí)候可能會(huì)有壓力 - 有很多東西需要記住和協(xié)調(diào)。例如绪爸，您是否記得驗(yàn)證網(wǎng)站的HTML湾碎？你檢查了SEO嗎？可訪問性檢查怎么樣奠货？你是通過Google Page Speed運(yùn)行的嗎介褥？名單還在繼續(xù)。
這是Web Developer Checklist擴(kuò)展可以提供幫助的地方。它會(huì)分析違反最佳做法的網(wǎng)頁柔滔，并允許您在將其發(fā)送給客戶之前發(fā)現(xiàn)網(wǎng)站中的問題區(qū)域溢陪。該擴(kuò)展程序是優(yōu)秀的WebDevChecklist.com的伴侶。
Web Developer Checklist可以在這里下載睛廊。
10. Tampermonkey
用戶腳本是一些小型計(jì)算機(jī)程序嬉愧，允許您更改網(wǎng)頁的行為。這些可用于各種任務(wù)喉前，例如根據(jù)您的偏好調(diào)整網(wǎng)站布局没酣，為頁面添加額外功能或自動(dòng)執(zhí)行重復(fù)性任務(wù)。
Tampermonkey是一個(gè)用戶腳本管理器 - 一個(gè)擴(kuò)展卵迂，允許您管理和運(yùn)行用戶腳本裕便，以及創(chuàng)建自己的腳本。這是最后一項(xiàng)功能见咒，它已經(jīng)在列表中占據(jù)了一席之地偿衰，因?yàn)槟梢允褂肨ampermonkey來簡化您的Web開發(fā)工作流程。例如改览，我最近正在研究一個(gè)需要測試的大型表格下翎。我沒有每次手動(dòng)輸入值，而是編寫了一個(gè)Tampermonkey腳本來為我做這件事宝当，為我節(jié)省了無數(shù)的擊鍵次數(shù)视事。
Tampermonkey可以在這里下載。
結(jié)論
在這篇文章中庆揩，我們查看了十個(gè)我常用的Chrome擴(kuò)展程序俐东，以推動(dòng)您的Web開發(fā)工作流程。我希望這給了你一些靈感订晌，但請記住虏辫，這個(gè)清單并非詳盡無遺。
