超好用的Web开发浏览器插件-Web Developer

图片太多没有上传，详情请访问 http://www.prchen.com/2019/06/04/超好用的浏览器插件-Web Developer/

概述

• Web Developer是一款Web开发人员必备的浏览器实用插件，它提供了多种模块让开发人员可以在工具栏中便捷地对网页的HTML、脚本、多媒体、CSS、缓存、图象等网页内容进行调试。Web Developer适用于Chrome，Firefox和Opera浏览器

安装

1. 谷歌浏览器插件商店中搜索"Web Developer"，或者直接点击以下链接（需要kexueshangwang）：https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=zh-CN
2. 点击添加至Chrome即可安装
3. 安装完成后右上角插件栏会多出一个齿轮图标，点击即用

常用模块及功能介绍

由于Web Development功能强大且丰富，笔者只列出其中相对较常用的模块及功能。

Disable

• Disable JavaScript：禁用JS脚本
• Disable Popups：禁用弹出窗口
• Reset Disable Features：重置所有禁用选项

Cookies

• Disable Cookies：禁用Cookies

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

• Delete Domain Cookies：删除当前域Cookie

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

• View Cookie Information：在新窗口打开当前页面的所有Cookie信息，可以对Cookie进行编辑、删除等操作

CSS

• Disable All Styles：禁用所有CSS样式
• View CSS：在新窗口查看网页CSS
• Edit CSS：编辑当前网页CSS文件，并即时生效

Forms

该模块提供Form表单相关操作，例如：一键清空表单所有字段，改变表单提交方式post/get相互转化，显示密码，显示表单元素的属性值，表单详细信息等等众多快捷易用的表单操作，在此不再赘述，如需要读者可以亲自试用。

• Clear Form Fields：一键清空表单所有字段
• Convert Form GETs To POSTs/POSTs To GETs：表单提交方式post转化为get/get转化为post
• Display Passwords：显示密码
• Display Form Details：很实用的功能，打开后直接在网页中显示所有表单元素的详细属性值
• View Form Information：在新窗口中浏览表单详细信息

Images

图片相关操作

• Disable Images：禁用所有图片
• Disable Alt Attributes：禁用图片的alt属性
• Outline All Images：标识出当前页所有图片
• View Image Information：在新窗口中显示当前页面所有图片信息，如：src, width, height, alt属性

Infomation

• Display Link Detalis：直接在网页中显示href属性值
• Display Element Information：选择后变为十字光标，可以选择当前网页中任意元素并在网页底部显示详细属性
• Find Duplicate Ids：找出所有重复id
• View Color information：显示网页中所有颜色详细信息
• View JavaScript：显示网页JS源代码
• View Response Headers：显示网页响应头信息

Micellaneous

各种实用功能模块，个人认为此部分功能比较实用

• Clear Cache：前端调试时最常用的功能之一，清理缓存的快捷方式
• Clear History：快速清理历史记录
• Display Color Picker：即点即用的取色器
• Display Hidden Elements：显示隐藏元素
• Display Ruler：显示标尺 再也不用拿尺子量屏幕了
• Mark All Links Unvisited/Visited：将所有链接标记为已访问/未访问的

Outline

• Outline Absolute Positioned Elements：标识出绝对定位（position: absolute）的元素
• Outline Block Level Elements：标识块级元素
• Outline Deprecated Elements：标识过时元素
• Outline Fixed Positioned Elements：标识固定（position: fixed）的元素
• Outline Floated Elements：标识悬浮元素
• Outline Tables：标识表格

Reisize

调节窗口大小，包括可以预览网页在各种设备上的响应式效果

Tools

CSS, HTML, 链接等各种校验器以及查看网页源代码