重新介绍火狐开发者工具(1):Web控制台和Javascript调试器

导读:在这个系列文章的第一篇,我们主要关注火狐浏览器中开发工具的特点和我们现在的使用情况。这篇文章的主要目的是向你展示工具提供的各种可能特点、进度和我们的需求。

Firefox4见证了Web控制台这个新的开发工具的诞生。自那时起,我们不断地在这个开发工具中增加更多的功能,这使得web控制台在广泛地发挥着作用,同时在Firefox桌面、Firefox OS和Firefox for Android的调试和分析起着不可替代的作用。

cola1

在这个系列文章的第一篇,我们将着眼于自Firefox 4浏览器以来便有的开发工具。每一个工具我们将用一个简短的屏幕截图来进行介绍,同时为了让读者能够更多地了解相应的工具,我们将展示一些其他的截图来配合讲解特定的流程模式。这些图片包括基于实际应用的手机开发、警告和CSS调试等屏幕截图。

在第一篇文章我们介绍的是Web Console 和 Javascript Debugger。

Web Console

Web Console主要用于展示与当前加载网页相关的信息。这些信息包括HTML、CSS、JavaScript、安全警告(Security warnings)和错误信息,另外网络请求(network requests)会被展示出来,Web Console 还会显示这些请求成功与否。当Web Console 探测出网页中的错误和警告时,它会给出指向引起错误的代码的链接。通常情况下,Web Console 是调试Web应用程序的第一站。

webconsole

Web Console 允许开发者在网页中执行JavaScript代码。这意味着开发者可以在网页范围内定义类然后执行实例化后的类方法,并且可以通过CSS选择器来访问特定元素。

视频简介:https://www.youtube.com/watch?v=C6Cyrpkb25k

通过查看 MDN Web Console  的文档可以获得更多地信息。

 

JavaScripter Debugger JS 调试器

JavaScripter Debugger 用于调试和精炼Web 应用程序中网页部分的JavaScript 代码。这个调试工具可以在Firefox OS 、Firefox for Android 和 Firefox Desktop 三种环境下使用来对代码进行调试。它是个功能齐全的调试工具,包含了如观察表达式、局部变量变化、设置断点、条件表达式、跳过、返回和执行到结尾等功能。另外开发者可以在网页加载过程中暂停应用程序,改变变量数据来观察执行效果。

debugger

 

JS 调试器介绍视频:https://www.youtube.com/watch?v=sK8KU8oiF8s 

想要了解更多有关JavaScript Debugger的信息,可以通过查看 MDN Debugger 的文档来获取信息。

 

了解更多

上面的这些内容让我们快速的了解了一下这些工具的一些特点,如果想知道这些开发工具的全部特点,请点击查看MDN工具文档。

尽请期待

在下一篇的系列文章中我们将深入讲解样式编辑器(Style Editor)和便签(Scratchpad)。请在下面的评论中给出您的反馈,让我们了解到哪方面的特点是您亟需了解的。

收藏 2 评论

关于作者:riverphoenix

(新浪微博:@邢毅勋) 个人主页 · 我的文章

相关文章

可能感兴趣的话题



直接登录
最新评论
跳到底部
返回顶部