专题课程
1.查看和修改HTML代码
Html面板的强大之处就是能查看和修改HTML代码，而且这些代码都是经过格式化的。下面以我的一个浏览器主页来做讲解。
在页面中蓝色部分表示元素本身，紫色表示padding部分，黄色表示margin部分。同时可以实时地添加、修改和删除HTML节点以及属性，如下图所示。另外，单击script节点还可以直接查看脚本，此处的脚本无论是内嵌在HTML中还是外部导入的，都可以查看到。同样这也适用于<style>标签内嵌或者导入的CSS样式和动态创建HTML代码。
在HTML控制台的左侧可以看到整个页面当前的文档结构，可以通过单击“+”来展开。当单击相应的元素时，右侧面板中就会显示出当前元素的样式、布局以及DOM信息。而当光标移动到HTML树中相应元素上时，上面页面中相应的元素将会被高亮显示。
例如，将光标移动到一个<P>标签上，显示效果如下图所示：
在HTML控制台的左侧可以看到整个页面当前的文档结构，可以通过单击“+”来展开。当单击相应的元素时，右侧面板中就会显示出当前元素的样式、布局以及DOM信息。而当光标移动到HTML树中相应元素上时，上面页面中相应的元素将会被高亮显示。
例如，将光标移动到一个<P>标签上，显示效果如下图所示：
2.查看(Inspect)
利用查看(Inspect)功能，可以快速地寻找到某个元素的HTML结构，如图：
当单击”Inspect”按钮后，用鼠标在网页上选中一个元素时，元素会被一个蓝色的框框住，同时下面的HTML面板中相应的HTML树也会展开并且高亮显示。再次单击后即可退出该模式，并且底部的HTML树也保持在这个状态。通过这个功能，可以快速寻找页面内的元素，调试和查找相应代码非常方便。刷新网页后，页面显示的仍然是用Inspect选中的区域。
HTML面板下方的“编辑”按钮可以用于直接编辑选中的HTML代码，而后面显示的是当前元素在整个DOM中的结构路径。
3.查看DOM中被脚本更改的部分
通过JavaScript来改变样式属性的值可以完成一些动画效果。打开页面后，利用查看(Inspect)功能来选择相应的HTML代码，例如，选中“要闻”，如下图所示：
单击“国内”标签后，出现下图所示效果：
通过上图可以看出，HTML查看器会将页面上改变的内容页记录下来，并以黄色高亮表示。有了这个功能，网页的暗箱操作将彻底成为历史。我们可以使用该功能查看其它网站的动画效果是如何实现的。
4.查看和修改元素的样式
在右侧的样式面板中，展示了此元素当前所有的样式。所有的样式都可以实时地禁用和修改，如下图所示，通过在”text-align:center”前单击会出现禁用的标记，这样就可以禁用此规则。通过直接在样式value值上单击就可以修改。
单击“布局”面板即可看到此元素具体的布局属性，这是一个标准的盒模型。通过“布局”面板，可以很容易地看到元素的偏移量、外边距、边框、内边距和元素的高度、宽度等信息，如下图所示：
5.查看DOM的信息
单击“DOM”面板后可以看到此元素的详细的DOM信息以及函数和事件，如下图所示：
这3个面板相对于前面2个面板比较次要，CSS和DOM面板与HTML面板中右侧的面板功能相似，但不如HTML面板灵活，因此一般使用得很少。
CSS面板特有的一个功能就是可以分别详细查看页面中内嵌以及动态导入的样式。如下图所示：
单击CSS面板后就可以分别查看相应的样式。此处展开的样式都是经过格式化的，适合于学习CSS的代码格式和规范。
而在网络面板中，相对有一些强大的功能，例如打开某个网站首页，Firebug显示效果如下图所示：
该页面可以监视每一项元素的加载情况，包括脚本，图片等的大小以及加载用时等，对于页面优化有着极其重要的意义。
此外，顶部还可以分类查看元素的HTML、CSS、JS等的加载情况，使分析更加灵活。
脚本面板不仅可以查看页面内的脚本，而且还有强大的调试功能。
在脚本面板的右侧有“监控”、“堆栈”和“断点”三个面板，利用Firebug提供的设置断掉的功能，可以很方便地调试程序，如下图所示：
1.静态断点
例如test.html文件，代码如下：
运行代码后可以看到下图所示效果。图中加粗并有颜色的行号表示此处为JavaScript代码，可以在此处设置断点。比如在第6行这句代码前面单击一下，那它前面就会出现一个红褐色的圆点，表示此处已经被设置了断点。此时，在右侧断点面板的断点列表中就出现了刚才设置的断点。如果想暂时禁用某个断点，可以在断点列表中去掉某个断点的前面的复选框中的勾，那么此时左侧面板中相应的断点就从红褐色变成了红灰褐色了。
设置完断点之后，我们就可以调试程序了。单击页面中的“Click Here”按钮，可以看到脚本停止在用谈黄色底色标出的那一行上。此时用鼠标移动到某个变量上即可显示此时这个变量的value。显示效果如下：
此时JavaScript内容上方的
四个按钮已经变得可用了。它们分别代表“继续执行”、“单步进入”、“单步跳过”和“单步退出”。
继续执行<F8>：当通过断点来停止执行脚本时，单击<F8>就会恢复执行脚本。
单步进入<F11>：允许跳到页面中的其他函数内部。
单步跳过<F10>：单击<F10>来直接跳过函数的调用即跳到return之后。
单步退出<shift+F11>：允许恢复脚本的执行，直到下一个断点为止。
单击“单步进入”按钮，代码会跳到下一行，显示效果如下：
从上图可以看出，当鼠标移动到“lab”变量上时，就可以显示出它的内容是一个DOM元素，即“div#messageLabel”。
此时将右侧面板切换到“监控”面板，这里列出了几个变量，包括“this”指针的指向以及“lab”变量。单击“+”可以看到详细的信息。显示如下：
2.条件断点
在“lab.innerHTML+=arr+”<br />””这行代码前面的序号上单击鼠标右键，就可以出现设置条件断点的输入框。在该框内输入“arr==5”，然后回车确认，显示效果如下：
最后单击页面的“Click Here”按钮。可以发现，脚本在“arr==5”这个表达式为真时停下了，因此“5”以及之后的数字没有显示到页面中。下图分别是正常效果和设置了条件断点之后的显示效果对比：
收藏(0)
赞 
粤公网安备44010602001432号