CoffeeScript 什么是调试

在编写代码时，遇到错误是一件非常常见的事情。错误可以是许多类型，如逻辑错误、运行时错误、语法错误、编译错误等。解决这些错误是调试的一部分。基本上，调试是软件测试过程的一部分，有助于评估和验证错误。

CoffeeScript调试： CoffeeScript是一种编译为JavaScript的编程语言。简而言之，这意味着在将其发送到浏览器之前，它先被编译为JavaScript。

它指的是在代码中检测和排除错误。在CoffeeScript调试中，我们需要了解我们可以调试编译后的JavaScript代码，而不是原始的CoffeeScript代码。调试的一个著名解决方案是使用JavaScript中的源映射来解决。这在最新版本的Google Chrome和其他基于Chromium的网站中效果最好。

源映射是做什么的？ IDE中的源映射是在JavaScript代码之外生成的，它对应于CoffeeScript代码和JavaScript代码之间的行。在某些情况下，如果没有源映射，断点无法被识别和正确计算。通过使用类型为CoffeeScript的文件监视器（插件），手动编译CoffeeScript可以生成源映射。这使您可以像Node.js应用程序那样调试输出的JavaScript代码。此调试仅在本地模式下受支持，可以在RubyMine、VsCode等平台上进行。

以下是一些CoffeeScript调试的方法： 我们讨论了两种主要的CoffeeScript调试方法：

方法1：使用Node Inspector：

如前所述，源映射有助于解决为Web设计的CoffeeScript的故障排除。现在，我们将学习如何调试为服务器设计的CoffeeScript。步骤如下：

步骤1： 首先，我们将安装Node Inspector NPM模块。Node Inspector原生支持源映射，因此不需要额外的配置，我们可以通过使用命令来简单地启动调试。安装命令如下：

npm install -g node-inspector

CoffeeScript 什么是调试

步骤2： 为了编译CoffeeScript代码，使用Node Inspector，我们将使用 coffee 命令。这将对调试和生成源代码映射很有帮助。让我们通过一个简单的源代码文件geeks.coffee的示例来深入理解：

Javascript

for i in [1..15] 
 if i % 2 is 0 
   console.log "#{i} is a even!"
 else
   console.log "#{i} is a odd!"

步骤3： 现在，我们需要将我们的CoffeeScript代码编译为JavaScript代码。这是必须的，因为在将代码发送到浏览器之前，需要将其编译为JavaScript。我们将使用以下命令将我们的文件编译为Node Inspector可用的形式：

coffee -c -m geeks.coffee

CoffeeScript 什么是调试

步骤4： 编译完 CoffeeScript 之后，我们需要使用安装好的 Node Inspector 来调试我们的文件。因此，要启动 Node Inspector，我们将使用以下命令：

node-debug geeks.js

CoffeeScript 什么是调试

现在，让我们讨论接下来会发生什么。当我们运行Node Inspector时，会发生两件事情：首先，它启动Node调试器；其次，它启动一个HTTP处理程序。 Node debugger 是一个与Node一起提供的调试服务/内置服务，它允许我们逐行查看代码、设置断点并评估变量。启动 HTTP处理程序 打开了一个浏览器，允许我们使用Chrome的内置调试工具来使用断点、逐步执行代码并评估变量。我们可以看到输出结果作为一个具有活动断点的Chrome窗口。在右侧的局部变量工具窗口中，我们可以看到 i的当前值为2：

CoffeeScript 什么是调试

方法2：逐行调试CoffeeScript代码：

要逐行编译CoffeeScript代码，我们必须在需要的地方设置断点。为了调试它，我们需要使用CoffeeScript类型的文件监视器将CoffeeScript代码编译成Javascript，并创建Node.js运行配置。我们需要按照以下步骤进行：

第一步： 让我们来举一个示例。我们将使用通过npm打包的Coffeescript编译器（来编译所取示例）。这将是我们调试的初始步骤。最新版本的Google Chrome和其他chromium网站都原生支持源映射。所取的示例如下所示：

Javascript

eat = (food) -> 
console.log food 
eat(food) for food in ['toast','cheese','wine'] when food isnt 'cheese'

第二步： 接下来我们需要编译我们的源代码映射，这样我们就能够设置断点、逐行调试代码、命中行代码以及检查变量。现在，为了编译源代码映射，我们需要使用 -m 参数。

coffee -cm geeks.coffee

CoffeeScript 什么是调试

第三步： 上述命令（编译源代码映射）将创建两个文件 – geeks.js 和 geeks.map。为减少困难，编译器将在 JavaScript 文件（geeks.js）中提供一个注释，以指示浏览器在哪里找到源代码映射文件。

/*
//@ sourceMappingURL=geeks.map
*/

第四步： 现在，我们的下一个任务是加载我们的JavaScript文件（换句话说，编译后的CoffeeScript文件）。要加载它，请创建一个HTML文件（并将JavaScript文件加载到其中）。

HTML

<html> 
  
<head> 
    <script type='text/javascript' src='geeks.js'></script> 
</head> 
  
<body> 
    <h1>CoffeeScript Debugging</h1> 
</body> 
  
</html>