圖片太多沒有上傳，詳情請?jiān)L問 http://www.prchen.com/2019/06/04/超好用的瀏覽器插件-Web Developer/

概述

• Web Developer是一款Web開發(fā)人員必備的瀏覽器實(shí)用插件，它提供了多種模塊讓開發(fā)人員可以在工具欄中便捷地對網(wǎng)頁的HTML、腳本、多媒體、CSS、緩存、圖象等網(wǎng)頁內(nèi)容進(jìn)行調(diào)試。Web Developer適用于Chrome，Firefox和Opera瀏覽器

安裝

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

常用模塊及功能介紹

由于Web Development功能強(qiáng)大且豐富，筆者只列出其中相對較常用的模塊及功能。

Disable

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

Cookies

• Disable Cookies：禁用Cookies

• Add Cookie…：添加Cookie，需要填寫以下字段信息：

• Delete Domain Cookies：刪除當(dāng)前域Cookie

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

• View Cookie Information：在新窗口打開當(dāng)前頁面的所有Cookie信息，可以對Cookie進(jìn)行編輯、刪除等操作

CSS

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

Forms

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

• Clear Form Fields：一鍵清空表單所有字段
• Convert Form GETs To POSTs/POSTs To GETs：表單提交方式post轉(zhuǎn)化為get/get轉(zhuǎn)化為post
• Display Passwords：顯示密碼
• Display Form Details：很實(shí)用的功能，打開后直接在網(wǎng)頁中顯示所有表單元素的詳細(xì)屬性值
• View Form Information：在新窗口中瀏覽表單詳細(xì)信息

Images

圖片相關(guān)操作

• Disable Images：禁用所有圖片
• Disable Alt Attributes：禁用圖片的alt屬性
• Outline All Images：標(biāo)識(shí)出當(dāng)前頁所有圖片
• View Image Information：在新窗口中顯示當(dāng)前頁面所有圖片信息，如：src, width, height, alt屬性

Infomation

• Display Link Detalis：直接在網(wǎng)頁中顯示href屬性值
• Display Element Information：選擇后變?yōu)槭止鈽?biāo)，可以選擇當(dāng)前網(wǎng)頁中任意元素并在網(wǎng)頁底部顯示詳細(xì)屬性
• Find Duplicate Ids：找出所有重復(fù)id
• View Color information：顯示網(wǎng)頁中所有顏色詳細(xì)信息
• View JavaScript：顯示網(wǎng)頁JS源代碼
• View Response Headers：顯示網(wǎng)頁響應(yīng)頭信息

Micellaneous

各種實(shí)用功能模塊，個(gè)人認(rèn)為此部分功能比較實(shí)用

• Clear Cache：前端調(diào)試時(shí)最常用的功能之一，清理緩存的快捷方式
• Clear History：快速清理歷史記錄
• Display Color Picker：即點(diǎn)即用的取色器
• Display Hidden Elements：顯示隱藏元素
• Display Ruler：顯示標(biāo)尺 再也不用拿尺子量屏幕了
• Mark All Links Unvisited/Visited：將所有鏈接標(biāo)記為已訪問/未訪問的

Outline

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

Reisize

調(diào)節(jié)窗口大小，包括可以預(yù)覽網(wǎng)頁在各種設(shè)備上的響應(yīng)式效果

Tools

CSS, HTML, 鏈接等各種校驗(yàn)器以及查看網(wǎng)頁源代碼