翻译 Secrets of the JavaScript Ninja 边译边学（7）

Secrets of the JavaScript Ninja 边译边学（7）

2.1 Debugging Code
2.1 调试代码

Remember when debugging JavaScript meant using alert() to verify the value of
variables? Well, the ability to debug JavaScript code has dramatically improved in the last
few years, in no small part due to the popularity of the Firebug developer extension for
Firefox.
还记得以前调试JavaScript代码就意味着使用alert()来验证变量的值的那个时代吗？好吧，最近几年调试JavaScript代码的技术能力已经大大提高，这在很大程度上得益于火狐开发者为火狐开发的扩展程序的流行。

  Similar tools have been developed for all major browsers:
  现在所有主流的浏览器上都已经开发了类似的工具：

• Firebug: The popular developer extension for Firefox that got the ball rolling. See http://getfirebug.org/
• IE Developer Tools: Included in Internet Explorer 8 and 9.
• Opera Dragonfly: Included in Opera 9.5 and newer. Also works with Mobile versions of Opera.
• WebKit Developer Tools: Introduced in Safari 3, dramatically improved in Safari
4, and now in Chrome.

• Firebug: 火狐最受欢迎的开发者扩展使这一切成为可能。 见http://getfirebug.org/
• IE Developer Tools: IE 8和9包含了这一工具。
• Opera Dragonfly: Ppera9.5及其以后版本包含了这一工具。 Opera的移动版本中也包含这一工具。
• WebKit Developer Tools: Safari 3包含这一工具, Safari 4中大大改善, 如今它也存在于Chrome浏览器。

  There are two important approaches to debugging JavaScript: logging and breakpoints. They are both useful for answering the important question “What’s going on in my code?”, but each tackling it from a different angle.
  调试JavaScript有两种重要方法：日志记录和断点。它们对于回答“我的代码中发生了什么”这一重要问题都很有用。但这两种方法是从不同的角度来处理的。

  Let’s start by looking at logging.
  让我们先来看看日志记录。

2.1.1 Logging
2.1.1 日志记录

Logging statements (such as using the console.log() method in Firebug, Safari, Chrome and IE) are part of the code (even if perhaps temporarily) and useful in a cross-browser sense. We can write logging calls in our code, and we can benefit from seeing the messages in the console of all modern browsers (with the exception of Opera).
日志记录语句（例如在Firebug，Safari，Chrome和IE中使用语句console.log()）是代码的一部分（即使只是暂时的），在跨浏览程序中很有用。我们可以在代码中编写日志调用，然后通过查看在console控制台中输出消息即可受益（Opera除外）。

  These browser consoles have dramatically improved the logging process over the old ‘add an alert’ technique. All our logging statements can be written to the console and be browsed immediately or at a later time without impeding the normal flow of the program – something not possible with alert() .
  相比老式的add和alert调试技术，这些浏览器控制台大大提高了日志记录效率。所有在语句中写入的日志信息都会写入控制台，立即或稍后展示出来，而且不会影响整个程序的运行-alert()语句不行。

  For example, if we wanted to know what the value of a variable named x was at a certain point in the code, we might write:
  例如，如果我们想知道在代码某处名为x的变量的值，我们可以写下：
  console.log(x);

  If we were to assume that the value of x is 213, then the result of executing this statement in the Chrome browser with the JavaScript console enabled would appear as shown in figure 2.1.
  假定x的值为213，那么在JavaScript控制台可用的Chrome浏览器中，执行这条语句的结果显示如图2.1所示：

  Because Opera chose to go its own way when it comes to logging, implementing a proprietary postError() method, we’ll get all suave and implement a higher-level logging method that works across all modern browsers as shown in Listing 2.1.
  Opera在日志记录方面使用它自己特有的方式，实现了专有的postError()方法，为了包容所有的浏览器不同的日志记录方式，我们在清单2.1中实现一个高级日志记录方法，该方法适用于所有当今广泛使用的浏览器：

  In this method, we first try to log a message using the method that works in most modern browsers (#1). If that fails, an exception will be thrown that we catch (#2), and then try to log a message using Opera’s proprietary method (#3). If both of those methods fail, we fall back to using old-fashioned alerts (#4).
  在这个方法中，我们首先尝试调用大多数现代浏览器支持的日志记录方法(#1)。如果失败，我们会捕捉到一个异常(#2),然后我们尝试调用Opera的专用日志记录方法(#3)。如果这些方法都失败了，我们调用老式的日志记录方法alert()。

  NOTE Within our method we used the apply() and call() methods of the JavaScript Function to relay the arguments passed to our function to the logging function. These Function methods are designed to help us make precisely controlled calls to JavaScript functions and we’ll be seeing much more of them in chapter 3.
  注意 在上述方法中，我们使用JavaScript中apply()和call()方法传递参数。这些函数方法的设计目标是帮助我们精确调用JavaScript方法，我们会在第三章看到更多这样的函数。

  Logging is all well and good to see what the state of things might be as the code is running, but sometimes we want to stop the action and take a look around.
  日志记录确实不错，它可以让你看到代码运行时状态，但是有时我们又希望在某处停下来看看各种参数的状态。

  That’s where breakpoints come in.
  这就需要断点出场了。

2.1.2 Breakpoints
2.1.2 断点

Breakpoints, a somewhat more complex concept than logging, possess a notable advantage over logging: they halt the execution of a script at a specific line of code, pausing the browser. This allows us to leisurely investigate the state of all sorts of things at the point of the break. This includes all accessible variables, the context, and the scope chain.

断点是一个比日志更复杂的概念，具有显著的优势：它们在特定的代码行停止继续执行脚本，使浏览器处于暂停状态，这允许我们可以在断点位置从容不迫，不慌不忙地查看各种运行时状态。包括所有可访问的变量、上下文和作用域链。

  Let’s say that we have a page that employs our new log() method as shown in listing 2.2.
  假设我们有一个页面使用了新的log（）方法，如清单2.2所示。

  If we were to set a breakpoint using Firebug on the annotated line (#1) in listing 2.2 (by clicking on the line number margin in the Script display) and refresh the page to cause the code to execute, the debugger would stop execution at that line and show us the display in figure 2.2.
  如果我们在清单2.2所示的代码标记行(#1)上设置一个断点(通过在Script页面的行号旁点击可以打断点)，刷新页面让代码重新执行一遍，调试器会在断点那一行停止执行并向我们展示如图2.2所示的页面：

  Note how the rightmost pane allows us to see the state within which our code is running, including the value of x .
  注意最右侧窗格如何向我们展示代码运行过程中的变量状态，其中包括x的值。

  The debugger breaks on a line before that line is actually executed; so in this example,
the call to our log() method has yet to be executed. If we were to imagine that we were
trying to debug a problem with our new method, we might want to step into that method to
see what’s going on inside it.
  调试器在断点那一行尚未执行时停止；所以在这个例子中，程序暂停时自定义的log函数还没有被调用。试想一下，如果我们想调试自定义的log方法中的问题，我们可能希望进入该方法看看里面到底发生了什么。

  Clicking on the “step into” button (left-most gold arrow button) causes the debugger to execute up to the first line of our method, and we’d see the display of figure 2.3.
  点击"单步进入调试(step into)"按钮（最左侧金色箭头按钮）则直接进入自定义方法的第一行开始调试，如图2.3所示。

  Note how the displayed state has changed to allow us to poke around the new state within which our log() method executes.
  注意显示的状态值是如何改变的，以便允许我们查看log函数执行时内部各种运行时状态值。

  Any fully featured debugger with breakpoint capabilities is highly dependent upon the browser environment in which it is executing. For this reason, the aforementioned developer tools were created as the functionality provided by them would not be otherwise possible. It is a great boon and relief to the entire web development community that all the major browser implementers have come on board to create effective utilities for allowing debugging activities.
  任何具备断点工具的功能齐全的调试器都高度依赖于运行它的浏览器环境。所以，前面提到的开发工具都是浏览器自己提供的功能，否则，其他第三方工具根本不可能实现那些调试功能。所有主要的浏览器实现者都创建了允许调试活动的实用工具，这对于整个web开发行业来说是一个巨大的实惠和宽慰。

  Debugging code not only serves its primary and obvious purpose (detecting and fixing bugs), it also can helps us achieve the good practice goal of generating effective test cases.
  调试代码不仅仅提供其主要的，显而易见的的功能（推测和解决bug），还借助生成有效测试用例的方式帮助我们实现最佳实践目标。