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

CSS样式表
CSS中的text-shadow属性
利用CSS3特性和浏览器中的工具进行网页设计
使用CSS3将你的网站设计推向未来
网页设计师福音:CSS网格布局生成器
CSS教程:汇总让IE6崩溃的几种方法
CSS教程:快速提升设计可读性和维护性
HTML5和CSS3给网站设计带来出色效果
CSS选择器大全
TypeSelect实现网页嵌入字体
CSS样式表尽量放到网页头部
CSS3的优势以及网页设计师如何使用CSS3技术
CSS样式表中引用图片地址在各浏览器中的差异
5种给CSS样式表瘦身减肥的方法
英文教程:50个网页制作中应用的CSS技巧
用CSS3将你的设计带入下个高度
CSS教程:新的图像替换方法
创造100%功能自适应css布局的行之有效的方法
轻松搞定IE的CSS制作网页技巧3则
网页设计应该熟知的CSS 3.0技术
制作网页常用的50种CSS工具

CSS样式表 中的 网页版Firebug


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-09   浏览: 92 ::
收藏到网摘: 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 样式。