本文翻译自https://developers.google.com...，是chrome下调试javascript的工具和方法介绍。调试js需要结合浏览器断点操作。具体可以看我之前的文章：https://segmentfault.com/a/11...。一、调试图标概述设置断点后，需要操作相应的图标进行调试。图标如下：从左到右：Pause/Resumescriptexecution：Pause/Resumescriptexecution（程序执行在下一个断点停止）。Stepovernextfunctioncall：执行到下一步的函数调用（执行当前断点所在行，跳转到下一行并暂停）。进入下一个函数调用：进入当前函数并在第一行暂停。Stepoutcurrentfunction：跳出当前执行函数。Deactive/Activeallbreakpoints：关闭/开启所有断点（不会取消）。Pauseonexceptions：异常情况自动设置断点。Pause/Resumescriptexecution(F8)断点暂停后，点击恢复脚本执行直到下一个断点。长按该图标，会出现一个灰色的播放按钮，将鼠标上移再松开左键，所有断点将被忽略，强制渲染完整页面。Stepovernextfunctioncall(F10)当你在一行代码中暂停，并且该代码中包含一个与正在调试的问题无关的函数时，你可以点击该图标直接分析该函数，而不是进入该函数执行逐行调试操作。例如，当您调试以下代码时：functionupdateHeader(){varday=newDate().getDay();varname=getName();//更新名称（名称）；//D};functiongetName(){varname=app.first+''+app.last;//B返回名称；//C}假设它现在暂停在A。单击'Skipnextfunctioncall'图标，浏览器解析跳过的函数中的所有代码（此处为B和C），然后再次在D处暂停。进入下一个函数调用（F11）当断点找到确切的函数时调试好了，点击图标进入函数，逐行查看分析中的变量值和方法。例如：functionupdateHeader(){varday=newDate().getDay();varname=getName();//更新名称（名称）；//D};functiongetName(){varname=app.first+''+app.last;//B返回名称；//C}此时点击暂停在A点，A点是问题相关的函数，点击进入函数，会暂停在B点，再次点击会暂停在C点，而在B点的值将显示“名称”变量。跳出当前函数（Shift+F8）进入一个与正在调试的问题无关的函数后，可以点击该图标分析该函数的剩余代码，跳出该函数到下一行。例如：函数updateHeader(){varday=newDate().getDay();varname=getName();//更新名称（名称）；//D};functiongetName(){varname=app.first+''+app.last;//B返回名称；//C}现在停在B，步出后，浏览器解析getName()函数的其余部分（C），然后再次停在D。2.调试区其他函数概览运行所有代码，直到a某行如果你调试的是一个很长的函数，里面有很多和问题无关的代码，你需要区分一下。首先在函数中设置第一个断点，执行到暂停，然后，调试的方式有以下三种：1.使用stepinto函数逐行分析查看结果，会浪费很多时间；2.根据结果判断哪些是无用代码，交叉后设置下一个断点，使用resume脚本执行到下一个断点；3.根据结果，判断哪些代码没用，在下一个需要暂停的地方，右击行号，选择“继续到这里”，浏览器会直接解析到那行暂停,推荐的方法。查看当前调用堆栈当您在一行代码中暂停时，您可以在“调用堆栈”面板中查看哪些堆栈将您带到当前断点（当前函数调用了哪些函数）。调用堆栈面板是空的，除非暂停在一行代码上。如果要查看异步函数，可以勾选Async。（windows版没有这个选项，默认显示异步函数）。点击函数会跳转到调用这个函数的地方。蓝色箭头是当前查看的函数。Copystacktrace右键单击??CallStack面板并选择Copystacktrace将面板中的堆栈信息复制到剪贴板。复制信息格式如下（函数名，代码行数）：getNumber1(get-started.js:35)inputsAreEmpty(get-started.js:22)onClick(get-started.js:15)重启调用栈顶层函数在调试函数的过程中，如果想回到函数开头再次调试，可以在调用栈面板中右键点击相应的函数，选择RestartFrame一开始没有中断。CallStack面板中是断点函数和其他涉及的函数，最上面的函数是当前断点函数。例如：functionfactorial(n){varproduct=0;//Bfor(vari=1;i<=n;i++){product+=i;};退回产品；//A}现在在A处暂停，点击RestartFrame后，它会在B处暂停。忽略一个脚本或脚本模式在调试过程中，您可以选择忽略一些脚本，这些脚本不会显示在CallStack中，并且在stepin函数时不会进入被忽略的脚本。例如：functionanimate(){prepare();lib.doFancyStuff();//Arender();}A是你确认与当前问题无关的第三方库，可以黑框关闭，忽略。编辑区操作：在SourceTab中双击打开文件->在文件编辑区右击选择Blackbox脚本。CallStack面板中的操作：在CallStack面板中找到对应的脚本->右键选择Blackbox脚本。在控制台中设置黑框：在控制台右上角找到'CustomizeandcontrolDevTools'图标（或按F1）->选择Blackboxing选项卡->点击Addpattern->输入脚本名称或正则表达式对话框中的脚本名称->单击“添加”。更改线程上下文当网站有webworker或serviceworker线程时，需要分别查看主线程和这两个线程的上下文，可以在Threads面板中进行切换。上图中的蓝色箭头是当前线程的上下文，点击可以切换到其他线程。查看和编辑局部、闭包和全局属性在断点处暂停时，您可以在Scope面板中查看和编辑局部、闭包和全局范围内的属性和变量的值。不显示不可枚举的属性。双击属性值以输入新值。从任何页面运行调试代码片段如果您在调试过程中需要在控制台中反复输入相同的内容，您可以使用Snippets（代码片段）功能来减少重复工作。代码片段是您在DevTools中编写、存储和运行的可执行脚本。片段是全局的，可以在所有浏览器选项卡中找到和运行。有关详细信息，请参阅https://developers.google.com。观察自定义JavaScript表达式的值在调试过程中，如果你想专注于观察某些变量的值（而不是在Scope面板中逐层点击），你可以添加Watch面板。Watch面板中的值会在代码执行时自动刷新。“+”图标创建一个新表达式；右边是刷新图标，手动刷新变量的值；当鼠标移到变量上时，右侧会出现一个删除图标。使缩小的文件可读可以将最小化的代码恢复为人性化的形式。点击代码编辑区左下角的“{}”图标。编辑脚本如果你想尝试修复bug，你不需要切换到编辑器修改它，然后刷新当前页面。可以直接在代码编辑区修改代码并保存，查看修改后的效果。如果是最小化的代码，可以先恢复为人性化的格式。Tips：确定修改方向后，记得在编辑器代码中保存修改。操作：修改代码->按Command+S（mac）或Ctrl+S（windows,Linux）保存修改->查看效果。
