内容概要:

学会使用firebug的基本功能

1. 简介:Firebug是Firefox的一个插件,用来对js代码进行调适的工具。

(官方废话:Firebug是firefox下的一个插件,可以调试全部站点语言,如Html,Css等,但FireBug最吸引我的就是javascript调试功能,使用起来非常方便,并且在各种浏览器下都能使用(IE,Firefox,Opera, Safari)。除此之外,其它功能还非常强大,比方html,css,dom的查看与调试,站点总体分析等等。总之就是一整套完整而强大的 WEB开发工具。再有就是其为开源的软件。)

2.安装 Firebug

第一步,点击 Firefox 浏览器上的“工具”选项,然后点击“附加软件”,在弹出的小窗体中,点击右下角的“获取扩展”选项

第二步,在点击“获取扩展”选项后,打开的页面中搜索 Firebug,在搜索结果的页面中,下载 Firebug 。须要注意的是,Firebug 的版本号要与 Firefox 的版本号相兼容。假设要查看自己 Firefox 的版本号,可通过点击浏览器“帮助”选项下“关于 Mozilla Firefox ”选项。

第三步,安装好,重新启动浏览器就可以。

3.Firebug 调试功能

快捷键一:当你输入document.get之后,按下tab键就能补齐为document.getElementById,很方便。假设你觉得补齐得不够理想,按下shift+tab又会恢复原状

快捷键二:直接在浏览器输入F12就可以直接打开firebug调适工具

进入正文:

功能一,Console 窗体的使用。 Console 窗体除了显示页面载入的文件以外,还能够直接显示页面中的代码错误和一些输出信息。

Console 窗体中输出调试信息。 Firebug 支持的调试语句较为经常使用的是 console.log 。

比方:

console.debug("I am debug");
console.info("I am info");
console.warn("I am warn");
console.error("I am error");

有 Javascript 经验的读者可能会习惯于使用 alert() 进行调试信息的输出,可是笔者觉得将调试信息在 Console 窗体中输出是一个更优的选择。首先,假设页面有非常多alert(), 则点击“ OK ”让弹出框消失也是一个非常烦人的事情。其次,假设调试信息的量非常大,则是用
alert() 的弹出窗体将无法良好的完整展示调试信息。接着,alert() 无法查看对象和数组的细节信息。最后,假设在一个循环中使用alert(), 将非常easy造成页面“死掉”。

功能二,HTML 窗体的使用。在 HTML 窗体中能够查看到页面的源码。除了能够查看页面的源码外,还能够使用 Firebug 的编辑功能直接对页面进行编辑。

在处于 HTML 窗体的模式下,点击 Edit button,将切换查看模式到编辑模式。须要注意的是,在使用 Edit 模式前,最好先提前选中页面的 body 代码区块。

在 Edit 模式下,须要注意的是,在页面新加完代码后,须要点击一下页面的其他不论什么地方,则其效果才会在页面上载入。

功能三,HTML 模式下的 Style,Layout,DOM 三窗体

在 HTML 窗体模式下,与 HTML 窗体相相应,在其右边有 Style,Layout,DOM 三个用于查看页面相应部分相关属性的窗体。当选中页面中的某个部分时,Style 显示选中部分的 CSS 属性,Layout 显示 CSS 的盒式模型,DOM 显示其选中部分的全部 DOM 对象。结合使用 Inspect 功能能够方便选择页面中所须要关注的部分。

功能四,Script 窗体的使用。 Script 窗体支持对 Javascript 的断点调试。

功能五,DOM 窗体和 Net 窗体的使用。 DOM 窗体主要显示的是页面中的全部对象,及其所包括的属性和方法。 Net 窗体主要是显示当前页面中所载入的各个文件的大小和载入各个文件所花费的时间。

Dojo第一节:学会使用firebug对js,Dojo进行调适的更多相关文章

  1. JAVAscript学习笔记 js事件 第一节 (原创) 参考js使用表

    <!DOCTYPE html> <html lang="en" onUnload="ud()"> <head> <me ...

  2. Ext JS学习第十六天 事件机制event(一) DotNet进阶系列(持续更新) 第一节:.Net版基于WebSocket的聊天室样例 第十五节:深入理解async和await的作用及各种适用场景和用法 第十五节:深入理解async和await的作用及各种适用场景和用法 前端自动化准备和详细配置(NVM、NPM/CNPM、NodeJs、NRM、WebPack、Gulp/Grunt、G

    code&monkey   Ext JS学习第十六天 事件机制event(一) 此文用来记录学习笔记: 休息了好几天,从今天开始继续保持更新,鞭策自己学习 今天我们来说一说什么是事件,对于事件 ...

  3. seajs第一节,seajs基本使用

    什么是seajs,它是干什么使用的,可以去网上搜索一下, 官网:http://seajs.org/docs/ 基本使用seajs <!DOCTYPE html> <html> ...

  4. 辛星跟您玩转vim第一节之vim的下载与三种模式

    首先值得一提的是,我的vim教程pdf版本号已经写完了,大家能够去下载,这里是csdn的下载地址:点此下载 ,假设左边的下载地址挂掉了,也能够自行在浏览器以下输入例如以下地址进行下载:http://d ...

  5. 第一节:.Net版基于WebSocket的聊天室样例

    一. 说在前面的话 该篇文章为实时通讯系列的第一节,基于WebSocket编写了一个简易版聊天样例,主要作用是为引出后面SignalR系列的用法及其强大方便之处,通过这个样例与后续的SignalR对比 ...

  6. Ionic 入门与实战之第二章第一节:Ionic 环境搭建之开发环境配置

    原文发表于我的技术博客 本文是「Ionic 入门与实战」系列连载的第二章第一节,主要对 Ionic 的开发环境配置做了简要的介绍,本文介绍的开发环境为 Mac 系统,Windows 系统基本类似,少许 ...

  7. 第一节 JavaScript概述

    第一节 JavaScript概述 JavaScript:其实就是对HTML+CSS静态页面进行样式修改,使其实现各种动态效果. 编写JS脚本基本步骤: 1. HTML+CSS静态布局: 2. 确定要修 ...

  8. ASP.NET MVC深入浅出(被替换) 第一节: 结合EF的本地缓存属性来介绍【EF增删改操作】的几种形式 第三节: EF调用普通SQL语句的两类封装(ExecuteSqlCommand和SqlQuery ) 第四节: EF调用存储过程的通用写法和DBFirst模式子类调用的特有写法 第六节: EF高级属性(二) 之延迟加载、立即加载、显示加载(含导航属性) 第十节: EF的三种追踪

    ASP.NET MVC深入浅出(被替换)   一. 谈情怀-ASP.NET体系 从事.Net开发以来,最先接触的Web开发框架是Asp.Net WebForm,该框架高度封装,为了隐藏Http的无状态 ...

  9. webpack第一节(1)

    跟着慕课网的老师做了下笔记 webpack是一个前端打包工具 它可以优化网页.例如 页面模块化加载.图片优化.css.js压缩等等. 模块化加载也就是懒加载,按需加载,以前的模式是所以得css写在一起 ...

随机推荐

  1. 原生js大总结一

    001.浅谈堆和栈的理解?   js变量存储有栈存储和堆存储,基本数据类型的变量存储在栈中,引用数据类型的变量存储在堆中 引用类型数据的地址也存在栈中   当访问基础类型变量时,直接从栈中取值.当访问 ...

  2. stm32的dma缓冲区长度,,存放数据数组会不会冲掉

  3. 如何在vue项目中使用百度编辑器ueditor

    百度编辑器官方并没有提供vue项目使用说明,目前网上也有不少人实现了相关功能,这里就不再重复,只是针对自身项目碰到的情况做个记录,就当是熟悉了一遍富文本编辑器的代码结构. 按照网上的做法,基本可以实现 ...

  4. (转)chrome浏览器收藏夹(书签)的导出与导入

    导出chrome浏览器的书签到一个文件中.首先选择chrome浏览器的书签管理器菜单.然后点击“整理”,然后选择“将书签导出到html文件”. 步骤阅读 2 将导出的html文件保存,用于下次导入,这 ...

  5. 【例题 6-7 UVA - 122 】Trees on the level

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 二叉树的话,直接用数组存就好了. 写个bfs记录一下答案. [代码] #include <bits/stdc++.h> ...

  6. ng build --base-href的设定问题

    项目构建部署中遇到的问题: 1.不使用hash,如何解决刷新页面404的问题? 说明: root  指定项目地址路径,默认为nginx下的html index  默认访问index文件 try_fil ...

  7. C语言编程程序的内存怎样布局

    在c语言中,每一个变量和函数有两个属性:数据类型和数据的存储类别. C语言中局部变量和全局变量变量的存储类别(static,extern,auto,register) 1. 从变量的作用域划分变量(即 ...

  8. 每天一个JavaScript实例-处理textarea中的字符成每一行

    <!doctype html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  9. Linux开发环境搭建与使用系列教程

    00.Linux开发环境搭建与使用1——Linux简史 01.Linux开发环境搭建与使用2——Linux系统(ubuntu)安装方案 02.Linux开发环境搭建与使用3——通过虚拟机安装系统(ub ...

  10. [转] Valgrind使用

    http://www.cnblogs.com/napoleon_liu/articles/2001802.html 调不尽的内存泄漏,用不完的Valgrind Valgrind 安装 1. 到www. ...