网页调试神器firebug用法

作为一个搞web开发就应该知道firebug这款调试神器。

下载方法：

首先你要有一个火狐浏览器，打开浏览器，打开浏览器菜单找到附加组件，点击进入，点击 扩展在搜索框里输入firebug搜索，安装即可。打开浏览器按发F12唤出firebug，开始调试。

要使用firebug需要掌握几个快捷键。

首先 更新你的火狐浏览器到最新版。直接按F12打开Firebug.

这里的调试网页主要以修改百度的首页。

具体用到的内容会在实际中进行。

第一 调试网络情况。

打开百度首页。

如图所示 可以点击网络标签查看 网页的详细的网络请求。

其实，我感觉最有用的就是点击下面的 XHR 标签。打开异步请求过滤。可以查看 网站的异步请求情况。包括post数据。

之后点击过滤出的请求。双击，就可以在右侧查看请求的 参数信息以及发送的cookie等。可以通过此得到请求是否完成，请求的运行情况。

可以点击上面的标签查看请求的返回状况。

如图点击响应。可以查看 这个返回的json数据。

当然也可以 编辑这个请求。测试另外一请求是否正常，这样的话，就不需要再次加载页面运行了。

第二 调试网页元素DOM。

有这样的情况。我做出一个网页，但是可能在配色或是左右上下边距上需要进行调整。那么可以通过调整元素的css值或是 属性值进行调节。

首先，如何预览整个网页的元素情况？

可以点击查看器。点击左侧的箭头，这时，可以在网页内部移动，鼠标移动到哪个元素上，会显示哪个元素的边框虚线。如图：

如果我只想查看 百度上面的一个连接。我可以在该链接上右击---->最下面的查看元素。一样可以查看该连接的CSS等情况。如图

如果我感觉 如果这个连接颜色是 黑色的话，可不可以更好一些？

那么可以右击该链接---->查看元素。

然后查看右下角的css规则（这个规则是 css定义的）点击右侧的计算。可以查看实际执行到元素的css样式（可以有利于调试于元素的css值）

恩，黑色还比较好看。

OK。如果我感觉，其实我想把连接修改一些内容和样式那么会怎样。

选中后，选中 html编辑。如图

那么修改html元素如图所示

点击上面的空白处应用修改后。

于是就如图了：

当然也可以选择元素后。双击进入修改。

第三 调试器。

调试器可以查看网页请求的js脚本以及脚本的定义，以及脚本的变量的实时值。

如图所示

当然也可以右击，弹出中选择插入断点等。

可以移动到 变量上或是对象上。查对象的所有属性以及事件以及值的情况。

如移动到nava 上，显示所有的值等信息。

如果，我想查看某个函数的定义。比如我想查看

if (navigator.userAgent.indexOf('Firefox') != -1) {

ToolbarPluginComms = initToolbarPluginComms();

中 initToolbarPluginComms（）的定义。

双击 initToolbarPluginComms（）方法选中后。（必须选中。双击即可）

右击 --- 搜索函数定义

可以查看函数的定义

如果所示找到了函数定义，可以查看具体的函数执行细节。

如果 js脚本经过了压缩和简单格式混淆。那么可以点击左侧的美化进行美化操作，如果所示。

如果想查看 脚本的运行情况。

可以点击

F11 进行单步调试。

F10 直接跳到下一个断点。

可以进入脚本信息内部。

右侧显示的是 所在的脚本内部的变量等信息可以进行实时查看。

如图所示：

可以在左上侧的调试标签中点击进行单步等调试。

好了。目前只是简单介绍了如何使用。

赞 (0)

相关推荐

  • CSS网页调试必备 让IE7与IE8共存

    关于新发布的IE8，网友们都纷纷下载来使用，尝到了功能强大的甜头；有的却因网络流传：安装后会覆盖原来的IE7，并且不能导入IE7的收藏夹的虚假消息。而使大家（特别是工作用的电脑）不敢尝试这新版的浏览器 ...

  • 25款最佳网页设计神器分享

    对于网页设计师而言，Photoshop是必不可少的工具。而事实上，Photoshop除了其原有的基础功能之外，我们还可以给PS配置许多功能强大的PS插件，这些PS插件可以让平时复杂繁琐的操作变得更加简 ...

  • 通过 Mac 远程调试 iPhone/iPad 上的网页

    我们知道在 Mac/PC 上的浏览器都有 Web 检查器这类的工具(如最著名的 Firebug)对前端开发进行调试,而在 iPhone/iPad 由于限于屏幕的大小和触摸屏的使用习惯,直接对网页调试非 ...

  • 如何在火狐上安装fireBug

    做网站的小伙伴们都知道火狐的fireBug好用,它可以帮助开发者调试网页中出现的各种错误,尤其是大家都头疼的js的调试,fireBug的出现大大提高了我们开发者的开发效率. 可是在实际中,许多初学者都 ...

  • 不能复制文字的网页文字复制怎么办（网上复制不了的文字要付费怎么办）

    不能复制文字的网页文字复制怎么办（网上复制不了的文字要付费怎么办）

    前阵子需要写篇 xxxx 感想的文章,当然,这种一般都是学校要求写的,作为高中作文在及格边缘徘徊的"好学生",写是不可能写的了,只能拿出我的 从 CV 太法,去各大网站搜索白嫖别人 ...

  • 手机怎么把网页上的视频下载下来（手机如何下载网页的视频）

    手机怎么把网页上的视频下载下来（手机如何下载网页的视频）

    想必大家都有过需要下载一部影片时候.比如在上班之前用家里网络去下一部电视剧,即可以打发通勤时间,又可以节省流量.又或是飞机起飞之前下一两部片子,打发飞机上没有网络的无聊时光.再比如躲避太多的广告.等等 ...

  • chrome浏览器使用技巧

    chrome浏览器使用技巧

    如果你要用一种工具用几年,甚至十几年,那就现在开始用它,用的烂熟,那你可以将来的工作中节省掉很大一部分的时间.来源:segmentfault我还记得 18 年的时候,有一次小组开会,当时的老大说我的工 ...

  • 小米路由器404劫持页面如何关闭?

    最近闹的比较厉害的小米路由404劫持,现在给出防止劫持的方法 方法/步骤 1.需要安装小米路由器的手机App 可以到官网下载 2.运行手机app 3.在App主界面中找到工具箱 4.在工具箱中找到 路 ...

  • 小米路由器无法连接电脑出现代码404怎么办?

    解决方法如下 首先升级小米路由器到开发版2.3.10,升级小米路由器app到开发版2.1.0然后依次打开小米路由器app--工具箱--路由器设置--关于--开启网页调试选项就可以关闭404页面了.

  • 怎么关小米路由404界面?

    方法如下: 打开小米路由器手机App,点击右下角的工具箱 点击左上角的路由器设置 点击中间的"关于" 打开"网页调试选项"的开关,此时会弹出提示,意思是打开开关 ...