Chrome开发工具 调试 JavaScript 脚本

Pause On Caught Exceptinos 复选框Raise exception!程序应该在 raiseAndCatchException 函数中停止点击 Continue 按钮或者按 F8 来继续执行在未捕获的异常处暂停点击 Pause on exceptions 按钮取消勾选 Pause On Caught Exceptions 复选框Raise exception!此时若捕获了异常，程序应该不会在 raiseAndCatchExcep 函数处停止Raise uncaught exception!此时应该在 raiseException 函数处停止点击 Continue 按钮或者按 F8 来继续执行在 DOM 变化事件上的断点右键点击下面的 "Parent Element" 并且从文本菜单中选择 Inspect Element（审查元素）function appendChildButtonClicked() {var parentElement = document.getElementById("parent");var childElement = document.createElement("div");childElement.setAttribute("style", "border: 2px solid; padding: 5px; margin: 5px; text-align: center; width: 120px");childElement.textContent = "Child Element";parentElement.appendChild(childElement);} Parent Element 右键点击 Elements 面板元素然后选择 Break on Subtree ModificationsAppend child!此时应该会在 appendChild 函数调用处停止点击 Continue 按钮或者按 F8 来继续执行XHR 上的断点点击 Sources面板右侧的 XHR Breakpoints 边栏上的 Add 按钮在文本输入去输入 "data.txt" 然后单击回车Retrieve data.txt by XHR此时应该在send 函数调用处停止右键点击新创建的断点然后选择 Remove Breakpoint点击Devtools 窗口中的 Continue 按钮或者按 F8 来继续执行提示：要编辑 URL 过滤器，双击 XHR Breakpoints 边栏的 XBR 断点，具有空的 URL 过滤器的 XHR 断点会匹配任何 XHR。JavaScript 事件监听器上的断点打开右边 Scripts 面板的 Event Listener Breakpoints 边栏展开 Mouse 选项选中 mouseout 前的复选框可以设置 mouseout 事件监听器断点将你的鼠标移动到下面的的盒子中window.addEventListener("load", onLoad, true);function onLoad() { var hovermeElement = document.getElementById("hoverme"); hovermeElement.addEventListener("mouseover", hovermeMouseOver, true); hovermeElement.addEventListener("mouseout", hovermeMouseOut, true);}function hovermeMouseOver(event) { event.target.style.backgroundColor = "grey";}function hovermeMouseOut(event) { event.target.style.backgroundColor = "white";} Hover me! 此时应该在 mouseout 事件处理器处停止点击 Continue 按钮或者按 F8 来继续执行提示：下列事件是支持的 Keyboard：松开按键，按下按键，输入文字 Mouse：点击，双击，鼠标键按下，鼠标键松开，鼠标悬浮，鼠标移动，鼠标从元素上离开。 Control：重新设置大小，滚动，缩放，焦点，失焦，选择，变化，重置 Clipboard：复制，剪切，粘贴，beforecopy，beforecut，beforepaste Load：加载，卸载，废除，出错。 DOM Mutation：DOMActivate，DOMFocusin,DOMAttrModified，DOMCharacterDataModified，DOMNodeInserted，DOMNodeInsertedIntoDocument，DOMNodeRemoved，DOMNodeRemovedFromDocument，DOMSubtreeModified，DOMContentLoaded Device：面向设备，设备运动。长按恢复执行当暂停的时候，点击并且不放开恢复按钮可以让 ”所有的暂停都阻塞 500 毫秒后恢复“。这会让所有的断点在半秒内都无法使用，可以使用该方法进入到下一个循环中，这样就可以避免为了退出循环而不断让断点继续执行。专业建议：当使用 DevTools 启动“刷新”的时候（焦点在 DevTools 的时候使用 Ctrl + R），全部暂停都会被禁用，直到新的页面开始加载（或者作为备用方案，直到用户按下 “Pause” 按钮）。然而，如果你从浏览器的按钮来启动刷新操作的时候（或者当焦点在 DevTools 之外的时候使用 Ctrl + R），将会命中所有剩余的断点。这实际上可对那些对页面卸载过程感兴趣的人非常有用。实时编辑在创作和工作流章节中，我们讨论了怎么通过 Source 面板来对脚本进行修改。在断点处，同样也可以通过点击主编辑面板来做出修改，并且能够实时修改脚本文件。定位到 Google Closure hovercard demo在源面板中，打开 “mouse.js” 然后使用 Ctrl/Cmd + Shift + O 来定位到 onMouseOut() 函数点击暂停按钮来暂停调试修改函数，在末尾加入 console.log('Moused out')使用 Cmd + S 或者 Ctrl + S 快捷键可以保存更改，记得确认是否保存点击 pause/resume 按钮来恢复执行当你的鼠标离开相关位置的时候，控制台会输出信息这允许你在不退出浏览器的情况下通过使用 DevTools 来保存修改的内容。异常让我们现在来看一下怎么处理异常以及如何利用 Chrome 的 DevTools 使用堆栈追踪。异常处理是对于出现的异常的响应 - 除了有些需要特定处理过程的情况 - 并且一般会改变 JavaScript 代码执行的正常流程。注意：如果是 Web 开发者并且希望获得最新版的 DevTools，你需要使用 Chrome Canary追踪异常当程序出现异常的时候，你可以打开 DevTools 控制台（Ctrl + Shift + J/Cmd + Option + J），然后你会发现有许多 JavaScript 出错信息。每条信息都指出了相应的文件名以及行号，你可以通过这些信息来定位到源代码中的相关位置。查看异常追踪栈导致出错的执行路径可能会有多条，并且究竟是哪一条出现了错误并不明显。只要 DevTools 窗口是打开的，控制台中出现的异常状况都会伴随着完整的 JavaScript 调用堆栈而出现。你可以展开这些控制台信息来查看堆栈信息并定位到代码中的相应位置：在 JavaScript 出现异常时暂停你可能希望下一次 JavaScript 发生异常的时候能够暂停 JavaScript 的执行并查看它的调用堆栈、范围变量以及应用程序的状态。Script 面板底部的暂停按钮（）允许你在不同的异常处模式之间切换，且该按钮具有三种状态：你可以选择在所有的异常发生时都暂停程序运行或者只是在未捕获的异常发生时暂停程序运行或者是忽视所有的异常。打印堆栈信息在 DevTools 中输出的日志信息对于理解应用程序的执行过程非常有帮助，你可以在日志信息中包括相关联的堆栈跟踪信息来使它更加有用。想要做到这一点有多种方式。Error.stack每个 Error 对象都有一个名为 stack 的字符串属性，该字符