web developer谷歌浏览器插件

web developer 是一款能在 Chrome 浏览器上安装的扩展插件，把大量网页开发辅助工具集中到了一个工具栏里。它最初在 Firefox 上积累了大量用户，后来由同一位开发者 Chris Pederick 推出了 Chrome 版本。插件可以随时启停页面上的 JavaScript、缓存、自动重定向、弹窗等元素，也能查看和编辑 Cookie 与 CSS 样式表，甚至改变窗口尺寸来模拟不同分辨率。对于做网页布局调试和后台程序开发的人来说，这是一个很顺手的辅助工具。

安装与启动方式

1、 在 Chrome 地址栏输入 chrome://extensions 并回车，进入扩展程序管理页面

2、 把已经下载好的扩展文件直接拖拽到这个页面中

3、 弹出提示窗口后，点击“添加扩展程序”按钮，安装就完成了

4、 安装后浏览器工具栏会多出一个按钮，点开就能看到各种开发工具

页面元素控制与 Cookie 管理

• 1. Disable 禁用工具可以临时屏蔽当前页面中的 JavaScript 脚本
• 缓存
• meta 自动重定向
• 弹窗等对象

2、 它还能把网页显示成黑色，但图片本身不受影响

3、 Cookies 工具能查看当前页面的 Cookie 信息，可以按域名或路径分类查看

4、 需要时还能手动增加一个 Cookie，调试后台网络程序时比较方便

CSS 样式表调试

- 可以控制页面上的 CSS 是否生效，方便对比样式效果

- 能查看页面引用的所有 CSS 文件，并直接进行实时编辑

- 编辑后浏览器窗口会立刻显示出修改后的效果

- 对于基于 CSS 的网页布局设计，这个工具能省去反复刷新和切换工具的麻烦

尺寸调整与代码校验

- Resize 尺寸工具用来改变浏览器窗口的大小

- 比如你的显示器分辨率是 1600*1200，可以用它模拟出 1027*768 的窗口效果，预览不同分辨率下的页面表现

- Tools 工具把 CSS 和 XHTML 校验功能整合在一起

- 点击校验选项后会自动跳转到对应的校验页面，并返回校验结果

权限说明与已知问题

1、 插件需要访问所有浏览历史和私人数据，这是为了在任意网站上执行其全部功能

2、 这些数据只在本地被扩展功能调用，不会把个人数据发送给第三方，除非是第三方提供的校验等功能需要

3、 “填充表单字段”功能在个位数小时或分钟的情况下不适用

4、 “查看 JavaScript”功能在 Vivaldi 浏览器中无法正常工作