圖片太多沒有上(shàng)傳，詳情請訪問 http://www.prchen.com/2019/06/04/超好用的(de)浏覽器插件-Web Developer/

概述

• Web Developer是(shì)一款Web開發人(rén)員必備的(de)浏覽器實用插件，它提供了(le／liǎo)多種模塊讓開發人(rén)員可以(yǐ)在(zài)工具欄中便捷地(dì / de)對網頁的(de)HTML、腳本、多媒體、CSS、緩存、圖象等網頁内容進行調試。Web Developer适用于(yú)Chrome，Firefox和(hé / huò)Opera浏覽器

安裝

1. 谷歌浏覽器插件商店中搜索"Web Developer"，或者直接點擊以(yǐ)下鏈接（需要(yào / yāo)kexueshangwang）：https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=zh-CN
2. 點擊添加至Chrome即可安裝
3. 安裝完成後右上(shàng)角插件欄會多出(chū)一個(gè)齒輪圖标，點擊即用

常用模塊及功能介紹

由于(yú)Web Development功能強大(dà)且豐富，筆者隻列出(chū)其中相對較常用的(de)模塊及功能。

Disable

• Disable JavaScript：禁用JS腳本
• Disable Popups：禁用彈出(chū)窗口
• Reset Disable Features：重置所有禁用選項

Cookies

• Disable Cookies：禁用Cookies

• Add Cookie…：添加Cookie，需要(yào / yāo)填寫以(yǐ)下字段信息：

• Delete Domain Cookies：删除當前域Cookie

• Delete Session Cookies：删除Session域中所有Cookie

• View Cookie Information：在(zài)新窗口打開當前頁面的(de)所有Cookie信息，可以(yǐ)對Cookie進行編輯、删除等操作

CSS

• Disable All Styles：禁用所有CSS樣式
• View CSS：在(zài)新窗口查看網頁CSS
• Edit CSS：編輯當前網頁CSS文件，并即時(shí)生效

Forms

該模塊提供Form表單相關操作，例如：一鍵清空表單所有字段，改變表單提交方式post/get相互轉化，顯示密碼，顯示表單元素的(de)屬性值，表單詳細信息等等衆多快捷易用的(de)表單操作，在(zài)此不(bù)再贅述，如需要(yào / yāo)讀者可以(yǐ)親自試用。

• Clear Form Fields：一鍵清空表單所有字段
• Convert Form GETs To POSTs/POSTs To GETs：表單提交方式post轉化爲(wéi / wèi)get/get轉化爲(wéi / wèi)post
• Display Passwords：顯示密碼
• Display Form Details：很實用的(de)功能，打開後直接在(zài)網頁中顯示所有表單元素的(de)詳細屬性值
• View Form Information：在(zài)新窗口中浏覽表單詳細信息

Images

圖片相關操作

• Disable Images：禁用所有圖片
• Disable Alt Attributes：禁用圖片的(de)alt屬性
• Outline All Images：标識出(chū)當前頁所有圖片
• View Image Information：在(zài)新窗口中顯示當前頁面所有圖片信息，如：src, width, height, alt屬性

Infomation

• Display Link Detalis：直接在(zài)網頁中顯示href屬性值
• Display Element Information：選擇後變爲(wéi / wèi)十字光标，可以(yǐ)選擇當前網頁中任意元素并在(zài)網頁底部顯示詳細屬性
• Find Duplicate Ids：找出(chū)所有重複id
• View Color information：顯示網頁中所有顔色詳細信息
• View JavaScript：顯示網頁JS源代碼
• View Response Headers：顯示網頁響應頭信息

Micellaneous

各種實用功能模塊，個(gè)人(rén)認爲(wéi / wèi)此部分功能比較實用

• Clear Cache：前端調試時(shí)最常用的(de)功能之(zhī)一，清理緩存的(de)快捷方式
• Clear History：快速清理曆史記錄
• Display Color Picker：即點即用的(de)取色器
• Display Hidden Elements：顯示隐藏元素
• Display Ruler：顯示标尺 再也(yě)不(bù)用拿尺子(zǐ)量屏幕了(le／liǎo)
• Mark All Links Unvisited/Visited：将所有鏈接标記爲(wéi / wèi)已訪問/未訪問的(de)

Outline

• Outline Absolute Positioned Elements：标識出(chū)絕對定位（position: absolute）的(de)元素
• Outline Block Level Elements：标識塊級元素
• Outline Deprecated Elements：标識過時(shí)元素
• Outline Fixed Positioned Elements：标識固定（position: fixed）的(de)元素
• Outline Floated Elements：标識懸浮元素
• Outline Tables：标識表格

Reisize

調節窗口大(dà)小，包括可以(yǐ)預覽網頁在(zài)各種設備上(shàng)的(de)響應式效果

Tools

CSS, HTML, 鏈接等各種校驗器以(yǐ)及查看網頁源代碼