Chrome开发工具 调试 JavaScript 脚本

串包含了堆栈跟踪信息：console.trace()你可以使用 concole.trace() 方法来输出当前 JavaScript 调用堆栈，这种方法可以用于检测代码：console.assert()将 assertion 加入到你的代码中也是一种不错的方法。只要调用 console.assert() 方法并将错误情况作为第一个参数即可，每当表达式的计算结果为 false 时你就会看到相应的控制台记录：在运行时使用 window.onerror 来处理异常Chrome 支持将一个处理函数设置为 window.onerror。每当一个 JavaScript 异常在窗口上下文中抛出并且没有被任何的 try/catch 块捕获的时候，该方法就会被调用。同时，异常信息、抛出异常的文件 URL 以及出现异常的位置在文件中的行号会按照上面的顺序作为三个参数传给该方法。你可能觉得像这样设置一个能够收集未捕获异常信息并且能将其报告给服务器的错误处理器非常方便。美化输出格式如果你在阅读以及调试某些过于简化的 JavaScript 代码有麻烦的时候，有一个美化输出格式的选项可以让这些过程更轻松。下面是一份简化过头的脚本文件在 DevTools 中可能显示出的样子：如果点击左边底部的花括号 图标，该 JavaScript 就会转换为更具可读性的格式。这种格式对调试和设置断点也相当方便。源映射（Source Maps）你是否期望过你的客户端代码能够保持可读性并且适合调试，甚至是你在合并以及缩小代码之后也能这样吗？那么，现在你可以感受源映射的魔力了。一个基于 JSON 格式的源映射创建了一种缩小后的代码和源代码之间的关系。下面一种简单的源映射的示例： { version : 3, file: "out.min.js", sourceRoot : "", sources: ["foo.js", "bar.js"], names: ["src", "maps", "are", "fun"], mappings: "AAgBC,SAAQ,CAAEA" }源映射是指，当你为了构建产品而缩小及合并 JavaScript 文件的时候，产生拥有源文件信息的一种映射。源映射会让 DevTools 去加载你的源文件，而不是缩小后的文件。于是你可以使用源文件来设置断点以及调试代码。同时，Chrome 实际运行的是缩小后的代码。这就让你感觉像是在运行源文件一般。使用源映射使用正确的缩小器你需要使用能够创建源映射的缩小器来缩小你的代码。Closure 编译器以及 UglifyJS 2.0 就是两款这样的工具，当然，也有其他的很多支持 CoffeeScript， SASS 等源映射的工具。具体可以参考维基百科的页面 Source maps: languages, tools and other info。设置 DevTools默认情况下，资源映射（Sourcemap）是启用的（Chrome 39 就是这样），如果你想仔细检查或者单独启用它，先打开 DevTools 然后点击设置图标 。在 Sources 选项下，查看 Enable javaScript source maps。你也可以检查 Enable CSS source maps，不过在这个例子中你并不需要这么做。让源映射（Source Map）可访问如果要让 DevTools 知道某个源映射是可用的，请验证缩小后的文件最后一行的代码是不是下面这样。//# sourceMappingURL=/path/to/file.js.map这一行通常是由生成映射的工具添加的，并且能够让 DevTools 建立缩小后的文件和源文件之间的联系。在 CSS 中，这一行可能是这样的： /# sourceMappingURL=style.css.map /.如果你不希望文件中有额外的注释，你可以使用 JavaScript 文件中的 HTTP 头来告诉 DevTools 源文件在哪里。这需要设置或者自定义 web 服务器，并且该内容超出了本篇教程的目标。X-SourceMap: /path/to/file.js.map和注释类似，该代码同样告诉 DevTools 到哪里去寻找源文件并和相应 JavaScript 文件建立关联。这个头部信息也用于解决引用源映射的语言并不支持单行注释的问题。你也应该检查你的 web 服务器是否设置好了对资源映射的支持。有些服务器，需要对每种文件都做出明确的配置，比如 Google App Engine。在这种情况下，你的源映射应该设置将 MIME 类型设置为 application/json，不过 Chrome 浏览器会接受任何类型的类容声明，比如 application/octet-stream。请看一下 Chrome 中特别构建的 font dragr tool，当源映射启用的时候，你将会注意到 JavaScript 文件并没有被编译，并且你可以看到所有被引用的 JavaScript 文件。这使用了源映射，但是后台实际运行的是编译后的代码。任何的错误、日志以及断点都会映射到开发代码中，这使得调试变得更为容易。实际上你的感觉就像是你在运行开发中的代码一样。活动中的 @sourceURL 以及 displayName源映射声明的下列部分，并不会令你在使用 evals 函数来开发时有多轻松。这个帮助器（@sourceURL）看起来类似于 //# sourceMappingURL 属性，并且实际上是在源映射 V3 规范中提及的。在你的代码中包含下面这些特殊的注释，你可以为 eval 函数及内嵌的脚本和样式命名，这样他们在你的开发工具中显示的时候就可以拥有逻辑名称。//# sourceURL=source.coffee使用 sourceURL定位到 demo打开 DevTools 并找到 Sources 面板输入一个名称来为你的代码命名点击 compile 按钮CoffeeScript 源文件会计算总值并且通过警告来输出如果你打开 Sources 的子面板，你将会看到一个拥有你之前输入的文件名的新文件。如果你双击该文件来查看详细内容，会发现该文件中含有初始源文件编译后的 JavaScript。在最后一行会有 // @sourceURL 注释，该注释表明了源文件是什么。这在通过语言抽象来调试时具有很大的帮助。