firebug小技巧s

最近这几年,企业应用的前端很火,呵呵……

本来不想掺和进来,可是实在禁不住前端这百般撩拨。

实际上前端的发展与进步也离不开浏览器的支持,而对于开发人员来讲,浏览器最好的支持,就是对于debug的良好支持,甚至在某些后续接手的项目中,前端的debug甚至可以解决好多问题……不说了,都是泪啊!还是说下firefox下的firebug吧。虽然ff内置一个调试的功能,但是,感觉不完善,对于开发人员来讲,根本不够用,于是ff下还是推荐firebug,老牌的前端debug工具,好用!而IE、Chrome都有很不错的工具支持,基本够用,但是用惯了ff的我,还是坚挺在firebug下。

1、使用“debugger”关键字快速断点调试

正常如果我们想debugger下js代码,先进入“脚本”面板,然后找到要调试的js文件,最后在你需要调试的行,打上断点,最后刷新页面,如下图:

有没有更快速的断点方式呢?那就是使用“debugger”关键字快速断点调试,接着往下看。
在你要调试的代码行前面,加一行”debugger;”,
然后刷新下页面。断到点了!是不是很方便,你无须再切换到脚本,再花心思找对应的调试脚本,这里我们只需要加个debugger;即可,放心,脚本不会报错,当然你正式发布脚本的时候,务必把debugger;关键字去掉哦。

2、快速定位指定行的代码

比如我要快速定位到第122行的代码,你可以如下操作。
在搜索框上输入“#122”,就可以找到指定行的代码了!在我所使用的firebug1.12.8中,右上角的搜索栏有灰色的文字描述说明哦。

3、只显示起作用的css属性

这功能说实话,怎么说呢,有时候看起来不那么痛苦吧!

要不然右侧一堆删除号,感觉有点乱。

当勾选第一项“仅显示应用的样式”时,只显示起作用的样式,未起作用的样式会被忽略掉,不再显示的(对于debug这个选项各有利弊,看个人情况)。

4、如何查看hover的css属性
加了hover属性的容器,鼠标滑过,在HTML面板右侧会出现hover属性,但你移开就没有了,如果你希望在面板中保留hover属性,看下图:

选中“:hover”即可。

5、循环体内的特例调试

调试循环体,有个很杯具的地方,在循环内部打个断点,循环20次,会触发20次断点……这很愁人,影响调试效率,其实我们只需要调试循环第2次的情况。

右击断点处,会出现一个蓝色的弹出层,让你输入监控表达式,这时候输入i == 2,再按“F8”,你就会发现直接跳到第二次循环了。

6、向控制台输出日记消息

在你的代码上输出个“36ria.com”,如下:
1.    console.log(‘36ria.com‘);
2.    console.error(‘36ria.com‘);
使用console.log的效率,个人觉得还是比原始的alert()来的高的,关键是console.log()不会中断程序执行。

7、利用命名行工具,快速定位对象

个人感觉这是最有用的功能之一。好多时候,通过这东西,立马就能看到想看的内容。

直接在命令行输入某个变量的变量名,可以在控制台看到其中详细的信息。

firebug小技巧s

时间: 2024-10-05 20:36:11

firebug小技巧s的相关文章

JS firebug小技巧

实际上前端的发展与进步也离不开浏览器的支持,而对于开发人员来讲,浏览器最好的支持,就是对于debug的良好支持,甚至在某些后续接手的项目中,前端的debug甚至可以解决好多问题--不说了,都是泪啊!还是说下firefox下的firebug吧.虽然ff内置一个调试的功能,但是,感觉不完善,对于开发人员来讲,根本不够用,于是ff下还是推荐firebug,老牌的前端debug工具,好用!而IE.Chrome都有很不错的工具支持,基本够用,但是用惯了ff的我,还是坚挺在firebug下. 1.使用"de

做预解释题的一点小方法和小技巧

在JavaScript中的函数理解中预解释是一个比较难懂的话题.原理虽然简单,寥寥数言,但其内涵却有深意,精髓难懂.如何在轻松活跃的头脑中将它学会,现在针对我在学习中的一点小窍门给大家分享一下,希望能给大家一些帮助: 万事需遵循"原理"--"预解释"无节操和"this"指向:(可先看例题解析然后结合原理进行学习) (感谢蕾蕾老师给归纳的预解释无节操原理:) 如果函数传参数则先于以下执行,就相当于在函数私有作用域下var了一个变量:根据作用域原理,

给你一个云端的大脑01:印象笔记小技巧

我在上课时,很多学员们给我的反馈都是:老师你讲的太精彩啦,但我记不住.我最重视的就是学员的反馈,因为我是一个完美主义者,凡事既然做就要做到最好.而学员就像我的一面镜子,反馈是我改进的方向. 很久以前,我听到这样的反馈第一反应就是自己还是讲得不够好,但后来我的讲课都能hold住全场300多人的时候,我发现这个反馈仍然频繁出现,这不是我的问题而是学员们不会学习的问题,这样的学员在工作中也是缺乏自我培养的能力. 所以从今天起,我的平台又加入一个主题:给你一个云端的大脑.告诉你如何记笔记,如何整理大脑记

思科命令配置小技巧三:alias 命令

大家都用过手机上的快捷拨号设置 思科设备是否支持命令的快捷键定义呢 答案是肯定的 suzhouxiaoniu(config)#alias exec xx show ip inter bri  xx是自定义的快捷键名称,可以是数字 suzhouxiaoniu#xx 直接敲定义好的名称Interface                  IP-Address      OK? Method Status                ProtocolFastEthernet1/0          

思科命令配置小技巧四:用ACL控制debug 输出

使用debug命令可以帮助我们TS,但是使用debug命令往往会输出一大堆信息,很多是我们不需要用的,也会造成CPU高负荷,这种情况下我们可以限制debug的输出 可以应用ACL到debug以限定仅输出要求的debug信息. 如仅查看从1.1.1.1到1.1.1.2的ICMP包: Router(config)# access-list 100 permit icmp host 1.1.1.1 host 1.1.1.2 Router# debug ip packet detail 100 思科命令

在Axure中使用FontAwesome替换你的网站图标[axure小技巧]

你是不是还在为你的网站做一个很小的图标而忙碌着?你是不是还在为找一个图标导出百度或者谷歌?你有没有想过可以用字体来做一个图标代替普通的图片图标?这两天给公司做案例,由于自己又对设计不熟悉,寻找图标的苦差可不是很好做.同事分享了一个用字体代替图片做网站图标的资源,在此非常感谢!Font Awesome,原只为Bootstrap而设计的字体图标,不过,现在你可以单独用它来为你的网站工作.丢掉图片图标吧,跟我一起来用Font Awesome. 使用方法: 1. 下载 Font Awesome 官方网站

Fiddler小技巧-测试上传文件接口&多参数并传情况

写了多年的API了,fidder还真是方便至极相对于postman来说. 两种常用方式: 抓包:app通过代理方式,就可以在pc端看到fidder的请求了 因为会监控好多跟我们需要的没关系的HTTP请求, 就要开启过滤了 主动调试API&上传文件参数&其它参数 拷贝点击"upload file"上传之后自动生成的body然后修改: ---------------------------acebdf13572468 Content-Disposition: form-da

移动端样式小技巧

平时在移动端开发拼页面的过程中总会遇到一些问题,主要是各手机webview样式显示效果不一致造成的.以下总结了一些常见坑和一些小技巧,希望对看官有所帮助! 本文只针对两大手机阵营 Android和IOS 中的魅蓝metal 和 iPhone6进行样式对比. 一.line-height line-height经常用于文字居中,当然也有小伙伴会用上下padding去写.but!不管你用padding还是line-height,不同手机显示效果还是-不一样. 一般会这样写 .demo{ height:

Windows Phone开发(8):关于导航的小技巧

前文用几个例子对导航做了简单介绍,在一般应用中,使用上一篇文章中说到的方法,其实也够用了,不过,为了能够处理一些特殊的情况,有几个小技巧还是有必要了解一下的. 一.到底该不该设置"后退"操作?因为手机的硬件层就有一个"回退"按钮,按理说我们不需要在程序中再添加什么回退按钮之类的,不过,还是有必要看看如何手动加入回退功能. 1.新建一个WP应用项目.2.除默认的主页外,新建一个页面Page2.xaml.3.在主页上放一个按钮,编写Click事件处理代码,导航到Page