下载地址：http://www.my-debugbar.com/wiki/IETester/HomePage

• 灭了IE6,IE6必死

呵呵！发现了一个网站 BrowserShots.org 这个网站是一个很不错的在线服务，它主要帮助你检查一下你所设计网站是否兼容所有的浏览器。其目前支持四个操作系统：Linux, Windows, MacOS和BSD。浏览器支持的就多了：包括MSIE，Firefox，Chrome，Safari，Opera，Dillo，SeaMonkey，Navigator等等浏览器的不同版本。

使用这个在线服务其实很简单，只需要输入你的网址，并勾选一下各种浏览器。当然，你还可以指定分辨率，色彩度，Javascript，Java和Flash的版本。然后，这个网站会利用虚拟机的技术，启动操作系统然后运行相应的浏览器访问你的网站，并把图抓下来上传到你可以访问的位置以例提供你下载。

需要注意的是，如果你选中了太多的浏览器，可能整个速度就有些慢了，而系统设置是30分钟过期，而可能有很多浏览器的任务却高于这个时间。所以，你需要过会就去点击一下“Extend”按钮，以告诉系统延长过期时间。

如图：

• 哎呀，怎么没有相关的日志呢？

px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸

任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合:1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。

em有如下特点：

1. em的值并不是固定的;

2. em会继承父级元素的字体大小。

为什么外国网站都喜欢用em而不是px呢？

• IE无法调整那些使用px作为单位的字体大小;
• 国外的大部分网站能够调整的原因在于其使用了em作为字体单位;
• Firefox能够调整px和em，但是96%以上的中国网民使用IE浏览器(或内核)。

所以我们在写CSS的时候，需要注意两点：

1. body选择器中声明Font-size=62.5%;
   1.2em大小的汉字在IE中并不等于直接用12px定义的字体大小，而是稍大一点。只需在body选择器中把62.5%换成63%就能正常显示了。原因可能是IE处理汉字时，对于浮点的取值精确度有限
2. 将你的原来的px数值除以10，然后换上em作为单位;
3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。
   也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em,因为此em非彼em，它因继承#content的字体高而变为1em=12px。

• Firebug使用说明

要写出漂亮的HTML代码；要编写精致的CSS样式表展示每个页面模块；要调试javascript给页面增加一些更活泼的要素；要使用Ajax给用户带来更好的体验。一个优秀的WEB开发人员需要顾及更多层面，才能交出一份同样优秀的作业。为帮助广大正处于Web2.0洪流中的开发人员，在这里为大家介绍一款轻巧灵活的辅助开发工具。

Firebug是Firefox下的一款开发类插件，现属于Firefox的 五星级强力推荐插件之一。它集HTML查看和编辑、Javascript控制台、网络状况监视器于一体，是开发JavaScript、CSS、HTML和 Ajax的得力助手。Firebug如同一把精巧的瑞士军刀，从各个不同的角度剖析Web页面内部的细节层面，给Web开发者带来很大的便利。这是一款让 人爱不释手的插件，如果你以前没有接触过它，也许在阅读本文之后，会有一试的欲望。

应用

Firebug插件虽然功能强大，但是它已经和Firefox浏览器无缝地结合在一起，使用简单直观。如果你担心它会占用太多的系统资源，也可以方便地启用/关闭这个插件，甚至针对特定的站点开启这个插件。

在安装好插件之后，先用Firefox浏览器打开需要测试的页面，然后点击右下方的绿色按钮或使用快捷键F12唤出Firebug插件，它会将当前页面分成上下两个框架，如图1所示。

图1：Firebug插件展开图示
从图1中看到，Firebug有6个主要的Tab按钮，下文将主要介绍介绍这几方面的功能。

控制台

控制台能够显示当前页面中的javascript错误以及警告，并提示出错的文件和行号，方便调试，这些错误提示比起浏览器本身提供的错误提示更加 详细且具有参考价值。而且在调试Ajax应用的时候也是特别有用，你能够在控制台里看到每一个XMLHttpRequests请求post出去的参数、 URL，http头以及回馈的内容，原本似乎在幕后黑匣子里运作的程序被清清楚楚地展示在你面前。

象C shell或Python shell一样，你还能在控制台中查看变量内容，直接运行javascript语句，就算是大段的javascript程序也能够正确运行并拿到运行期的信息。

控制台还有个重要的作用就是查看脚本的log, 从前你也许习惯了使用alert来打印变量，但是Firebug给我们带来了一个新朋友 —— console.log, 最简单的打印日志的语法是这样的：

CODE:

1. console.log(“hello world”)

如果你有一堆参数需要组合在一起输出，可以写成这样：

CODE:

1. console.log(2,4,6,8,”foo”,bar).

Firebug的日志输出有多种可选的格式以及语法，甚至可以定制彩色输出，比起单调的alert，显然更加方便，限于篇幅，这里不做详细说明，但是有志于提高debug效率的读者，可以到Firebug的官方站点（见附录）查看更详细的教程。

图2：在控制台里调试javascript

查看和修改HTML

第一次看到Firebug强大的HTML代码查看器，就觉得它与众不同，相比于Firefox自带的HTML查看器，它的功能强大了许多。 HTML

首先你看到的是已经经过格式化的HTML代码，它有清晰的层次，你能够方便地分辨出每一个标签之间的从属并行关系，标签的折叠功能能够帮助你集中精 力分析代码。源代码上方还标记出了DOM的层次，如图3所示，它清楚地列出了一个hml元素的parent、child以及root元素，配合 Firebug自带的CSS查看器使用，会给div+css页面分析编写带来很大的好处。你还可以在HTML查看器中直接修改HTML源代码，并在浏览器 中第一时间看到修改后的效果，光凭这一点就会让许多页面设计师死心塌地地成为Firebug的粉丝了。

有时候页面中的javascript会根据用户的动作如鼠标的onmouseover来动态改变一些HTML元素的样式表或背景色，HTML查看器会将页面上改变的内容也抓下来，并以黄色高亮标记，让网页的暗箱操作彻底成为历史。

利用Inspect检查功能，我们还可以用鼠标在页面中直接选择一些区块，查看相应的HTML源代码和CSS样式表，真正的做到所见即所得，如果你 使用了外部编辑器修改了当前网页，可以点击Firebug的reload图片重新载入网页，它会继续跟踪你之前用Inspect选中的区块，方便调试。

图3:：HTML查看器

CSS调试

Firebug的CSS调试器是专为网页设计师们量身定做的。

如今的网页设计言必称div+css，如果你是用table套出来的HTML页面，就得按这规矩重构一遍，否则显得你不够时髦！用div做出来的页面的确能精简HTML代码，HTML标签减肥的结果就是CSS样式表的编写成了页面制作的重头戏。Firebug的CSS查看器不仅自下向上列出每一个 CSS样式表的从属继承关系，还列出了每一个样式在哪个样式文件中定义。你可以在这个查看器中直接添加、修改、删除一些CSS样式表属性，并在当前页面中 直接看到修改后的结果。

一个典型的应用就是页面中的一个区块位置显得有些不太恰当，它需要挪动几个象素。这时候用CSS调试工具可以轻易编辑它的位置——你可以根据需要随意挪动象素。
如图4中正在修改一个区块的背景色。

提示：如果你正在学习CSS样式表的应用，但是总记不住常用的样式表有哪些值，可以尝试在CSS调试器中选中一个样式表属性，然后用上下方向键来改变它的值，它会把可能的值一个个遍历给你看。

图4: CSS查看器，能够直接修改样式表

可视化的CSS尺标

我们可以利用Firebug来查看页面中某一区块的CSS样式表，如果进一步展开右侧Layout tab的话，它会以标尺的形式将当前区块占用的面积清楚地标识出来，精确到象素，更让人惊讶的是，你能够在这个可视化的界面中直接修改各象素的值，页面上区块的位置就会随改动而变化。在页面中某些元素出现错位或者面积超出预料值时，该功能能够提供有效的帮助，你可以籍此分析offset、margin、 padding、size之间的关系，从而找出解决问题的办法。

图5：Firebug中的CSS标尺

网络状况监视器

也许有一天，你的老板或者客户找到你，抱怨你制作的网页速度奇慢，你该如何应对？你或许会说这可能是网络问题，或者是电脑配置问题，或者是程序太慢，或者直说是他们的人品问题？不管怎么说，最后你可能被要求去解决这个有多种可能的问题。

网络状况监视器能帮你解决这个棘手问题。Firebug的网络监视器同样是功能强大的，它能将页面中的CSS、javascript以及网页中引用 的图片载入所消耗的时间以矩状图呈现出来，也许在这里你能一把揪出拖慢了你的网页的元凶，进而对网页进行调优，最后老板满意客户欢喜，你的饭碗也因此而牢固。

网络监视器还有一些其它细节功能，比如预览图片，查看每一个外部文件甚至是xmlHttpRequests请求的http头等等。

图6：网络状况监视器

Javascript调试器

这是一个很不错的javascript脚本调试器，占用空间不大，但是单步调试、设置断点、变量查看窗口一个不少。正所谓麻雀虽小，五脏俱全。

如果你有一个网站已经建成，然而它的javascript有性能上的问题或者不是太完美，可以通过面板上的Profile来统计每段脚本运行的时间，查看到底是哪些语句执行时间过长，一步步排除问题。

图7：javascript调试器

DOM查看器

DOM(Document Object Model)里头包含了大量的Object以及函数、事件，在从前，你要想从中查到需要的内容，绝非易事，这好比你去了一个巨大的图书馆，想要找到几本名字不太确切的小书，众多的选择会让你无所适从。而使用Firebug的DOM查看器却能方便地浏览DOM的内部结构，帮助你快速定位DOM对象。双击一个 DOM对象，就能够编辑它的变量或值，编辑的同时，你可能会发现它还有自动完成功能，当你输入document.get之后，按下tab键就能补齐为 document.getElementById，非常方便。如果你认为补齐得不够理想，按下shift+tab又会恢复原状。用了Firebug的 DOM查看器，你的javascript从此找到了驱使的对象，Web开发也许就成了一件乐事。

图8: Dom查看器

小结

Firebug插件提供了一整套web开发所必需的工具。从HTML的编写，到CSS样式表的美化调优，以及用javascript脚本开发，亦或 是Ajax应用，Firebug插件都会成为你的得力助手。所谓工欲善其事，必先利其器。在Web2.0的时代，言必称Ajax，动辄就是用户体验提升， 如果把Firebug工具用好，必能让你如虎添翼，将HTML、CSS、javascript整理得服服帖帖，从此成为web开发中的专家级人物。

附

Firebug的中文含义是萤火虫，作者是Joe Hewitt，官方网页  http://www.getfirebug.com
Firefox亦即火狐浏览器，是近年来撼动IE浏览器市场占有率的一支强大力量，要不是它的出现，我想有生之年说不定也看不到IE 7的发布了，官方网页 http://www.firefox.com

有所改编 原作者 Volcano 转载自http://www.ooso.net/archives/294

• All in One Adsense and YPN
• CSS用em弃px的原因
• 让火狐支持拖放功能的插件-Easy DragToGo
• 模拟城市4 插件故障解决方法
• 模拟城市4的插件
• 我的期末Flash作业！
• ASP.NET 程序中常用代码

我的选修课期末作业，得了不错的分，现在发出来分享，不要笑我喔！！关于生日快乐的MV

• Firebug使用说明
• ASP.NET 程序中常用代码

1
2

string a = Request.QueryString("id");
string b = Request.QueryString("id1");

2.为按钮添加对话框

1
2

Button1.Attributes.Add("onclick","return confirm('确认?')");
button.attributes.add("onclick","if(confirm('are you sure...?')){return true;}else{return false;}")

3.删除表格选定记录

1
2

int intEmpID = (int)MyDataGrid.DataKeys[e.Item.ItemIndex];
string deleteCmd = "DELETE from Employee where emp_id = " + intEmpID.ToString()

4.删除表格记录警告

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

private void DataGrid_ItemCreated(Object sender,DataGridItemEventArgs e)
{
　switch(e.Item.ItemType)
　{
　　case ListItemType.Item :
　　case ListItemType.AlternatingItem :
　　case ListItemType.EditItem:
　　　TableCell myTableCell;
　　　myTableCell = e.Item.Cells[14];
　　　LinkButton myDeleteButton ;
　　　myDeleteButton = (LinkButton)myTableCell.Controls[0];
　　　myDeleteButton.Attributes.Add("onclick","return confirm('您是否确定要删除这条信息');");
　　　break;
　　default:
　　　break;
　}
}

5.点击表格行链接另一页

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

private void grdCustomer_ItemDataBound(object sender,
System.Web.UI.WebControls.DataGridItemEventArgs e)
{
　//点击表格打开
　if (e.Item.ItemType == ListItemType.Item e.Item.ItemType == ListItemType.AlternatingItem)
　　e.Item.Attributes.Add("onclick","window.open('Default.aspx?id=" + e.Item.Cells[0].Text + "');");
}
　　双击表格连接到另一页
　　在itemDataBind事件中
if(e.Item.ItemType == ListItemType.Item e.Item.ItemType == ListItemType.AlternatingItem)
{
　string OrderItemID =e.item.cells[1].Text;
　...
　e.item.Attributes.Add("ondblclick", "location.href='../ShippedGrid.aspx?id=" + OrderItemID + "'");
}
　　双击表格打开新一页
if(e.Item.ItemType == ListItemType.Item e.Item.ItemType == ListItemType.AlternatingItem)
{
　string OrderItemID =e.item.cells[1].Text;
　...
　e.item.Attributes.Add("ondblclick", "open('../ShippedGrid.aspx?id=" + OrderItemID + "')");
}

6.表格超连接列传递参数

1
2
3
4

<asp:HyperLinkColumn Target="_blank" headertext="ID号" DataTextField="id" 
NavigateUrl="aaa.aspx?id='　
<%# DataBinder.Eval(Container.DataItem, "数据字段1")%>' & name='
<%# DataBinder.Eval(Container.DataItem, "数据字段2")%>' />

7.表格点击改变颜色

1
2
3
4
5
6
7
8
9
10
11
12

if (e.Item.ItemType == ListItemType.Item e.Item.ItemType == ListItemType.AlternatingItem)
{
e.Item.Attributes.Add("onclick","this.style.backgroundColor='#99cc00';
this.style.color='buttontext';this.style.cursor='default';");
}
　　写在DataGrid的_ItemDataBound里
if (e.Item.ItemType == ListItemType.Item e.Item.ItemType == ListItemType.AlternatingItem)
{
e.Item.Attributes.Add("onmouseover","this.style.backgroundColor='#99cc00';
this.style.color='buttontext';this.style.cursor='default';")
e.Item.Attributes.Add("onmouseout","this.style.backgroundColor='';this.style.color='';");
}

8.关于日期格式
日期格式设定

1
2

DataFormatString="{0:yyyy-MM-dd}" 我觉得应该在itembound事件中
e.items.cell["你的列"].text=DateTime.Parse(e.items.cell["你的列"].text.ToString("yyyy-MM-dd")) 

9.获取错误信息并到指定页面
不要使用Response.Redirect,而应该使用Server.Transfer

1
2
3
4
5

　　e.g
// in global.asax protected void Application_Error(Object sender, EventArgs e) 
{ if (Server.GetLastError() is HttpUnhandledException) Server.Transfer("MyErrorPage.aspx");
//其余的非HttpUnhandledException异常交给ASP.NET自己处理就okay了 :)
} 　<span style="font-family: Georgia; line-height: 19px; white-space: normal;">　</span>

Redirect会导致post－back的产生从而丢失了错误信息，所以页面导向应该直接在服务器端执行，
这样就可以在错误处理页面得到出错信息并进行相应的处理
10.清空Cookie

1

Cookie.Expires=[DateTime]; Response.Cookies("UserName").Expires = 0 　

11.自定义异常处理
自定义异常处理类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

using System;
using System.Diagnostics;
namespace MyAppException
{
/// <summary>
/// 从系统异常类ApplicationException继承的应用程序异常处理类。
/// 自动将异常内容记录到Windows NT/2000的应用程序日志
/// </summary>
public class AppException : System.ApplicationException
{
public AppException()
{
if (ApplicationConfiguration.EventLogEnabled) LogEvent("出现一个未知错误。");
}
public AppException(string message)
{
LogEvent(message);
}
public AppException(string message, Exception innerException)
{
LogEvent(message);
if (innerException != null)
{
LogEvent(innerException.Message);
}
}
}
}

日志记录类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

using System;
using System.Configuration;
using System.Diagnostics;
using System.IO;
using System.Text;
using System.Threading;
namespace MyEventLog
{
/// <summary>
/// 事件日志记录类，提供事件日志记录支持
/// <remarks>
/// 定义了4个日志记录方法 (error, warning, info, trace)
/// </remarks>
/// </summary>
public class ApplicationLog
{
/// <summary>
/// 将错误信息记录到Win2000/NT事件日志中
/// <param name="message">需要记录的文本信息</param>
/// </summary>
public static void WriteError(String message)
{
WriteLog(TraceLevel.Error, message);
}
/// <summary>
/// 将警告信息记录到Win2000/NT事件日志中
/// <param name="message">需要记录的文本信息</param>
/// </summary>
public static void WriteWarning(String message)
{
WriteLog(TraceLevel.Warning, message);
}
/// <summary>
/// 将提示信息记录到Win2000/NT事件日志中
/// <param name="message">需要记录的文本信息</param>
/// </summary>
public static void WriteInfo(String message)
{
WriteLog(TraceLevel.Info, message);
}
/// <summary>
/// 将跟踪信息记录到Win2000/NT事件日志中
/// <param name="message">需要记录的文本信息</param>
/// </summary>
public static void WriteTrace(String message)
{
WriteLog(TraceLevel.Verbose, message);
}
/// <summary>
/// 格式化记录到事件日志的文本信息格式
/// <param name="ex">需要格式化的异常对象</param>
/// <param name="catchInfo">异常信息标题字符串.</param>

• Firebug使用说明
• 我的期末Flash作业！

‘CDate 将字符串转化成为日期 select CDate(“2005/4/5″)

‘Date 返回当前日期

‘DateAdd 将指定日期加上某个日期select dateAdd(“d”,30,Date())将当前日期加上30天,其中d可以换为yyyy或H等

‘DateDiff 判断两个日期之间的间隔 select DateDiff(“d”,”2006-5-1″,”2006-6-1″)返回31,其中d可以换为yyyy,m,H等

‘DatePart 返回日期的某个部分 select DatePart(“d”,”2006-5-1″)返回1,即1号，d也可以换为yyyy或m

‘Day 返回日期的d部分, 等同于datepart的d部分

‘Hour 返回日期的小时

‘IsDate 判断是否是日期, 是日期返回 – 1, 不是日期返回0

‘Minute 返回日期的分钟部分

‘Month 返回日期的月份部分

‘Now 返回当前时间(完整时间，包括年月日小时分秒)

‘Second 返回日期的秒部分

‘Time 返回当前的时间部分(即除去年 / 月 / 日的部分)

‘Weekday 返回某个日期的当前星期(星期天为1,星期一为2,星期二为3…)，例如select weekday(now());

‘Year 返回某个日期的年份

2.▲检查

‘IsEmpty 检测是否为空(不过经测试，不管什么情况，都返回0)

‘IsNull 检测是否为Null值，null值返回0，非null值返回-1

‘IsNumeric 检测是否为数字,是数字返回-1，否则返回0

3.▲算术

‘Abs 绝对值

‘Atn 返正切值?

‘Cos 余弦值

‘Exp 返回 e 的给定次幂。

‘Fix 返回数字的整数部分(即小数部分完全截掉)

‘Int 将数字向下取整到最接近的整数。(其实等同于Fix)

‘Log 返回以E为底的对数值 ‘Rnd 返回一个0到1之间的随机数值

‘Sgn 返回数字的正负符号(正数返回1,负数返回-1,0值返回0)

‘Sin 正弦值

‘Sqr 返回平方根值

‘Tan 正切值

4.▲程序流程

‘Choose 根据第一参数，返回后面字符串组的值,Select Choose(1,”a”,”b”,”c”)返回a,将1改成2后，返回b,改成3后，返回c(第一个参数也可以是某个字段)

‘IIF 根据表达式返回特定的值 Select IIF(“3>1″,”OK”,”False”)，返回OK

5.▲Sql合计函数

‘Avg 取字段平均值

‘Count 统计记录条数

‘Max 取字段最大值

‘Min 取字段最小值

‘StDev 估算样本的标准差（忽略样本中的逻辑值和文本）。

‘StDevP 计算以参数形式（忽略逻辑值和文本）给出的整个样本总体的标准偏差。

‘Sum 计算字段的总合

‘Var 估算样本方差（忽略样本中的逻辑值和文本）。

‘VarP 计算整个样本总体的方差（忽略样本总体中的逻辑值和文本）。

6.▲文本

‘Asc 返回字母的Acsii值，select Asc(“A”)返回65

‘Chr 将ascii值转换到字符 select chr(65)返回”A”

‘Format 格式化字符串，Select Format(now(),’yyyy-mm-dd’)返回类似于”2005-04-03″ ,Select Format(3/9,”0.00″)返回0.33 ‘InStr 查询子串在字符串中的位置 select Instr(“abc”,”a”)返回1,select Instr(“abc”,”f”)返回0

‘LCase 返回字符串的小写形式

‘Left 左截取字符串

‘Len 返回字符串长度

‘LTrim 左截取空格

‘Mid 取得子字符串 select mid(“123″,1,2) as midDemo 返回12

‘Right 右截取字符串

‘RTrim 右截取空格

‘Space 产生空格 select Space(4)返回4个空格

‘StrComp 比较两个字符串是否内容一致(不区分大小写)select StrComp(“abc”,”ABC”)返回0,select StrComp(“abc”,”123″)返回-1

‘Trim 截取字符串两头的空格

‘UCase 将字符串转大写

• 哎呀，怎么没有相关的日志呢？