整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
家好，我是 Echa。
今天來分享 50 個超實用的 Chrome 瀏覽器擴展！
JSON Viewer Pro 用于可視化JSON文件。其核心功能包括：
輸入界面如下：
格式化之后：
JSONVue 是一個JSON數據查看器，主要用來格式化JSON數據：
Library Sniffer 是一款給開發者使用的工具，能夠探測當前網頁所使用的類庫、框架和服務器環境，為開發者提供了方便。
Wappalyzer 擴展可以用來識別網站背后的底層技術。通過此擴展，可以了解特定應用程序是否是用 React、Vue、Angular、PHP等編寫的。還可以訪問有關 Web 服務器、編程語言、框架、內容管理系統、分析的信息工具、數據庫等。
WhatRuns 擴展程序只需單擊一下即可找到任何網站上使用的技術。
使用PerfectPixel插件可以將設計圖加載至網頁中，與已成型的網頁進行重疊對比，以幫助開發和設計人員規范網頁像素精度。這是一款可以優化前端頁面顯示的Chrome插件。
可以使用此擴展程序快速清除緩存，無需任何確認對話框、彈出窗口等。可以在選項頁面上自定義要清除的數據和數量，包括：應用程序緩存、緩存、Cookie、下載、文件系統、表單數據、歷史記錄、索引數據庫、本地存儲、插件數據、密碼和 WebSQL。
VisBug 是一個使用 JavaScript 構建的開源網頁設計調試工具，它可以讓用戶使用點擊式和拖放式界面來查看網站的元素。
Debug CSS 是一個幫助調試CSS的插件。他可以顯示出頁面元素的輪播，按住Ctrl，并將鼠標懸浮在元素上，即可查看其信息：
CSS Viewer 是一款適用于 Web 開發人員的高效 Chrome 擴展。顧名思義，CSS 查看器可以顯示將鼠標懸停在任何網頁上的元素的 CSS 屬性。
EditThisCookie 是一個 cookie 管理器。可以添加，刪除，編輯，搜索，鎖定和屏蔽cookies。
React Developer Tools 是開源 JavaScript 庫 React 的 Chrome DevTools 擴展。它允許我們在 Chrome 開發者工具中檢查 React 組件層次結構。安裝此插件之后，將在 Chrome DevTools 中獲得兩個新選項卡："?? Components" 和 "?? Profiler"：
Vue.js devtools 是一款基于chrome瀏覽器的用于調試Vue.js應用程序的插件，可以使得開發人員大大提高調試效率。支持用戶對DOM結構數據結構進行解析和調試功能。
Augury 可以幫助開發人員在 Google Chrome 瀏覽器中調試和分析 Angular 應用程序。
Firebug Lite是火狐瀏覽器中著名的開發者工具firebug插件移植到Chrome中的插件，在Chrome中安裝了Firebug Lite插件以后，開發人員可以像在火狐瀏覽器中使用firebug一樣熟悉的方式來調試網頁內容，其包含了基本的HTML、CSS以及Javascript的調試功能，用于幫助網頁前端開發工程師快速地調試網頁，以便及時地找到網頁中的BUG并及時修復。
HTML Validator 在 Chrome 的開發者工具中添加了 HTML Validator。HTML 頁面的錯誤數通過瀏覽器狀態欄中的圖標顯示，詳細信息可以在瀏覽器的開發者工具中查看。
Web Developer 擴展為帶有各種 Web 開發工具的瀏覽器添加了一個工具欄按鈕。該擴展適用于 Chrome 和 Firefox，并且可以在這些瀏覽器支持的任何平臺上運行，包括 Windows、macOS 和 Linux。
Requestly 是一款Chrome和Firefox瀏覽器插件，提供URL轉發、修改HTTP請求和結果、插入腳本等功能。
Window Resizer 主要用來調整瀏覽器窗口的大小以模擬各種屏幕分辨率。
Responsive Viewer 是在一個視圖中顯示多個屏幕的 Chrome 擴展程序。該擴展將幫助前端開發人員在開發響應式網站/應用程序時測試多個屏幕。
此插件允許直接從瀏覽器發送跨域請求，而不會收到跨域錯誤。可以使用此插件覆蓋 Request Origin 標頭，并將 Access-Control-Allow-Origin 設置為 *.
ColorPick Eyedropper 是一個放大的吸管和顏色選擇器工具，可讓從網頁等中選擇顏色值。
CSS Peeper 用于檢查和復制元素樣式的優秀工具，使用 CSSPeeper 可以將鼠標懸停在網頁中的任何元素上，然后單擊鼠標即可復制元素的樣式。
24. Dimensions
Dimensions是一款能幫助使用者對網頁上各種元素屬性之間的距離進行測量的Chrome頁面元素測量插件，該插件在點擊啟動插件圖標后，可以對頁面中圖像、輸入字段、按鈕以及視頻等頁面元素之間上下左右的方位尺寸進行測量，同時還可以通過使用快捷鍵來快速啟用或關閉該插件的功能，簡單實用。
Site Palette 用于生成調色板。設計師和前端開發人員必備的工具。可以通過這款插件輕松獲取網站的配色方案。
ColorZilla 是一款功能強大地提取網頁色彩的工具；也是個快速的對顏色進行調節的Chrome插件，許多的用戶將這款軟件稱呼為顏色吸取插件，它提取的顏色是非常的多樣化，還可生產css顏色的代碼等。
當我們想查看網頁中文字的字體時，最常用的方法就是在控制臺查看文字的字體樣式。那還有沒有更簡單的方法呢？WhatFont 就是一個查看網頁字體的Chrome擴展。只需要的點擊擴展圖標，再點需要查看為文字即可：
Fonts Ninja 可以從任何網站識別字體、添加書簽、試用并購買它們。
使用 BrowserStack 快速啟動擴展在任何瀏覽器中啟動一個新的測試會話。最多可設置 12 個瀏覽器以實現快速訪問并最大限度地減少切換瀏覽器所花費的時間。
Toby 是一款 Chrome 新標簽頁工具，能夠將未讀的標簽頁分組顯示在新標簽頁中，這樣就能把所有未看完的標簽頁都關閉了。分組相當于多個 Chrome 窗口，將你的標簽頁都拖進 Toby 中，就不需要實時開著占地方了。
該擴展提供了每日熱門開發者新聞，不需要再浪費時間搜索高質量的文章了。
Momentum 擁有漂亮的新標簽頁面，每日更新精彩背景壁紙圖片，可設置每日新鮮事焦點以及跟蹤待辦事項，無廣告，無彈窗。
The Great Suspender 是一個輕量級的擴展用來減少 Chrome 的內存占用。如果同時打開許多選項卡，在可配置的時間之后未查看的選項卡將在后臺自動掛起，從而釋放該選項卡消耗的內存和 CPU。
Session Buddy是一個可以幫助用戶查看、新增、編輯當前網站Session狀態的Chrome插件。用戶可以利用該插件保存網站當前的狀態以便在關閉Chrome或關閉計算機后恢復，從而達到節省內存的作用。
Octotree 旨在讓 GitHub 體驗更好。通常，為了檢查 Github 中的子文件夾，需要手動單擊文件夾并導航。Octotree 擴展解決了這個問題。此擴展在項目的左側顯示存儲庫的目錄結構，這有助于更好地理解文件夾結構。
1_EKF88oqIyX6FzgueCKdtXg.gif
File Icons for GitHub and GitLab 可以將 GitHub 和 GitLab 上的原始文件圖標替換為特定文件類型的圖標。
ax DevTools 是一個快速、輕量級但功能強大的測試工具，由 Deque 開發的世界上最值得信賴的可訪問性測試引擎 axe-core 驅動。使用 ax DevTools 在網站開發過程中查找并修復更多可訪問性問題。
OctoLinker 可以將特定語言的語句（如 include、require 或 import）轉換為鏈接。當打開一個包含多個導入語句的文件并且想要快速打開它時，只需將鼠標懸停在鏈接的文件上并單擊即可打開。
此擴展可幫助 Web 開發人員分析網頁是否違反最佳實踐。
Check My Links 是一個鏈接檢查器，它可以抓取網頁并查找損壞的鏈接。
Checkbot 是用于驗證一組HTML頁面上的鏈接的工具。Checkbot可以檢查一個或多個服務器上的單個文檔或一組文檔。它會創建一個報告，該報告匯總了引起某種警告或錯誤的所有鏈接。
Google Page Speed Insighs 是一款旨在優化所有設備上的網頁、提高網頁加載速度的工具。
META SEO inspector是一款可以幫助用戶分析網頁的meta信息并得到SEO評估的谷歌瀏覽器插件。
Ghostery 是強大的隱私保護擴展程序。其主要有以下功能：
AdBlock 用來在YouTube、Facebook、Twitch和其他你喜愛的網站上攔截廣告和彈窗。
番茄工作法（Pomodoro?）時間管理助理。? 長短兩種休息時間 ? 帶有倒計時顯示的工具欄圖標 ? 追蹤Pomodoro歷史和統計訊息 ? 可配置的長休間隔 ? 可配置的定時器時長 ? 桌面與新標簽頁通知 ? 超過20種音效可選的聲音通知 ? 計時器秒針走動音效
Loom 可以用來快速錄制視頻，并且能夠將錄制的視頻上傳到指定的網頁中，Loom還支持在用戶點擊啟動插件時，立即捕捉屏幕圖像，同時開始視頻錄制操作，還可以將錄制好的視頻復制到粘貼板中存儲。
GoFullPage 是一款全屏截圖插件（整個網頁截圖），完整捕獲您當前頁面的屏幕，進行滾動截圖，而無需任何額外的權限。單擊擴展程序圖標，然后將其傳輸到屏幕快照的新標簽頁中，可以在其中將其下載為圖像或PDF，甚至只需拖動即可，保存到桌面。
BetterViewer 可以提供更好的圖像查看體驗，旨在替代基于 Chrome 瀏覽器中內置的圖像查看模式。使用時，只需在頁面右鍵點擊圖片，選擇“在新標簽頁中打開圖片”即可。
svg-grabber 是一個快速預覽并從網站獲取所有 svg 的工具。可以用來預覽、下載和復制網站中所有 SVG 圖標和插圖的代碼。
語言網站為了讓谷歌收錄，更好的服務某語言本地客戶搜索，可以有幾種方法讓谷歌收錄。這集中方法包括HTML、HTTP 標頭和站點地圖。
本文主要介紹用html標記的方式將網站內容加入谷歌搜索收錄。下面是谷歌的官方方法介紹。
HTML 標記
您可以通過在網頁標頭中添加 <link rel="alternate" hreflang="lang_code"... > 元素，將網頁的所有語言和區域變體告知 Google。如果您沒有站點地圖或無法為您的網站指定 HTTP 響應標頭，此方法非常有用。
對于網頁的每個變體，您都應在 <head> 元素中添加一組 <link> 元素，并使每個網頁變體（包括網頁自身）分別對應一個鏈接。網頁的每個版本中，這組鏈接都應是相同的。查看其他準則。
以下是每個 link 元素的語法：
<link rel="alternate" hreflang="lang_code" href="url_of_page" />
語法
lang_code 此網頁版本所針對的受支持的語言/區域代碼，或 x-default（以與該網頁上的 hreflang 標記未明確列出的任何語言匹配）。
url_of_page 此網頁的特定語言/區域版本對應的完全限定網址。
請將 <link> 標記放在 <head> 元素頂部附近。最起碼，<link> 標記必須位于格式正確的 <head> 部分內，或位于可能會導致 <head> 過早結束的任何項目（例如 <p> 或跟蹤像素）前面。如果不確定，請將所呈現的網頁中的代碼粘貼到 HTML 驗證工具中，確保相關鏈接位于 <head> 元素內。
示例
例如，Widgets, Inc 有一個面向美國、英國和德國境內用戶的網站。以下網址包含的內容大致相同，但具有區域性差異：
具有區域性差異的網址
http://en.example.com/page.html 通用英語版首頁，包含與從美國運至全球各地的運費相關的信息。
http://en-gb.example.com/page.html 英式英語版首頁，顯示以英鎊為單位的價格。
http://en-us.example.com/page.html 美式英語版首頁，顯示以美元為單位的價格。
http://de.example.com/page.html 德語首頁。
Example Domain 不針對任何語言或語言區域的默認頁；它具有選擇器，供用戶選擇自己的語言和區域。
請注意，Google 不會根據這些網址中針對特定語言的子網域（en、en-gb、en-us、de）確定網頁的目標受眾群體；您必須將網頁明確地關聯到對應的目標受眾群體。
您應將下面的 HTML 粘貼到上方列出的所有網頁的 <head> 部分中。這會將美式英語、英式英語、通用英語和德語用戶引導至對應的本地化網頁，并將所有其他用戶引導至通用首頁。Google 搜索會根據用戶的瀏覽器設置為他們返回適當的結果。
<head>
<title>Widgets, Inc</title>
<link rel="alternate" hreflang="en-gb"
href="http://en-gb.example.com/page.html" />
<link rel="alternate" hreflang="en-us"
href="http://en-us.example.com/page.html" />
<link rel="alternate" hreflang="en"
href="http://en.example.com/page.html" />
<link rel="alternate" hreflang="de"
href="http://de.example.com/page.html" />
<link rel="alternate" hreflang="x-default"
href="Example Domain" />
</head>
oogle HTML/CSS 規范
本文介紹了 Google 推薦的 HTML 和 CSS 編寫格式規范，以建立良好的個人編碼習慣。
通用樣式規范
省略圖片、樣式、腳本以及其他媒體文件 URL 的協議部分（http:,https:），除非文件在兩種協議下都不可用。這種方案稱為 protocol-relative URL，好處是無論你是使用 HTTPS 還是 HTTP 訪問頁面，瀏覽器都會以相同的協議請求頁面中的資源，同時可以節省一部分字節。
<!-- 不推薦 -->
<script src="https://www.google.com/js/gweb/analytics/autotrack.js"></script>
<!-- 推薦 -->
<script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script>
/* 不推薦 */
.example {
background: url("https://www.google.com/images/example");
}
/* 推薦 */
.example {
background: url("http://www.google.com/images/example");
}
通用格式規范
縮進
一次縮進2個空格，不要使用 tab 或者混合 tab 和空格的縮進。
<ul>
<li>Fantastic
<li>Great
</ul>
.example {
color: blue;
}
大小寫
以下都應該用小寫：HTML 元素名稱，屬性，屬性值（除非 text/CDATA），CSS 選擇器，屬性，屬性值。
<!-- 不推薦 --> <A HREF="/">Home</A> <!-- 推薦 --> <img src="google.png" alt="Google"> /* 不推薦 */ color: #E5E5E5; /* 推薦 */ color: #e5e5e5;
結尾空格
<!-- 不推薦 --> <p>What?_ <!-- 推薦 --> <p>Yes please.
通用元規范
編碼
在 HTML 中通過 <meta charset="utf-8"> 指定編碼方式，CSS 中不需要指定，因為默認是 UTF-8。
注釋
使用注釋來解釋代碼：包含的模塊，功能以及優點。
任務項
用 TODO 來標記待辦事項，而不是用一些其他的標記，像 @@。
<!-- TODO: remove optional tags --> <ul> <li>Apples</li> <li>Oranges</li> </ul>
HTML 風格規范
文檔類型
HTML 文檔應使用 HTML5 的文檔類型：<!DOCTYPE html>。
孤立標簽無需封閉自身，<br> 不要寫成 <br />。
HTML 正確性
盡可能使用正確的 HTML。
<!-- 不推薦 --> <title>Test</title> <article>This is only a test. <!-- 推薦 --> <!DOCTYPE html> <meta charset="utf-8"> <title>Test</title> <article>This is only a test.</article>
語義化
<!-- 不推薦 --> <div onclick="goToRecommendations();">All recommendations</div> <!-- 推薦 --> <a href="recommendations/">All recommendations</a>
多媒體元素降級
對于像圖片、視頻、canvas 動畫等多媒體元素，確保提供其他可訪問的內容。圖片可以使用替代文本（alt），視頻和音頻可以使用文字版本。
<!-- 不推薦 --> <img src="spreadsheet.png"> <!-- 推薦 --> <img src="spreadsheet.png" alt="Spreadsheet screenshot.">
關注分離
標記、樣式和腳本分離，確保相互耦合最小化。
實體引用
如果團隊中文件和編輯器使用同樣的編碼方式，就沒必要使用實體引用，如 —， ”，?，除了一些在 HTML 中有特殊含義的字符（如 < 和 &）以及不可見的字符（如空格）。
<!-- 不推薦 --> The currency symbol for the Euro is “&eur;”. <!-- 推薦 --> The currency symbol for the Euro is “€”.
type 屬性
在引用樣式表和腳本時，不要指定 type 屬性，除非不是 CSS 或 JavaScript。
因為 HTML5 中已經默認指定樣式變的 type 是 text/css，腳本的type 是 text/javascript。
<!-- 不推薦 --> <link rel="stylesheet" type="text/css"> <!-- 推薦 --> <link rel="stylesheet" > <!-- 不推薦 --> <script src="http://www.google.com/js/gweb/analytics/autotrack.js" type="text/javascript"></script> <!-- 推薦 --> <script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script>
HTML 格式規范
HTML 引號
屬性值用雙引號。
<!-- 不推薦 --> <a class='maia-button maia-button-secondary'>Sign in</a> <!-- 推薦 --> <a class="maia-button maia-button-secondary">Sign in</a>
CSS 風格規范
ID 和 Class 命名
使用有含義的 id 和 class 名稱。
/* 不推薦: 含義不明確 */
#yee-1901 {}
/* 不推薦: 按直覺來的 */
.button-green {}
.clear {}
/* 推薦: 指定含義 */
#gallery {}
#login {}
.video {}
/* 推薦: 通用 */
.aux {}
.alt {}
ID 和 Class 命名風格
id 和 class 應該盡量簡短，同時要容易理解。
/* 不推薦 */
#navigation {}
.atr {}
/* 推薦 */
#nav {}
.author {}
選擇器
除非需要，否則不要在 id 或 class 前加元素名。
/* 不推薦 */
ul#example {}
div.error {}
/* 推薦 */
#example {}
.error {}
屬性簡寫
盡量使用 CSS 中可以簡寫的屬性 (如 font)，可以提高編碼效率以及代碼可讀性。
/* 不推薦 */ border-top-style: none; font-family: palatino, georgia, serif; font-size: 100%; line-height: 1.6; padding-bottom: 2em; padding-left: 1em; padding-right: 1em; padding-top: 0; /* 推薦 */ border-top: 0; font: 100%/1.6 palatino, georgia, serif; padding: 0 1em 2em;
0 和單位
值為 0 時不用添加單位。
margin: 0; padding: 0;
開頭的 0
值在 -1 和 1 之間時，不需要加 0。
font-size: .8em;
16進制表示法
/* 不推薦 */ color: #eebbcc; /* 推薦 */ color: #ebc;
前綴
使用帶前綴的命名空間可以防止命名沖突，同時提高代碼可維護性。
.adw-help {} /* AdWords */
#maia-note {} /* Maia */
ID 和 Class 命名分隔符
選擇器中使用連字符可以提高可讀性。
/* 不推薦: “demo” 和 “image” 之間沒有分隔符 */
.demoimage {}
/* 不推薦: 使用下劃線 */
.error_status {}
/* 推薦 */
#video-id {}
.ads-sample {}
CSS 格式規范
書寫順序
按照屬性首字母順序書寫 CSS 易于閱讀和維護，排序時忽略帶有瀏覽器前綴的屬性。
background: fuchsia; border: 1px solid; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; color: black; text-align: center; text-indent: 2em;
塊級內容縮進
為了反映層級關系和提高可讀性，塊級內容都應縮進。
@media screen, projection {
html {
background: #fff;
color: #444;
}
}
聲明結束
每行 CSS 都應以分號結尾。
/* 不推薦 */
.test {
display: block;
height: 100px
}
/* 推薦 */
.test {
display: block;
height: 100px;
}
屬性名結尾
屬性名和值之間都應有一個空格。
/* 不推薦 */
h3 {
font-weight:bold;
}
/* 推薦 */
h3 {
font-weight: bold;
}
聲明樣式塊的分隔
在選擇器和 {} 之間用空格隔開。
/* Not recommended: missing space */
#video{
margin-top: 1em;
}
/* Not recommended: unnecessary line break */
#video
{
margin-top: 1em;
}
/* 推薦 */
#video {
margin-top: 1em;
}
選擇器分隔
每個選擇器都另起一行。
/* 不推薦 */
a:focus, a:active {
position: relative; top: 1px;
}
/* 推薦 */
h1,
h2,
h3 {
font-weight: normal;
line-height: 1.2;
}
規則分隔
規則之間都用空行隔開。
html {
background: #fff;
}
body {
margin: auto;
width: 50%;
}
CSS 引號
屬性選擇器和屬性值用單引號，URI 的值不需要引號。
/* 不推薦 */
@import url("http://www.google.com/css/maia.css");
html {
font-family: "open sans", arial, sans-serif;
}
/* 推薦 */
@import url(//www.google.com/css/maia.css);
html {
font-family: 'open sans', arial, sans-serif;
}
CSS 元規則
分段注釋
用注釋把 CSS 分成各個部分。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
