Firebug高级用法 - Web开发的利器

Firebug是一个Firefox插件，是Web开发的利器。从此处下载。工具用好了能大大提高开发效率。下面介绍一些用法：

查看编辑HTML和CSS，查看DOM

两个方法，一个是在新窗口中打开Firebug，然后鼠标移动到Firebug某元素，页面某元素会相应高亮，右边显示对应CSS，DOM和布局等。第二个方法是在页面某元素点击右键“查看元素”，直接打开Firebug并定位到该元素。

监测网站和网页访问速度和时间消耗占比

首先要打开“网络”控制台，

点击“网络”，监测和分析网站和网页的访问速度和时间占比。也能看到装载的所有资源(Css, JS, 图片，Flash等)，点击相应的过滤器可以分类；或者使用搜索。

查看函数的执行效率

启用控制台，点击“概况”开始收集，再次点击停止。

另外在该窗口下部，输入JS语句回车即可执行，很方便。

查看XMLHttpRequest

这对调试AJAX是很有帮助的。打开控制台，如果是AJAX程序，自动会选择监控XMLHttpRequest。

调试页面上JS

调试外部JS

一种方法是先打开控制台，点击里面的JS打开，然后设置断点，继续运行网站会停在断点处：

设置断点并调试外部JavaScript：

其它方法：使用基于Firebug的Yslow扩展，或者安装另一个Firefox插件：JavaScript Debugger。

Console中运行一段JS代码

使用console，还可以测试一段代码或者函数的执行时间，点击命令行最右侧的红色按钮切换到命令行多行模式：

代码输入完后点下方的“运行”。

输出对象结构：console.dir :

按缩进格式输出一段HTML结点的内容: console.dirxml(anyDOMNode) :

分组输出内容: console.group() – console.groupEnd()

记录某一个时间戳: console.time(slugName) - console.timeEnd(slugName)

视频：Chrome开发人员工具的12个用法

参考：

调试JavaScript错误的有效方法 - 利用firebug

Firebug高级用法 - Web开发的利器相关推荐

Go书籍大全-从初级到高级以及Web开发
原文链接:GitHub - dariubs/GoBooks: List of Golang books 原文作者:Dariush Abbasi 1. 前言我使用Go开发已经有一年左右时间了,由于有C ...
webscraper多页爬取_Web Scraper 高级用法——Web Scraper 抓取多条内容 | 简易数据分析 07...
这是简易数据分析系列的第 7 篇文章. 在第 4 篇文章里,我讲解了如何抓取单个网页里的单类信息: 在第 5 篇文章里,我讲解了如何抓取多个网页里的单类信息: 今天我们要讲的是,如何抓取多个网页里的多 ...
pythonweb开发-Web | 浅谈用Python进行Web开发
Web开发这样一个大概念,对我这种小白来说,想学也不知道从哪下手.在网上广泛地浏览了一下这个方面的文章后,我发现当今Web开发的一大热门语言是Python(最大的当然还是PHP),而恰好我平常用Pyt ...
Web入门开发【一】- Web开发介绍
欢迎来到霍大侠的小院,我们来学习Web入门开发的系列课程. 首先我们来了解下这个课程能学到什么? 1.你将可以掌握Web网站的开发全过程. 2.了解基础的HTML,CSS,JavaScript语言. ...
Web开发与设计之Google兵器谱-Web开发与设计利器
Google 的使命是 Web,在 Google 眼中,未来的一切应用都将 Web 化,一直以来,Google 为 Web 开发与设计者推出了大量免费工具,让他们更好地创建,维护,改善他们的 Web ...
SAP UI5 应用开发教程之六十 - SAP UI5 地图控件的一些高级用法试读版
一套适合 SAP UI5 初学者循序渐进的学习教程教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 应用开发教程之一:Hello World SAP UI5 应用开发教程之二:SAP U ...
[Web开发] Web程序调式的利器 - Fiddler (HTTP协议监视工具)
在做Web开发的时候,了解你的Web程序和IE如何通讯是非常有用的,尤其是做Web程序的性能优化.Fiddler 就是这么一个HTTP协议调试利器,它由微软IE开发组的一个工程师开发,可以帮助你全面分 ...
SAP UI5 应用开发教程之七十七 - SAP UI5 动态页面路由的高级用法：路由记录 routes 和 target 的一对多关系试读版
一套适合 SAP UI5 初学者循序渐进的学习教程教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 应用开发教程之一:Hello World SAP UI5 应用开发教程之二:SAP U ...
Windows上最全wsl2使用配置，包含基础配置、高级配置、开发工具、机器学习环境配置、机器人与自动驾驶环境配置（如Ros及百度的无人驾驶系统apollo）、服务器及Web开发环境配置等等
Windows上最全wsl2使用配置,包含基础配置.高级配置.开发工具.机器学习环境配置.机器人与自动驾驶环境配置(如Ros及百度的无人驾驶系统apollo).服务器及Web开发环境配置等等. 文章比 ...

Firebug高级用法 - Web开发的利器

Firebug高级用法 - Web开发的利器相关推荐

最新文章

热门文章