β

使用firebug练习js

老崔博客 147 阅读

最近在读《JavaScript: The Definitive Guide》,书中有很多小的js练习,每次都创建一个js文件,然后在html里面调用会很不方便。所以就可以用浏览器的调试工具里的console直接写一些小的js,运行就可以立即看到效果了。

Chrome的调试工具

我们可以随便打开一个网页,然后打开Chrome的调试工具,选择console选项卡,然后就可以输入一些js语句,而且带有IDE的智能提示功能,按Tab就能自动补全。按下Enter就可以立即看到结果了。

chrome console
chrome console

但是使用chrome的console有一个缺点,就是只能输入一些简单的语句,如果要输入函数,不可避免的就要换行,按下Shift+Enter可以换行,但是仍然没有自动缩进。虽然也可以把函数都输在一行,但是我的强迫症习惯让我忍受不了乱糟糟的代码。

所以有一个更强大的工具可以满足我们经常输入函数的需求,又能够很美观优雅的完成任务,这就是Firefox下赫赫有名的Firebug插件,web工程师不可或缺的一款插件。

Firebug调试js的快捷键

首先去Firefox的扩展中心安装好Firebug插件,然后随便打开一个页面,右键,选择使用Firebug查看元素,然后选择控制台选项卡,就可以在这里练习js了。

firebug console
firebug console

随便在右边的框中输入些js, 然后点击运行就可以得到结果了,还可以键盘点击快捷键 Ctrl+Enter 得到结果,然后点清除,就可以重新输入一些js了,这里有点小波折。我想找到这里的清除js代码的快捷键,这样每次写完js后就可以键盘点击 Ctrl+Enter 得到结果,然后键盘点击清除的快捷键重新输入,于是去网上搜了搜,没有得到答案,只是得到了Alt+R可以清空左边的框中的输出信息,但是我想清除的是右边的框中的输入代码。

于是我又去StackOverflow去搜了搜,没找到结果,不过找到一个回答里引用了Firebug官网文档里的快捷键页面,于是我官网的快捷键页面找了找,试了几个快捷键,终于找到了。其实Firebug的选项卡里有可以快速链接到官网的快捷键页面的。
2015-06-10_151431
这个清除console里输入的js代码的快捷键就是 Esc ,官方的描述这个快捷键的作用是Close Command Line Popup,不过我试了试确实可以清空输入的js代码。

这样就完美的解决了我们的痛点,我们可以手不离开键盘来练习js了,每次写完js,直接按下 Ctrl+Enter 来运行,然后按 Esc 来清空重新输入。Firebug还可以自定义某些快捷键,在Firebug的选项卡里可以找到。

Firebug的强大

用Firbug来写js解决了很多Chrome调试工具里的短板,例如更好的格式,更美观的源码,更大范围的输入等等。
2015-06-10_152352

总之,用firebug来做一些平常的练习非常方便,事不宜迟,来试试吧!

作者:老崔博客
岁月如歌,代码如诗
原文地址:使用firebug练习js, 感谢原作者分享。

发表评论