当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > 网页版Firebug

CSS样式表
CSS Expression 优化
CSS 网页布局时常犯的10个小错误整理
CSS代码 解决网页挂马问题
CSS去除表格的默认间距并且制作1px的细线表
CSS的私有属性小结(针对FireFox浏览器)
CSS网页设计中的解决方案
Firefox和IE通用的三则网站重构实用技巧
CSS解决文字环绕图片问题
CSS教程:可扩展圆角标签的实现方法
CSS教程:水平对齐(text-align)
写给刚刚接触web标准的新人们
CSS教程:盒模型(BOX Model)
CSS教程:CSS中的定位(position)
Web标准真的是标准吗?
从四个方面谈谈Web标准的价值所在
CSS教程:网页表单设计技巧
CSS Hack整理
CSS教程:网页文本渐变
CSS教程:用dl dt dd来制作列表
CSS入门教程:计算CSS盒模型宽和高

CSS样式表 中的 网页版Firebug


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-09   浏览: 81 ::
收藏到网摘: n/a

Firebug 可以说是 FF 最强大的插件之一,它不但可以查看 xhtml 代码、CSS 代码、JS 代码、DOM 结构,还可以临时修改这些代码,是开发不可缺少的利器。这也许您早已知道,但网页版的 "Firebug" 你听说吗?其实也不是 Firebug 了,而是类似于 Firebug ,功能也没有真正的 Firebug 那么强大,仅可以用来查看网页 DOM 结构和一些 CSS 样式。虽然功能不多,但在某些情况下、某些时候已经够了,特别值得一提的是:它可以在多种浏览器:IE 、FF 、Chrome 中正常运行,除了 Opera ,所以在某些时候还是用的上滴。看看效果吧:

网页版Firebug

那这东西在哪呢?下面的代码就是了:

javascript:function%20loadScript(scriptURL)%20{
%20var%20scriptElem%20=%20document.createElement('SCRIPT');
%20scriptElem.setAttribute('language',%20'JavaScript');
%20scriptElem.setAttribute('src',%20scriptURL);
%20document.body.appendChild(scriptElem);}
loadScript('http://westciv.com/xray/thexray.js');

用法:

1、复制上面的代码(并把它改成一行,我把它换行是为了防止代码过长而自动隐藏了);

2、打开个网页,等它加载完;

3、在地址栏粘贴刚才复制的代码;

4、出来一个黑框框了吧,OK,可以用了,用鼠标点击某个地方,就能显示DOM 结构和一些 CSS 样式。