如何用7个简单的步骤,在Firefox开发工具中调试JavaScript

本文将着重于在Firefox的开发工具中调试JavaScript代码。Firefox中的开发工具是一个非常强大的工具,可以加速您的bug查找和修复过程!

我们将要采取的步骤如下:

1、示例项目介绍。

2、分析Raygun错误报告。

3、探索开发工具的剖析。

4、向代码中添加断点。

5、单步调试代码。

6、确定应用程序的状态。

7、修复Bug !

所以,就让我们一探究竟吧!

第一步:示例项目介绍

为了演示如何使用Firefox开发工具调试应用程序,我将使用一个简单的Add Person表单。此表单允许您输入第一个、中间和姓。单击“Save”按钮,表单将进行一些处理,数据将被发送到您的(虚构的)服务器。

此表单的代码有三个功能:

单击处理程序。

大写字符串功能。

一个保存功能。

不幸的是,在一个周五的晚上把它发送到生产环境之后,您开始看到仪表板上出现了错误报告。有一个bug,你需要尽快修复它。

步骤2、分析Raygun错误报告

进入Raygun的错误报告有很多信息可以用来查找和修复错误,让我们看看我们正在处理什么。

调试错误所需的信息位于堆栈跟踪模块中。

堆栈跟踪的消息部分是错误的简要概述。在本例中,对未定义的值调用toUpperCase方法。

堆栈跟踪告诉您错误发生的位置和导致错误的函数调用序列。正如您在上面的屏幕截图中看到的,错误发生在index.js文件索引的第20行capitalizeString。

知道哪一行触发了错误,意味着您可以直接跳转到错误发生的地方,并开始挖掘导致问题的原因。

步骤3:探索开发工具的结构

第一步是在Firefox中启动应用程序并打开开发工具。您可以使用快捷键CMD-OPT-I(在OSX上)或CTRL-SHIFT-I(在Windows上)来实现这一点。

现在将在browser选项卡中打开Dev工具,控制台选项卡将是活动的。这个选项卡允许您在任何时候执行任意的JavaScript代码,或者从控制台查看任何输出。日志调用。

试着键入,alert(“hello!”);然后单击回车——你应该看到警报马上就出现了。

此选项卡的左窗格具有加载到页面的所有源文件的树视图。您可以像在IDE中那样导航这些内容,因为内容显示在中央窗格中。一旦选择了脚本,您可以使用这个窗格中的Outline选项卡来查看文件功能的概述。

右边窗格为您提供了所有调试选项,稍后我将对此进行讨论。

如果您有很多文件,可以在OSX上使用CMD-P或在Windows上使用CTRL-P进行搜索,然后开始输入文件的名称。

在应用程序中,你知道问题在于index.js文件,所以从左边的列表中选择它来查看它的内容。

步骤4:在代码中添加断点

现在你可以查看你的代码了,我们希望每次都能通过一行来查看哪里出了问题。为此,我们使用断点。断点是代码中停止执行的特定点上的标记,因此您可以在那个时间点检查代码的状态,并逐行执行。

这里有几种添加断点的方法。

行断点

可能添加断点的最常用方法是找到您想要停止的特定行,并将其添加到那里。导航到您感兴趣的文件和行,并单击行号。在这一行中会添加一个蓝色标记,每次执行到这一行代码时就会停止。在下面的截图中,它将在index.js的第7行停止。

程序化的断点

如果您不希望在IDE中方便地搜索代码,那么您还可以通过编程方式添加断点。您还可以使用这种方法有条件地引入断点,例如在循环的某些迭代中,或者如果代码在页面加载时运行,并且没有时间手动添加断点。

为此,需要添加调试器;语句位于要中断执行的位置。下面的代码将具有与上面的行断点相同的效果。

错误断点

Dev工具有一个方便的特性,当它遇到代码中的异常时将停止执行,允许您检查错误发生时发生了什么。

要启用此功能,请单击包含暂停符号的停止标志图标。启用时它将是蓝色的。

步骤5:逐步完成代码

现在我们知道了如何在代码中设置断点,我们想要遍历每一行,这样我们就可以知道哪里出错了。首先,在第7行中放置一个断点——就在Add按钮的单击处理程序中,这样我们就可以从头开始。

在前一节中,我们从Raygun错误报告中推断错误来自capitalizeString方法。这个方法被调用了三次,那么,哪个实例是罪魁祸首呢?您可以更仔细地查看堆栈跟踪,发现是来自第13行的调用导致了错误。你知道第13行与中间名值有关。因此,您应该将精力集中在通过正确设计输入来重现错误。

有了这些额外的知识,您可以填充第一个和最后一个名称字段,但是将中间的名称留空,以查看这是否会触发错误。

点击保存按钮。从这里开始,Source选项卡将打开,您可以看到断点被激活。现在可以开始逐步执行代码了。为此,在调试窗格中使用四个按钮。

继续执行您的代码,直到当前行上的下一个断点步骤,将我们移动到下一行步骤,进入到当前函数调用的下一个函数调用,回到调用堆栈一级。

你要用这些来阶跃到你的capitalizeString函数。从第7行开始,使用“Step Over”按钮,直到第13行。活动线显示为淡蓝色背景,上下有线。

现在,您可以使用“Step In”按钮移动到对capitalizeString函数的调用中。

导航调用堆栈

当您像这样浏览代码时,您可能想要跳转回父函数,以检查此时发生了什么。要做到这一点,请使用Call Stack部分,该部分列出了为在代码中到达这一点而传递的所有函数,与在Raygun错误报告中显示的调用堆栈完全相同。

您只需单击这个列表中的一个项目,您将被移回该函数。请记住,执行中的当前位置没有改变,因此使用Step Over按钮将从调用堆栈的顶部继续。

步骤6:确定应用程序的状态。

既然已经导航到错误发生的位置,我们需要检查应用程序的状态并找出导致错误的原因。

在代码继续之前,有很多选项可以用来确定变量包含的值和表达式的值。我们将依次研究每一个。

鼠标悬停

确定变量值的最简单的方法是将鼠标悬停在它上面,工具提示就会弹出该值。

观察者

您可以向监视表达式面板添加表达式,该面板在代码中移动时显示表达式的当前值。这对于跟踪更复杂的表达式随时间的变化是很方便的。

您可以通过单击面板底部的“添加监视表达式”文本来添加这些内容,您可以在其中输入要添加的表达式,然后单击enter添加它。或者,您可以选择一个表达式,右键单击它,然后选择“Add watch expression”。

作用域

scope面板显示当前范围内的变量列表及其相关值。作用域面板类似于监视表达式面板,但由开发工具自动生成。作用域面板是识别局部变量的理想工具,可以避免将它们显式地添加到监视表达式列表中。

控制台

最后,Console选项卡是一个节省时间的工具,用于检查表达式值和测试代码。只需切换回Console选项卡,键入一些代码,然后单击enter。Firefox开发工具将在当前断点的上下文中和范围内执行代码。

步骤7:修复错误。

切换到Console选项卡,让我们开始分解导致错误的行,以便使用Console选项卡修复它

首先,检查value.split(“)”的输出,这样您就可以获得第一个字符,然后调用它的toUpperCase函数。

在控制台中执行表达式value.split(")将显示它返回一个空数组——错误来自此代码!由于返回值是一个空数组,我们试图在第一个项(没有定义,因为没有项)上调用toUpperCase,从而产生错误。

您可以在控制台输入完整的表达式来验证这一点:

为了解决这个问题,你需要检查传入capitalizeStringfunction的字符串是空的还是未定义的。如果是,您需要返回一个空字符串,而不需要进行任何处理。

function capitalizeString(value){ if(!value || value.length === 0){ return ''; } return value.split('')[0].toUpperCase() + value.slice(1);}

总结

这就是Firefox开发工具中调试JavaScript的快速介绍。这是一个非常强大的工具,花时间掌握它将极大地提高您的调试技能!

不幸的是,现在Firefox在使用的方便性上比不上Chrome的水平,但是它们提供开发工具仍然是很好的调试工具。

我预计在未来几个月,这些工具的特性将会有很大的提升,以确保它们在开发工具的最前沿与Chrome竞争。

原文发布于微信公众号 - 程序你好(codinghello)

原文发表时间:2018-06-25

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏小李刀刀的专栏

[译]对《优化浏览器渲染》的补充

ISD Webteam的大布同学(twitter:@tc_bryanzhang)在2010年1月翻译了google Page Speed系列中的Optimize...

3176
来自专栏从零开始学自动化测试

Fiddler抓包7-post请求(json)

前言 上一篇讲过get请求的参数都在url里,post请求相对于get请求多了个body部分,本篇就详细讲解下body部分参数的几种形式。 一、body数据类...

2967
来自专栏java相关

非常全面的vim配置文件

1833
来自专栏计算机编程

Vue 单文件组件详解<1>--简单上手

vue 的webpack的结构非常简单,简单的一眼就可以知道每个目录下是干啥的,在components目录下就有属于我们想要详细解析的内容,这两个vue文件即为...

941
来自专栏Aloys的开发之路

Eclipse相关问题

MANIFEST.MF文件 在Eclipse的.classpath和runableX.jar中的MANIFEST.MF文件中都指定了可依赖jar包的顺序,所以只...

2826
来自专栏知晓程序

开发 | 只需 10 分钟,教你做一款查询类小程序

在全局配置文件中,我们定义了一个页面。保存之后,将会自动生成 index 页面的基本目录。

1093
来自专栏有趣的django

Django搭建blog网站(一)

一、前言 1.1.环境 python版本:3.6 Django版本:1.11.6 1.2.预览效果 最终搭建的blog的样子,基本上满足需求了。框架搭好了,至于...

8518
来自专栏陈树义

Wins批处理基本语法

在Windows平台下,批处理可以和Wins系统很好地结合,处理一些简单的任务,比如:重复删除某种类型的文件;开机执行一些特定的命令等。 本文主要介绍批处理的基...

36510
来自专栏云计算教程系列

如何在Ubuntu 14.04上使用Ansible部署多个PHP应用程序

本教程是关于在Ubuntu 14.04上使用Ansible部署PHP应用程序的系列文章中的第三篇。第一个教程涵盖了部署应用程序的基本步骤; 在第二个教程介绍更高...

1050
来自专栏微信终端开发团队的专栏

XCode基本使用及调试技巧

对于初学iOS开发的同学,了解了Objective-C的基本使用后,最关心的应该是如何把OC程序运行起来。由于Xcode的基本使用比较简单,所以本文着重介绍一些...

6287

扫码关注云+社区

领取腾讯云代金券