Web前端開發Chrome外掛

it智雲程式設計發表於2018-07-18
Web前端Chrome

越來越多的前端開發人員喜歡在Chrome裡開發除錯程式碼，Chrome有許多優秀的外掛可以幫助前端開發人員極大的提高工作效率。尤其Chrome本身是可以登入的，登入後你所有的外掛都會自動同步到每一個登入後的Chrome的，非常方便啊。

Postman – REST Client

Postman是Ajax開發的神器，對於Restful開發方式特別有幫助，可以用來模擬各種請求來測試API的正確性，比如用來模擬Ajax請求。它還支援認證，比如簡單的使用者名稱/密碼，或者Oauth1.0。Rest Console也是一個不錯的選擇。

Edit This Cookie

這是一個強大的cookie管理器。你可以新增、刪除、編輯、搜尋、保護和阻止cookies。Cookies也是一個非常強大的Cookie工具。

Web Developer

安裝Web Developer擴充套件後，會在瀏覽器的工具欄中新增一個按鈕，點選該按鈕，會彈出各種Web開發工具。此擴充套件工具的作者同時也是非常流行的Firefox擴充套件Web Developer extension for Firefox的作者。。

JSON Lint

一個線上驗證和格式化JSON檔案的應用。

網頁截圖

擷取網頁為圖片，支援視窗截圖，區域截圖和整個網頁截圖三種方式。支援水平和垂直翻頁擷取超大網頁，新版引進自動截圖儲存功能。截圖後，可以利用圖片編輯工具編輯圖片，然後將編輯後的圖片儲存為PNG格式的圖片檔案，並且提供了高亮工具，塗改工具和文字新增工具。

YSlow

YSlow可以分析網頁，併為改善網頁效能提出修改建議，這些功能基於高效能網頁的規則集。YSlow可以根據預定義的三個規則集或使用者自定義規則集來對網頁進行分級。，PageSpeed Insights是谷歌開發的類似功能的外掛。

ColorZilla

可以從頁面上任何一點獲取顏色，維護獲取歷史等。

Measure It!

MeasureIt！ 給你測量一個網站中的任何元素的尺寸（畫素寬度和高度）。Page Ruler也是一個不錯的選擇。

JavaScript Errors Notifier

安裝該擴充套件後，會在Chrome位址列中以圖示形式提示JavaScript錯誤，因為Chrome預設只有開啟console才會顯示錯誤。

Window Resizer

此擴充套件可以調整瀏覽器視窗的大小，以適應各種螢幕解析度。這對於Web設計師和開發者非常有用，可以幫助他們在不同的螢幕解析度下測試網站佈局。

Firebug Lite

Firebug的精簡版允許您檢查的HTML，CSS和JavaScript程式碼，生活在任何頁面。 你也可以編輯程式碼，立即測試新的變化。 這是一個開發者最喜歡的Firefox擴充套件Firebug的精簡版。

JQuery 擴充套件

jQuery擴充套件讓你在當前網頁中執行JavaScript和jQuery命令。

Pretty Beautiful Javascript

該擴充套件可以使Javascript檔案更容易閱讀。其整合了Beautifier和Prettify的功能，可以為程式碼新增語法高亮。用法是在新視窗裡輸入js檔案的URL或者在檢視HMTL原始碼時點選js檔案的連結。如果是在Chrome的控制檯裡的資源選項裡檢視程式碼則推薦使用Chrome自帶的”pretty print”功能，也就是點選”{ }”圖示。

WhatFont

用於檢視當前頁面使用了哪些字型，Firebug和Webkit Inspector也可以檢視字型，但是遠沒有WebFont方便，WebFont可以通過把滑鼠懸停在元素上來檢視字型。同時還支援檢視網路字型，如Typekit和Google Font API。

IE Tab

在Chrome中開啟IE瀏覽器標籤頁，你可以開啟一個標籤來執行Internet Explorer，讓你看到的網頁在IE瀏覽器看起來如何。

感謝閱讀

喜歡看小編文章的點個訂閱或者喜歡！小編每天都會跟大家分享文章，也會給大家提供web前端學習資料。


相關文章