初识Firebug 全文 — firebug的使用（2）
作者：zt 发布时间：2007-10-23 12:54:00
Console HTML CSS Script Dom Net
控制台 Html查看器 Css查看器 脚本条时期 Dom查看器 网络状况监视
Console 控制台
控制台能够显示当前页面中的javascript错误以及警告，并提示出错的文件和行号，方便调试，这些错误提示比起浏览器本身提供的错误提示更加详细且具有参考价值。而且在调试Ajax应用的时候也是特别有用，你能够在控制台里看到每一个XMLHttpRequests请求post出去的参数、URL，http头以及回馈的内容，原本似乎在幕后黑匣子里运作的程序被清清楚楚地展示在你面前。
象C shell或Python shell一样，你还能在控制台中查看变量内容，直接运行javascript语句，就算是大段的javascript程序也能够正确运行并拿到运行期的信息。
控制台还有个重要的作用就是查看脚本的log, 从前你也许习惯了使用alert来打印变量，但是Firebug给我们带来了一个新朋友 —— console.log, 最简单的打印日志的语法是这样的：
PLAIN TEXTCODE:
console.log("hello world")
如果你有一堆参数需要组合在一起输出，可以写成这样：
PLAIN TEXTCODE:
console.log(2,4,6,8,"foo",bar).
Firebug的日志输出有多种可选的格式以及语法，甚至可以定制彩色输出，比起单调的alert，显然更加方便，限于篇幅，这里不做详细说明，但是有志于提高debug效率的读者，可以到Firebug的官方站点（见附录）查看更详细的教程。
图2： 在控制台里调试javascript
查看和修改HTML
第一次看到Firebug强大的HTML代码查看器，就觉得它与众不同，相比于Firefox自带的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查看器
0
投稿猜你喜欢
以Python 3.x版本为主一、缩进式编码解释型：没有编译环节，直接运行执行代码显示效果缩进式编码风格：代码块不使用大括号{}包含类、函数- 1 自动微分我们在《数值分析》课程中已经学过许多经典的数值微分方法。许多经典的数值微分算法非常快，因为它们只需要计算差商。然而，他们的主要缺
- 如果 replaceText 为函数，对于每一个匹配的子字符串，调用该函数时带有下面的 m+3 个参数，此处 m 是在 rgExp 中捕获的
- 对于DBA来说，丢失超管用户root的密码是致命的，可以通过添加--ship-grant-tables参数来跳过权限表。1、忘记root密码
- 在使用ionic开发IOS系统微信的时候会有一个苦恼的问题，填写表单的时候键盘会挡住输入框，其实并不算什么大问题，只要用户输入一个字就可以立
- 目录Python的安装VS Code配置Hello World测试调用Python函数string.split()第一次尝试第二次尝试第三次
- 什么是钩子之前有转一篇关于回调函数的文章钩子函数、注册函数、回调函数，他们的概念其实是一样的。 钩子函数，顾名思义，就是把我们自己实现的ho
- insert 存在即不插入语法介绍三种方式第一种：replace intoreplace into table(id, name) valu
- github是一个项目的存储仓库，使用的时候非常的方便，下面就介绍一下管理 github 仓库的软件安装，windows 下的 git 安装
- echarts是百度推出的一款开源的基于JavaScript的可视化图表库，该开发库目前发展非常不错，且支持各类图形的绘制可定制程度高，Ec
- drop table if exists dd; create table dd ( user_id int , class_no int
- 如果是django2.0 必须下载xadmin2.0 不然很多地方不兼容xadmin2.0下载地址https://github.com/ss
- 题目：解法一：比较元素是否相等思路说明：这种应该是普通人最先想到的解法，先获取到数组之后进行有小到大排序，然后初始化一个min=0（代表新数
- 前言：我目前使用的服务器为centos6.x 系统自带的python的版本为2.6.x，但是目前无论是学习还是使用python，python
- Python是面向对象(OOP)的语言, 而且在OOP这条路上比Java走得更彻底, 因为在Python里, 一切皆对象, 包括int, f
- MySQL 自4.1版以后开始支持INSERT … ON DUPLICATE KEY UPDATE语法，使得原本需要执行3条SQL语句（SE
- MySQL中，常常会看到一些关于动态字符串的处理，列如：DYNAMIC_STRING。为了记录动态字符串的实际长度，缓冲区的最大长度，以及每
- Go 命令Go语言自带有一套完整的命令操作工具，你可以通过在命令行中执行go来查看它们：图1.3 Go命令显示详细的信息这些命令对于我们平时
- DQLDQL：data Query language 数据查询语言格式：select[distinct] 字段1,字段2 from 表名 w
- 很多时候，由于程序设计需要，要求在asp的include包含文件里调用动态的文件。如<!--#include file=&q
