Chrome开发工具 技巧和窍门

一个表达式编辑区域。把你需要的条件写在这里（比如：如果表达式的返回值为真，则断点将会在这里停止）一个普通的表达式可能是这个样子：x === 5，然而 console.log 声明同样是完全有效的输入。这个方法十分有效，并且我们也可以轻易的看见在断点上调用的 console.log 语句：由于 console.log 没有一个真正的返回值，不确定的条件断点不会导致执行被暂停，你的代码将继续运行。这非常像一个通过硬编码来执行 console.log 表达式而不直接修改你的代码。更多：JavaScript 断点活动 | randomthink.net格式化 JavaScript开发者工具支持格式化精简后的 JavaScript 以便阅读。要格式化，你需要：进入 Sources 面板，然后从脚本列表中选择你想要格式化脚本。然后点击在开发者工具底部的格式化按钮(用大括号来标记)你的代码应该已经排版好了格式化之前：格式化之后：重点观察一个表达式或者一个变量的值在一次调试会话中，为了避免重复编写一个你要多次查看的变量或者表达式，你可以把它添加到 “Watch Expression” 列表中。当你修改它们之后可以刷新或者直接运行代码来查看改变后的效果。查看内部属性假设你定了一个变量，其值为 s 并且对它执行下面的操作：s.substring(1, 4) // returns 'ell'你认为 s 是一个字符串么？事实上不一定。它也可能是一个字符串对象的包装。试试看下面的观察表达式："hello"Object("hello")第一个是字符串常量，第二个是一个完整的对象。令人困惑是，这两个值几乎是一模一样的。但是第二个有一个真正的属性，你也可以自行设置。展开属性列表你就会注意到，它为什么不是一个完整的对象：它会有一个内在的属性 [[PrimitiveValue]],这里面存储着字符串原本的值。你并不能通过你的代码来访问这个属性，但是你现在可以通过开发者工具的调试工具来查看它。更多： 通过开发者工具学习 Javascript 概念 | GitHub简化调试 XHRs从调试器中打开 "XHR 断点"选项，当开始一个 XHR 请求时你可以指定你的代码跳入任何一个 URL (甚至是一个子字符串)。甚至是告诉它加载每一个 XHR 时都中断。取消注册在元素上的事件处理器随着 “Element” 标签的打开，找到在 DOM 树中的元素，然后点击要选择的节点。注意：你也可以通过使用控制台 API 中的 getEventListener(targetNode) 来实现。在右侧，点击展开 “Event Listeners” 选项。在那里你会找到所有注册在元素上的事件监听列表。Esc 键显示控制台当在 Sources 面板中调试的时候，你有时候会希望同时进入控制台。这时你只需要简单的点击下 escape 键就可以打开控制台了。你可以在这个控制台编写执行 JavaScript 来查看预期效果，但是更好的地方是如果你在一个断点初暂停，已经执行的 JS 将会在当前暂停的上下文中。提升在断点处暂停时的效率当你的脚本在一个断点处暂停时，会有一些有用的参数供你使用。你可能会知道通过 “Continue”，“Step Over”,"Step Into" 以及 “Step Out” 来控制代码的执行，但是这些按钮都有键盘快捷键。学习这些会让你的在代码中导航时更加高效。观察表达式（在侧边栏的右侧）将会将会监视表达式，所以你不必总是跳回控制台（例如 X===Y）。调用堆栈显示了从系统开始运行一直到当前位置时经历过的函数调用。在 Scope Variables，你可以在任何函数上右键然后使用 “Jump to definition” 来进入定义这个函数的脚本内部。DOM 断点展示了任何在元素面板中右键一个节点时使用 “Break on” 做出的更改。这对调试监听器是否已经正确的添加到节点上以及当他们被调用时发生了什么很有帮助。XHR 断点面板也同样十分有用，因为它可以为 XMLHttpRequests 设置断点。通过输入一个你想要查看 URL 子字符串来具体说明断点。在异常中暂停你可能想在抛出一个异常的时候暂停 JavaScript 的执行，并检查调用栈，范围变量和您的应用程序的状态。在脚本面板的顶部有一个暂停按钮,它可以让你选择不同的异常处理模式。你可能不想暂停所有的异常，除非你正在调试的代码是被 try/catch 包裹着的。全部脚本文本上的搜索如果你想在所有加载在一个页面上的文件中查找一个指定的字符串，你可以通过下面的快捷键调用搜索面板：Ctr + Shift + F（Windows,Linux）Cmd + Opt + F（Mac OSX）这个搜索同时支持正则表达式和区分大小写。通过开发者工具和源映射调试 CoffeeScript源映射提供了一个语言无关的方法来将编译过的工程代码映射到你原来的开发环境中编写的源代码。当分析产品代码的时候，代码通常已经被缩小过（以防一个语言被翻译成编译过的 JavaScript），这就使你很难找到哪一行代码是映射到你原本的代码中的。在编译阶段，源映射（source map）可以保存这个信息以允许你调试产品代码，并且会将你原本文件中的行号返回给你。这使得整个世界都不同了，因为你可以再阅读产品代码的同时进行调试了，不管它是在 CoffeeScript 中或是其它分位置 - 只要它具有一个源映射，你就可以轻松调试。要在 Chrome 中启用源映射：打开 Setting cog > General选择 “Enable source maps”下面：要将你的 CoffeeScript 编译到 JavaScript，执行这条命令：coffee -c myexample.coffee安装 CoffeeScript Redux创建一个源映射文件 example.js.map ，这个文件应该保存映射信息：$ coffee-redux/bin/coffee --source-map -i example.coffee > example.js.map确保生成的 JavaScript 文件，example.js，在最后一行已经有映射到源文件的 url，就像这样：//# sourceMappingURL=example.js.map当你开始调试你的 CoffeeScript 代码的时候，应该感谢这个声明，是它让开发者工具知道了你的源文件在哪里。然后，您可以利用这个源映射，在您的优化 / 缩小阶段使用类似 UglifyJS2 的工具引用第一个源映射（ CS 到 JS ），并把它所映射的简化后的 JavaScript 文件返回到 CoffeeScript 上，而不是直接传给编译后的 JavaScript 的输出位置。这就允许你直接调试产品代码，并且改动会直接返回到 CoffeeScript 源代码中。更多：NetTuts-Source Maps 101更多有用的创作工作流程技巧，请转到创作和开发工作流程:在这里你可以学习如何优化你的开发工作流程以节省一些常规操作所花的时间，比如定位到文件或者某个函数，持续编辑脚本或样式表以及简化调整布局的过程。学习有关新