Skip to content

Latest commit

 

History

History
executable file
·
53 lines (30 loc) · 2.74 KB

ch-1-06.md

File metadata and controls

executable file
·
53 lines (30 loc) · 2.74 KB

第六章 Firebug 安装及简介

参考网页:

一、引言

这个火狐浏览器的 Firebug 插件,不记得何时何地看到的了,在调试 PHP 的时候,没有安装也没有感觉有啥不妥。但是要调试 javascript 的时候,发现浏览器没有任何反应,也不知道错误在哪里,遂安装了 Firebug 插件。编写网站的时候,主要用他来调试 javascript,其他功能暂时没有挖掘,有需要的读者可以翻阅相关资料。

二、安装

打开火狐浏览器,输入 about:addons,进入如下页面

firebug install

搜索 firebug,然后点击安装即可。请确保 firebug 的版本跟你使用的火狐浏览器兼容。

安装好后,可以在火狐浏览器右上方看到 firebug 的图标。说明安装好了。

三、使用

使用的时候,可以直接点击 firebug 的图标,图标会变亮,颜色鲜艳,不再是灰色的。并使能所有的面板,见下图

firebug enable

firebug 的功能很强大,由于本人暂时只需要调试 javascript,下面讲只介绍 javascript 的调试例子,调试其他的方法,请自行查阅相关资料。

1、调试 javascript

如下图,在下方 firebug 面板中选择 script, 然后选择需要调试的 javascript 文件,图片中选择的是 yii.gridView.js 文件中的代码作为示例。

firebug debug javascript

在需要添加断点的那行开头,点击一下,即可设置或清除断点。按下 F5 刷新页面,本栏右上方有控制继续前进,逐行或者其他操作的按钮,根据需要进行操作。右侧栏是一些变量。这样就可以实现调试了。

后语

本章的目的主要是告诉大家有 firebug 这么一个调试插件,并附带作了最简单的使用介绍。建议有需要的读者可以查阅其他资料来完善这方面的知识。

新版 firefox

新版 firefox 已经不支持 firebug 了,貌似集成在内了。点击 F12 会在下方扩展出如下的界面。

启动 Firefox 调试

其中:

  1. 右上角的按钮,可以调整调试页面的位置;
  2. 选中网络(Network),查看网络相关的调试信息;
  3. 选择所有,看到各种相关的调试信息。也可以根据需要选择不同的调试内容;
  4. 找到出问题的地方,双击打开,一般会继续扩展出新的区域,显示相关问题;
  5. 本例是 json 相关的网页,故点击各个选项查看错误信息。图中显示的是 Response 页面信息。
  6. 打开折叠页,查看错误信息。就可以根据错误信息修改代码了。