转 Mozilla 技术布道者给Web开发人员推荐Firefox插件列表

Posted on 2013-03-14

导读：本文作者Robert Nyman是Mozilla的技术布道者，从1999年开始从事Web前端开发。让Web开发人员的生活尽可能轻松和高效，这是Firefox一直坚持的目标之一。通过提供工具和可扩展的Web浏览器，让开发人员能够创造出令人惊奇的东西。

Firefox自带的开发工具

我们致力于开发一系列包含在Firefox内的开发工具。它们在 Developer Tools in Firefox Aurora 10中有更详细的描述，有了它们我们就能做出一些很有趣的事。

我们对大量的用户接口和编码方式进行测试和评估，从而找出在页面中最理想的编码方式。如果你安装了Firefox Aurora，你现在就可以试试！让我们知道你的想法。

继续关注本博客，我们会持续更新自带开发工具的进展和功能。

Firebug

目前为止，浏览器中最著名的web开发工具当属Firebug，毋庸置疑，在相当长的一段时间里，它将成为Web开发与调试的标准。Firebug还拥有许多强大的功能，包括大量的插件（见下文）。

但是有件事你需要明白，那就是如果你安装了过多的Firebug插件，它将占用大量内存，所以要选择适合自己的。

一、针对Web开发者的Firefox插件

多年来，已经有很多插件能够帮助Web开发者最大限度的利用Firefox。下面将列出其中最著名、使用最多的，如果我们疏漏了什么，请在评论中告诉我们！

Accessibility Evaluation Toolbar

为Web开发者提供测试Web资源的辅助功能。

All in One Sidebar

AiOS可以让你打开多个窗口作为侧边栏，并能在它们之间快速切换。有了它，你就可以告别杂乱无章的窗口了！除了书签和历史记录，它还可以在侧边栏中打开下载，插件等对话框。

Cache Status

轻松查看和管理缓存。

CacheToggle

轻轻一点，就能禁用（或清除）浏览器缓存。

Colorzilla

高级取色器，拾色器，渐变色生成器和其他一些功能。

Console2

Console2可能会成为下一代错误控制台，从而取代JavaScript控制台。从V0.5版本开始就有控制台过滤器插件，之前只能在Console2网站上获取。

CSS Reloader

CSS Reloader可以让你重载任何网站的CSS，而不需要重载页面。

DOM Inspector

DOM Inspector可以用来审阅、编辑web文档或XUL程序中使用的DOM。在双窗口中以不用的视图显示文档及内部节点，并控制DOM。

Firefogg

可对Firefox中的视频和音频进行编码。利用Firefogg你可以把大部分媒体文件编码为Ogg或WebM。Firefogg还提供API来把编码过程整合到上传进程中。

FireFTP

FireFTP是Firefox上一款免费、安全、跨平台的FTP/SFTP客户端，可以简单、直观的连接到FTP/SFTP服务器上。

FireUnit

一款JavaScript单元测试插件程序。

FoxGuide

显示水平和垂直参考线，跟你在PhotoShop里用的一样。有助于改善布局，把元素放在适当的网格中，对称排布元素，构造出一个设计。

FoxyProxy Standard

FoxyProxy是一款高级代理管理工具，完全替代了Firefox本身有限的代理功能。它比SwitchProxy、ProxyButton、 QuickProxy、 xyzproxy、 ProxyTex、 TorButton等拥有更多的功能。

Geolocater

把你定位到你想要的位置。

GreaseMonkey

通过使用少量JavaScript，可以自定义网页的显示方式。

HTML Validator

HTML Validator是一个Mozilla插件，它在Firefox和Mozilla中添加了HTML验证。可以在图标上看到一个HTML页面的错误数量。

HttpFox

一个用于Firefox的HTTP分析器插件。

iMacros for Firefox

是Firefox自动化。记录并重播重复工作。如果你喜欢Firefox浏览器，却对重复的任务（例如，每天访问相同的网站，填写表单，记住密码等）感到厌烦的话，iMacros for Firefox便是你梦寐以求的解决方案！

Jenkins Build Monitor

Monitor Jenkins（http://jenkins-ci.org）在Firefox状态栏中创建并显示当前状态。

jQuery extension

内嵌于浏览器的jQuery和jQuery UI。

JSONovich

以简单、低调的视图漂亮的显示出浏览器中JSON的内容。

JSONView

显示浏览器中的JSON文档。

JSView

如果你正在访问的网站包含了任何外部js/css文件，图标上就会显示“SS”、”JS”或者都有。点击文件名就能查看各个文件。文件会在新窗口中打开。

Link Widgets

通过在工具栏按钮上添加首页、上一页、下一页、尾页来简化页面导航（例如在线漫画、论坛或者技术规范，比如：HTML4建议）。

Live HTTP Headers

在浏览网页时查看HTTP头信息。

LiveReload

LiveReload能在文件发生改变时刷新网页。

MeasureIt

可以在任何网页上显示标尺，用来检查宽度、高度，或者以像素为单位对其页面元素。

Modify Headers

能够添加、修改、过滤发送给web服务器的HTTP报头，这个插件特别有助于移动Web开发、HTTP测试和隐私保护。

NoScript

浏览器上最好的安全插件。只有你信任站点上的活动内容才能运行，保护你免受跨站脚本攻击和点击劫持攻击。

PageSpeed

Page Speed是由Google发起的开源项目，旨在通过应用Web性能最佳实例来帮助开发者优化他们的网页。

PixelZoomer

PixelZoomer能够对当前网站进行截图，并提供多种像素分析工具。你可以放大网站（最大3200%），测量间距并用取色器取色。

Pixlr Grabber

抓取屏幕和网页图片变得轻而易举。有了Pixlr Grabber，只需点击右键，你就可以复制、保存、分享甚至编辑你的最终抓取效果——包括所有图片或者背景。

Poster

一个与网络服务和其他网络资源交互的开发者工具，可以让你制作HTTP请求，设置实体段和内容类型。允许你与网络服务相互并查看结果。

QuickJava

可以在状态栏或者工具栏快速开启或禁用Java、Javascript、Flash、 Silverlight、Images、样式表和代理，而无需打开任何对话框。

Rainbow Color Tools

针对Web开发者的颜色工具。选色器、取色器+保存颜色，还能通过拖放提取颜色。

Regular Expressions Tester

测试正则表达式的工具，带有颜色高亮（包含子匹配项），也是创建表达式的帮手。

Remove Cookie(s) for Site

一个非常简单的插件，用来清除当前打开站点的Cookies。它在网页的右键菜单中添加了一个选项，用一键清除Cookies按钮来执行操作，会在状态栏中显示其状态。

Screenshot Pimp

只需轻轻一点，就能捕获、抓取、保存、下载或者复制任何你在浏览器中能看到的东西！Screenshot pimp是目前为止Windows和Mac上定制性和用户体验最好的截屏工具栏。

SQLite Manager

管理你电脑上所有的SQLite数据库。

Selenium IDE Buttons

用一个简单的工具栏按钮来打开selenium IDE。你需要已经安装了selenium IDE：http://seleniumhq.org/projects/ide/

SeoQuake SEO extension

Seoquake是一款FirefoxSEO插件，旨在帮助那些涉及搜索引擎优化（SEO）社会媒体优化（SMO）和网络促销的人。Seoquake可以审查很多重要的SEO参数。

ShowIP

在状态栏显示当前页面的IP地址。还允许通过IP（右键单击）和hostname（左键单击）查询自定义信息服务，例如whois、netcraft等。此外，你还可以复制IP到剪贴板。

Stylish

用Stylish重构网页，它是一款用户风格管理器。Stylish能让你轻易的为很多网站安装主题和皮肤，像Google、Facebook、YouTuBe、Orkut等，你甚至可以自定义Firefox或者其他程序的主题。

Tamper Data

使用tamperdata可以查看、修改HTTP/HTTPS头及post参数。

TAW3

只需通过一个简单的按钮，你就能了解一个网站是否能够访问。

Tilt 3D

一个基于WebGL的插件，可以让网页变成3D可视化的效果。

Total Validator

能够一次执行多种不同的验证。包括外部的、内部的或者本地网页（需要从http://www.totalvalidator.com/downloads/extensiontool.html获取一个桌面工具）。

TryAgain

TryAgain会在服务器不能访问时，不断尝试加载网页。

User Agent Switcher

User Agent Switcher添加了一个菜单和一个工具栏按钮，来控制浏览器的用户代理。

Wappalyzer

Wappalyzer是一个能够发现网站开发技术的浏览器插件。

Web Developer

Web Developer会在浏览器中添加各种web开发者工具。

二、Firebug extensions

在一些不同情况下，会用到很多Firebug的插件，在这里会列出其中一部分：

Acebug

Acebug对Firebug命令行进行语法高亮，并具有模糊自动完成功能。

Code Coverage v2 for Firebug 0.1

这个Firebug插件用来报告Jacascript的代码覆盖率。

CSS Usage

用来查看使用了哪些CSS规则的Firebug插件。

Firecookie

Firecookie是一款可以查看、管理浏览器Cookies的Firebug插件。

Firefinder

查找与选中的CSS选择器或XPath表达式相匹配的HTML元素。

FirePHP

FirePHP通过一个简单的PHP方法调用，就能让你记录你的Firebug控制台。

FireQuery

针对jQuery开发的Firebug插件。

friendly bug

让Firebug界面友好，更易于使用。

Inline Code Finder for Firebug

Inline Code Finder是一个Firebug插件，能发现HTML元素中存在的这些问题：内联JavaScript事件、内联样式、javascript: links。

FireRainbow

Firebug中的JacaScript语法高亮工具。

NetExport

NetExport是一个Firebug插件，可以导出所有Net panel中收集和计算的数据。创建的文件使用HTTP存档（HAR）格式（基于JSON）

Pixel Perfect

Pixel Perfect是一个Firebug插件，能够让Web开发者和设计师轻松的把一张web构图覆盖在开发的HTML页面上。

YSlow

YSlos能够分析网页载入缓慢的原因，基于Yahoo!的高性能网站标准。

更多Firebug 插件，请查看Firebug官方wiki。

文章出自：伯乐在线

Google Reader将于2013年7月1日关闭

Posted on 2013-03-14

今天早上闲逛的时候看到*谷歌阅读器（Google Reader）将于2013年7月1日关闭*
原因是Google Reader的使用率持续下降。并且Google想把全部精力集中在少数产品上，打造更好的用户体验。

作为一个重度的用户实在难以接受。GR都关了，完全是为了整合而整合，对比国内的同类服务，从使用体验来说都不尽人意。

程序员的笑话集锦2

Posted on 2013-03-12

程序员与妻子的对话
妻子：亲爱的，去杂货店买个面包，然后要是有鸡蛋的话，就买六个。
丈夫：好的，这就过去。
十几分钟后。
妻子：亲爱的，你怎么买了六个面包？
丈夫：因为他们有鸡蛋。
Q:你是怎么区分程序员和非程序员的？
A：对于程序员，你对他说“hello”，他回答：“world“

Q:有人会python语言么?
A:嘶嘶嘶嘶嘶嘶嘶嘶嘶嘶嘶嘶嘶嘶。。
Q：我是说编程语言！

某程序员退休后决定练习书法，于是重金购买文房四宝，一日，突生雅兴，一番研磨拟纸，并点上上好檀香。定神片刻，泼墨挥毫，郑重地写下了一行字：‘hello world’

sudo apt-get install girlfriend
正在读取软件包列表..完成
正在分析软件包的依赖关系树…完成
有一些软件包无法被安装
下列的信息可能会对解决问题有所帮助：
下列的软件包有不能满足的依赖关系：
girlfriend:依赖:house但是它将不会被安装
girlfriend:依赖:car但是它将不会被安装
girlfriend:依赖:money但是它将不会被安装

转分享7个超实用的Emmet（zen coding）HTML代码使用技巧

Posted on 2013-03-08

还记得Emmet（即Zen coding）吗？最棒的书写HTML代码的利器之一，能够帮助你快速书写HTML代码的工具。在今天这篇文章中，我们将要分享7个超酷的Emmet书写HTML的技巧，希望大家喜欢！

1. 跳过Div

第一个小技巧就是跳过div，Emment非常清楚你需要输入什么内容，你只需要输入class或者是id，Emmet会自动帮助你生成正确的div。如下：

大家可以看到，不管你是否添加了div，Emmet都会自动生成需要div元素。

含糊标签名称

这个技巧属于implicit tag names特性，你不需要指定div或者li，Emmet会自动帮助你生成，如下：

2. 带有DOM导航的链式缩写

如果你使用Emmet来扩展简单的class名称生成div的话。这个方式可以帮助你省去大量的时间。你只需要记住如下语法：

> 子节点：在DOM树下一层添加创建一个元素

+ 同级别：在DOM树同一层添加创建一个元素

^ 向上层：向上一层添加创建创建一个元素。

向上一层

如果需要的话你可以向上多层，如下：

3. 使用分组来简化你的代码结构

有的时候你可能会发现使用向上符号比较复杂，这时候可能使用分组更加的合理。如下：

一个更复杂一些的例子，如下：

4. 插入文本和属性

如果你需要生成HTML，内容和属性也是你常常需要添加的。很多开发人员只是使用Emmet来生成框架，然后再添加内容。其实你可以在生成页面框架的过程中同时添加属性和内容。

从下面代码可以看到，你输入的文字和属性都可以分别通过大括号和中括号来生成。

5. 添加多个class到一个元素

这个非常简单，你只需要使用逗号来添加多个class，如下：

6. 重复添加

这可能是最让人舒服的操作了，帮助你重复添加元素：

如果你整合分组功能，那么你将能够处理更复杂的HTML生成：

7. 自动列表记数

如果你需要按顺序生成HTML元素，这个技巧你一定喜欢，使用$符号可以帮助你生成一系列数字，支持class，id，属性，内容等等。如下：

注意如果你需要生成2位的数字，使用两个$符号即可。

再试一次

!-- Skip The Div #1 --
&lt;!-- Skip The Div #2 --&gt;
.container

&lt;!-- Implicit Tag Names --&gt;
.wrap&gt;ul.list&gt;.sites

&lt;!-- Chaining Abbreviations --&gt;
.outer&gt;.inner&gt;h1+p

&lt;!-- Climbing Up #1 --&gt;
.wrap&gt;p&gt;a^p

&lt;!-- Climbing Up #2 --&gt;
.wrap&gt;p&gt;em&gt;a^^p

&lt;!-- Grouping #1 --&gt;
(.one&gt;h1)+(.two&gt;h1)

&lt;!-- Grouping #2 --&gt;
(section&gt;.wrap&gt;h1&gt;p&gt;a)+(section&gt;.wrap&gt;p+p)

&lt;!-- Text &amp; Attributes #1 --&gt;
h1{heading}+p{lorem ipsum}

&lt;!-- Text &amp; Attributes #2 --&gt;


&lt;!-- Multiple Class Names --&gt;
.one.two.three

&lt;!-- Multiplication #1 --&gt;
ul&gt;li*3

&lt;!-- Multiplication #2 --&gt;
(section&gt;.wrap)*2

&lt;!-- Automatic Numbering --&gt;
ul&gt;li.item${item $$}*3

via 标签社区

利用 php.ini 中的 auto_prepend_file 自动导入 firephp

Posted on 2013-03-07

最近尝试把firephp用到项目中，也许你没有听过FirePHP，但是应该听过Firebug这个神器，而FirePHP就是基于FireBug的一个插件，可以用来方便的调试PHP。
通过一个类库，以及Firebug上的插件，通过HTTP相应头，可以发送调试信息到控制台。轻松调试。
所以使用的童鞋先得有个firebug

FirePHP的安装分两部分客户端和服务端

可参考官网文档：http://www.firephp.org

首先下载FirePHP的插件：https://addons.mozilla.org/en-US/firefox/addon/6149

安装完后重新打开Firebug面板会看到一只蓝色的臭虫，是的你没有看错- - 都是臭虫系列。

服务端：
http://www.firephp.org/HQ/Install.htm

就是一个类库。

然后在你的代码中加入
require_once(‘FirePHPCore/fb.php’);
就可以调试了

不过如果每调试一个文件就要加入require一个之后还要删除掉多余的方法，很蛋疼。

所以我们可以利用php.ini中的auto_prepend_file属性
通过设置这个属性可以使每个页面像使用include()语句包含的文件一样,会自动导入这个文件，这样我们就不用每次都require了

解压我们下载好的类库，放到一个指定目录比如 F:/www/FirePHPCore/fb.php
打开php.ini
设置为auto_prepend_file = “F:/www/FirePHPCore/fb.php”;

重启apache

之后就可以在文件中调试

FirePHP提供了Object Oriented 的API以及Procedural 的API

不过为了调试方便我都用Procedural式的

fb($var);//不带标签
fb($var, 'label');//带标签
fb($var, 'label', FirePHP::INFO);//默认采用info，可省略
fb($var, 'label', FirePHP::ERROR);//错误标示
fb($var, 'label', FirePHP::WARN);//警告标示

还可以用来追踪程序的运行，使用FirePHP::TRACE常量

function trace_func ()
{
	fb('hello', FirePHP::TRACE);
}

function show_me_call()
{
	trace_func();
}

show_me_call();

更多高级的面向对象的用法可以参考官方说明

win7 修改锁屏壁纸

Posted on 2013-02-17

进入注册表，找到
HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\ Windows\CurrentVersion\Authentication\LogonUI\Background
找到一个名为 OEMBackground 的 DWORD，修改值为“1”。
在“运行”中输入 gpedit.msc，打开组策略编辑器，
在目录“计算机配置-管理模块-系统-登录”中找到“始终使用自定义登录背景”项，
双击，在编辑页面选择“已启用”，保存设置。
接下来找到放锁屏壁纸的目录
C:\Windows\System32\oobe\info\backgrounds
默认情况下 info\backgrounds目录是不存在的，我们要自己创建一个
将想要设置为锁屏的壁纸命名为 backgroundDefault.jpg，
放入backgrounds文件夹中，搞定收工。

如果觉得麻烦，可以使用第三方的工具来实现，比如魔方，或者是爱壁纸等等。

PHP 中的依赖注入

Posted on 2013-01-31

经常看到却一直不甚理解的概念，依赖注入(DI)以及控制器反转(Ioc)，找了几篇好的文章，分享一下。
自己理解的，依赖注入就是组件通过构造器，方法或者属性字段来获取相应的依赖对象。

举个现实生活中的例子来理解，
比如我要一把菜刀如何获得
1.可以自己造一把，对应new一个。
2.可以找生产菜刀的工厂去买一把，对应工厂模式。
3.可以打电话让店家送货上门，对应依赖注入。

再比如我是一个演员，我不可能要求某个导演，我要演某某剧的男一号，相反，导演可以决定让谁来演。而我们的object就是这个演员。

PHP 中的浅复制和深复制

Posted on 2013-01-30

在项目源码的时候看到一个方法

1
2
3

function clone_o($obj) {
   return unserialize(serialize($obj));
}

不明白为什么要串行化后反串行化，搜索得到一篇文章写的不错。这样可以实现一个对象的深复制。原理以及例子如下

Sublime Text 2 报 detect_slow_plugins 错误

Posted on 2013-01-30

今天打开运行了一段时间的 Sublime Text 2，发现报了一个错，错误如下

A plugin (sublimelint_plugin) may be making Sublime Text unresponsive by taking too long (1.020662s) in its on_load callback. This message can be disabled via the detect_slow_plugins global setting。

解决办法如下：
打开 preference->setting_user
修改如下配置

1	"detect_slow_plugins": false

这样以后就不会弹出类似提示了

PHP 中的 date_default_timezone_set

Posted on 2013-01-29

刚学php的时候遇到过一个典型的问题，就是打印的时间和本地差8个小时。