在firebug控制台调试javascript的函数

星期天,2010 九 19 17:11:07

前几篇文章已经介绍过Firebug及其控制台的一些用法,但是每次讲的都是以理论为主,这次从实践入手,介绍一个函数,可以在js文件中跟踪代码时,方便的在Firebug控制台中显示跟踪信息,而且兼容各个浏览器。

函数其实很简单,请看如下代码:
function firebugLog(message) {
if( typeof console != 'undefined' && console != null ) try {
console.log(new Date()+" "+message);
} catch( e1 ) { /* ignore */ }
}

这个函数里面主要是对console是否存在做了一个判断,这样就可以实现浏览器兼容,这段代码只是调用控制台的日志信息。其实在大部分的时间里,我主要是希望看到这些信息就可以了,而并不是很关心如果给这些信息归类,如果你希望按照类别来显示信息(调试,错误,或警告)的话,可以多定义几个这样的函数,然后把主体内容的log函数改成其他相应的函数,或者在这个函数里加一个参数,按照这个参数来显示不同类型的日志信息,具体的函数设置可以查看《控制台日志》。

下面来介绍如何调用这个函数,在你希望显示日志的javascript代码中调用下面的函数即可:

firebugLog('希望显示的日志信息');
阅读全文

   依洋 |  Javascript |  [31] |  浏览: 2,483次  

网站优化之分析和压缩网站代码

星期五,2010 七 16 18:10:02

随着网站功能的日益增强,网站的代码量也会越来越大,而且进入Web2.0富客户端以后,网站主更加关注网站的美观和用户的体验,可是要产生这样的视觉效果,图片CSS和JS就是担负起很大的责任,这样就使网站的页面变的很大,从而影响网站的访问速度。试想一下,一个只有10K的页面和一个100K的页面哪一个能更快的展现出来,答案当然是10K的页面,许多研究都表明,用户最满意的打开网页时间,是在2秒以下。用户能够忍受的最长等待时间大约在6~8秒之间。也就是说,8秒是一个临界值,如果你的网站打开速度在8秒以上,那么很可能,大部分访问者最终都会离你而去。

既然网站页面的大小如此重要,我们应该如何来优化自己的页面呢?
当然首先要保证你的HTML代码书写要规范,要知道DIV要比TABLE展示的快,所以布局尽量用DIV和CSS。JS和CSS代码都写在外部文件,可以分模块来减小他们的大小,每个模块引用各自模块的JS和CSS,然后对每个CSS和JS文件进行压缩。图片没有办法压缩,但是我们可以通过工具来查看页面引用的所有图片的大小来进行优化。

下面我来介绍一下分析网站和压缩代码的工具:
分析网站的工具:YSlow
YSlow是Yahoo开发的一个用于测试分析网站优化的Firefox工具插件,安装时还必须依赖于Firebug。YSlow针对网站速度体验上的优化,将其总结为13条,分别用F到A的指标来对你的网站速度做出评价并给出数据,F代表最差,A代表最好。我们可以通过分析得到的数据对自己的网站和服务器做相应的优化。不仅如此,YSlow还为我们统计了页面发起的HTTP请求和页面的大小,下面是统计的示例: 阅读全文

   依洋 |  SEO |  [18] |  浏览: 2,183次  

这次主要介绍一下firebug控制台的记录日志,上次有位访客对console.log很感兴趣,其实console确实为我们代码的调试带来了很多方便,以前总是习惯用alert来测试Javascript的信息,但是有些情况通过alert是有误差的,如果说一些AJAX的程序,因为alert的延迟会得到不同的结果,而且使用console也为我们省去去点击alert窗口的麻烦。以下的介绍都是以最新版Firebug 1.5.2为例子来演示,大家如果有什么需要问题,可以给我留言一起探讨。

Firebug提供如下几个记录日志的函数:
Console.log: 简单的记录日志。
Console.debug: 记录调试信息,并且附上行号的超链接。
Console.error: 在消息前显示错误图标,并且附上行号的超链接。
Console.info: 在消息前显示信息图标,并且附上行号的超链接。
Console.warn: 在消息前显示警告图标,并且附上行号的超链接。
在空白的html页面中,向<body>标签里加入<script>标签,代码如下:
阅读全文

   依洋 |  HTML |  [0] |  浏览: 2,649次  

相信大家在读过我关于firebug的第一篇文章以后,对firebug已经有了一个认识,而且已经会使用firebug进行一些简单的操作了!这里主要介绍一下firebug的另一个重大的功能:firebug控制台。

其实大家在调试代码的时候,已经对firebug的控制台有了一些认识,当代码中有Javascript错误的时候,就会在这里提示出来,而且可以 跟踪AJAX的请求和响应,比如说在页面执行AJAX的时候,控制台就会显示出AJAX的处理页面的地址,发送的数据和返回的数据等等很多信息。这些功能 只是给开发者一些直接体验,让开发者能够检测出发送的数据和接受的数据是否正确。

在这里给大家介绍一些关于控制台的一些高级的用法:命令行调试

在“Console”标签下有一个命令行工具,打开Firebug点击“控制台”,在这个窗口的下面,可以看到一个单行的输入框,这个就是控制台的命令 行,如果需要输入多行的内容,还可以点击命令行右侧的“向上”按钮,之后回出现一个多行的编辑区。我们可以在这里运行一些脚本对页面进行调试,它支持所有 的Javascript代码,而且还有一些特殊的函数。

阅读全文

   依洋 |  HTML |  [3] |  浏览: 2,433次  

对于网络开发的朋友来说,功能都可以实现,可是调试HTML代码的时候,那叫一个头疼,不过现在不用愁了,Firefox 有一款非常牛的插件:Firebug。这还是很早以前一个外国朋友告诉我的,现在估计大多数的网路开发者都已经在用这个插件,不过我想大家用的时候也这是看看会有什么错误,或者使用“Inspect”功能来看出错的代码在什么地方,可是光用这些功能真是太小看Firebug 了,它除了查找代码,还可以调试代码,尤其是AJAX用到的就更多了,下面言归正传,首先请确保你已经安装FIrebug了,如果你不清楚怎么安装的话,请看我的另一篇文章:Firebug使用详解,这里就不再赘述了,这篇主要讲一些使用方法,如果有什么错误或遗漏希望大家能帮忙给我指出. 阅读全文

    |  HTML |  [1] |  浏览: 5,192次