超好用的Web开发浏览器插件-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, 链接等各种校验器以及查看网页源代码

扫一扫,关注我的微信公众号↓

0%