>

如何调试Javascript,控制台调试技巧

- 编辑:澳门新葡亰平台游戏 -

如何调试Javascript,控制台调试技巧

Chrome控制台 如何调试Javascript

2015/01/12 · JavaScript · Chrome

原文出处: ctriphire   

上面的文章已经大致介绍了一下console对象具体有哪些方面以及基本的应用,下面简单介绍一下如何利用好chrome控制台这个神器好好调试javascript代码(这个才是我们真正能用到实处的地方)

1、先说一下源码定位

大家打开测试网页   看到页面右下方有一个推荐的图标吗?右击推荐图标,选择审查元素,打开谷歌控制台,如下图所示

图片 1

我们现在想知道votePost方法到底在哪?跟着我这样做,在Console面板里面输入votePost然后回车

图片 2

直接点击上图标红的链接,控制台将定位到Sources面板中,展示如下图所示

图片 3

大家看了上面这个图片之后估计头都要晕了吧,这么多js都整在一行,让人怎么看呀,不用担心,按下图操作即可(也就是点击中间面板左下方的Pretty print就行了)

图片 4

这时我们再回到Console面板时会惊奇的发现原来的链接后面的1现在变成91了(其实这里的数字1或者91就是代表votePost方法在源码中的行号 )现在看出Pretty print按钮的强大之处了吧

知道了怎么样查看某一个按钮的源码,那接下来的工作便是调试了,调试第一步需要做的便是设置断点,其实设置断点很简单,点击一下上图所示的92即可,这时你会发现92行号旁边会多了一个图标,这里解释一下为什么不在91处设置断点,你可以试下,事实上根本就没法在91处上设置断点,因为它是函数的定义处,所以没法在此设置断点。

图片 5

设置好了断点后,你就会在右边Breakpoints方框里看到刚刚设置的断点。

我们先来介绍一下用到的调试快捷键吧(事实上我们也可以不用下表所示的快捷键,直接点击上图所示右侧栏最上层的一排按钮来进行调试,具体用哪个按钮,把鼠标放到按钮上方一会就会显示它相应的提示)

 

快捷键 功能
F8 恢复运行
F10 步过,遇到自定义函数也当成一个语句执行,而不会进入函数内部
F11 步入,遇到自定义函数就跟入到函数内部
Shift + F11 步出,跳出当前自定义函数

其中值得一提的是,当我们点击“推荐”按钮进行调试的时候会发现,不管我们是按的F10进行调试还是按F11进行逐步调试,都没法进行$.ajax函数内部,即使我们在函数内部设置了断点也没有办法进入,这里按F8才是真正起效果的,不信你试试。

当我们在调试的时候,右侧Scope Variables里面会显示当前作用域以及他的父级作用域,以及闭包。你不仅能在右侧 Scope Variables(变量作用域) 一栏处看到当前变量,而且还能把鼠标直接移到任意变量上,就可以查看该变量的值。

用图说话(哈哈)

图片 6

 

刚刚我们介绍的只是在html里面能够看得到它绑定了onclick事件,这样我们就找到它绑定的js函数,如果它是在jQuery页面加载完成函数里面绑定的,这时候我们怎么知道它绑定的是哪个js函数呢,如果我们不知道绑定的js函数就更加不用说调试进去了

下面介绍一下如何查看,还是以刚刚那个测试网页为例子吧,但是这次我们来看“提交评论”作说明吧,

右击“提交评论”–>审核元素,我们可以清楚的看到在这个按钮上未绑定任何事件。在Console面板内输入如下代码

JavaScript

function lookEvents (elem) { return $.data ? $.data( elem, "events", undefined, true ) : $._data( elem, "events" ); } var event = lookEvents($("#btn_comment_submit")[0]); // 获取绑定的事件

1
2
3
4
function lookEvents (elem) {
    return $.data ? $.data( elem, "events", undefined, true ) : $._data( elem, "events" );
}
var event = lookEvents($("#btn_comment_submit")[0]); // 获取绑定的事件

如下图所示:

图片 7

按照上述介绍的方法定位到具体的blog-common.js里面,找到postComment  然后一层层的找到具体的代码,再设置断点就好了。

最后介绍一下一个神器,很好用的debugger

如果你自己写的代码,你执行的时候想让它在某一处停下来,只要写上的debugger就好了,不信你试试!哈哈

赞 1 收藏 评论

图片 8

来源:    感谢作者分享~~·

此文章翻译自developers.google.com/web/tools/chrome-devtools/javascript/reference,是对 chrome 下调试 javascript 的工具和方法介绍。

这篇文章是根据目前 chrome 稳定版(19.0.1084.52 m)写的, 因为 google 也在不断善chrome developer tool, 所以 chrome 版本不同可能稍有差别. 一些快捷键也是 windows 上的, mac 下的应该大同小异.

调试 js 需要结合浏览器断点操作,具体可见我的上一篇文章: 使用断点调试代码。

常规的断点相关的 breakpoint/conditional-breakpoint/call-stack/watch-expressions 等就不涉及了.


1. Beautify Javascript

js 文件在上线前一般都会压缩下, 压缩的 javascript 几乎没有可读性, 几乎无法设定断点. 在 Scripts 面板下面有个 Pretty print 按钮(这种符号 {}), 点击会将压缩 js 文件格式化缩进规整的文件, 这时候在设定断点可读性就大大提高了.

图片 9

图片 10

打上断点之后,需要操作对应图标进行调试,图标如下:

2. 查看元素绑定了哪些事件

在 Elements 面板, 选中一个元素, 然后在右侧的 Event Listeners 下面会按类型出这个元素相关的事件, 也就是在事件捕获和冒泡阶段会经过的这个节点的事件.

在 Event Listeners 右侧下拉按钮中可以选择 Selected Node Only 只列出这个节点上的事件

展开事件后会显示出这个事件是在哪个文件中绑定的, 点击文件名会直接跳到绑定事件处理函数所在行, 如果 js 是压缩了的, 可以先 Pretty print 下, 然后再查看绑定的事件.

图片 11

图片 12

3. Ajax 时中断

在 Scripts 面板右侧有个 XHR Breakpoints, 点右侧的 + 会添加一个 xhr 断点, 断点是根据 xhr 的 url 匹配中断的, 如果不写匹配规则会在所有 ajax, 这个匹配只是简单的字符串查找, 发送前中断, 在中断后再在 Call Stack 中查看时那个地方发起的 ajax 请求

从左到右分别是:

4. 页面事件中断

除了给设定常规断点外, 还可以在某一特定事件发生时中断(不针对元素) , 在 Scripts 面板右侧, 有个 Event Listener Breakpoints, 这里列出了支持的所有事件, 不仅 click, keyup 等事件, 还支持 Timer(在 setTimeout setInterval 处理函数开始执行时中断), onload, scroll 等事件.

图片 13

Pause/Resume script execution:暂停/恢复脚本执行(程序执行到下一断点停止)。

5. Javascript 异常时中断

Pretty print 左侧的按钮是开启 js 抛异常时中断的开关, 有两种模式:在所有异常处中断, 在未捕获的异常处中断. 在异常处中断后就可以查看为什么抛出异常了

Step over next function call:执行到下一步的函数调用(执行当前断点所在行,跳到下一行)。

6. DOM Level 3 Event 事件中断

在 Elements 面板, 选中一个元素右键, 有两个选项:Break on subtree modifications, Break on attributes modifications, 这两个对应 DOM Level 3 Event 中的DOMSubtreeModified , DOMSubtreeModified 事件 在 Scripts 面板 DOM Breakpoints 处会列出所有 level3 的 event 中断

图片 14

Step into next function call:进入当前函数。

7. 所有 js 文件中搜索&查找 js 函数定义

  • 在 chrome developer tool 打开的情况下, 按 ctrl + shift + F, 在通过 js 钩子查找代码位置时很有用, 查找支持正则表达式
  • 查找函数定义: ctrl + shift + 0 (在 Scripts panel 下)
  • 查找文件: ctrl + o  (在 Scripts panel 下)
  • 更多快捷键: 在 chrome developer tool 中按 ? 查看帮助

图片 15

Step out of current function:跳出当前执行函数。

8. command line api

  • $(id_selector) 这个与页面是否有 jQuery 无关
  • $$(css_selector)
  • $0, $1, $2, $3, $4
    1. Elements 面板中最近选中的 5 个元素, 最后选择的是 $0
    2. 这个 5 个变量时先进先出的
  • copy(str) 复制 str 到剪切板, 在断点时复制变量时有用
  • monitorEvents(object[, types])/unmonitorEvents(object[, types])
    1. 当 object 上 types 事件发生时在 console 中输出 event 对象
  • 更多 console api 请 console.log(console) 或 点击
  • 更多 command line api 点击

图片 16

Deactive/Active all breakpoints:关闭/开启所有断点(不会取消)。

9. 实时修改 js 代码生效

  • 页面外部 js 文件在 Scripts 面板中可以直接修改, 改完后按 ctrl + S 保存, 会立即生效
  • 注意
    1. 经测试不支持 html 页面中 js 修改
    2. 经过 Pretty print 格式化的脚本不支持修改

Pause on exceptions:异常情况自动断点设置。

10. console 中执行的代码可断点

在 console 中输入代码的最后一行加上 //@ sourceURL=filename.js, 会在 Scripts 面板中有个叫 filename.js 的文件, 然后他就和外部 js 文件一样了

图片 17

function hello() {
  alert('say hi');
}
//@ sourceURL=hello.js

Pause/Resume script execution( F8)

在断点暂停后,点击恢复脚本执行,直到下一个断点为止。

长按图标,会出现灰色的播放按钮,鼠标移上去再松开左键,会忽略所有的断点,强制渲染完整的页面。


Step over next function call (F10)

当在一行代码中暂停,代码里包含一个与正在调试的问题无关的函数时,可以点击此图标直接解析该函数,而不是进入函数内部逐行执行debug操作。

例如,当你在 debug 以下代码:

function updateHeader() {

    var day = new Date().getDay();

    var name = getName(); // A

    updateName(name); // D

}

function getName() {

var name = app.first + ' ' + app.last; // B

return name; // C

}

假设现在是在 A 处暂停。点击 '跳过下个函数调用' 图标,浏览器会解析被跳过的函数里的所有代码(这里是 B 和 C),然后在 D 处再次暂停。


Step into next function call ( F11)

当断点找到了要 debug 的确切函数,点击图标进入此函数内部,逐行查看分析里面的变量值和方法。

例如:

function updateHeader() {

    var day = new Date().getDay();

    var name = getName(); // A

    updateName(name); // D

};

function getName() {

    var name = app.first + ' ' + app.last; // B

    return name; // C

}

此时在 A 处打点暂停了,而 A 处就是与问题相关的函数,点击进入函数里,会在 B 处暂停,再次点击会在 C 处暂停,同时 B 处会显示 'name' 变量的值。


Step out of current function (Shift + F8)

进入到一个与正在 debug 的问题无关的函数后,可以点击此图标解析函数剩下的代码,跳出函数到下一行。

例如:

function updateHeader() {

var day = new Date().getDay();

    var name = getName(); // A

    updateName(name); // D

};

function getName() {

    var name = app.first + ' ' + app.last; // B

    return name; // C

}

现在在 B 处暂停,step out 之后,浏览器解析 getName() 函数剩下的代码(C),然后在 D 处再次暂停。


Run all code up to a certain line

如果你在 debug 一个很长的函数,里面包含了很多与问题无关的代码,需要区分出来。

首先在函数里设置第一个断点,执行至暂停,然后,有三种方法 debug :

    1、使用 step into function 逐行解析查看结果,会浪费不少时间;

    2、根据结果判断哪些是无用的代码,越过它们再设置下一个断点,使用 resume script 执行到下一个断点;

    3、根据结果判断哪些是无用的代码,在下一个需要暂停的地方,右键行数,选择 “continue to here”,浏览器会直接解析到那一行并暂停,推荐的方法。


View the current call stack

在一行代码里暂停时,可以在 Call Stack 面板查看是哪些栈将你带到了当前断点(到达当前函数调用了哪些函数)。如果不是在一行代码里暂停, Call Stack 面板是没有内容的。

如果要查看异步函数,可以勾选 Async 。(在 windows 版本中没有此选项,默认显示异步函数)。

点击函数会跳到此函数调用的地方。蓝色箭头是当前查看的函数。

图片 18


Copy stack trace

在 Call Stack 面板里右键,选择 Copy stack trace 可以将面板里的 stack 信息复制到 clipboard。

图片 19

复制的信息格式如下(函数名称、在代码里的行数):

getNumber1(get-started.js:35)

inputsAreEmpty(get-started.js:22)

onClick(get-started.js:15)


Restart the top function of the call stack

在调试函数的过程中,想回到函数的开头重新 debug 的时候,可以在 Call Stack 面板中对应的函数上右键,选择 Restart Frame 而无需在开头打断点。Call Stack 面板里是断点函数以及所涉及到的其他函数,最顶端的函数是当前的断点函数。

例如:

function factorial(n) {

    var product = 0; // B

    for (var i = 1; i <= n; i++) {

    product += i;

};

return product; // A

}

现在在 A 处暂停,点击 Restart Frame 之后,会在 B 处暂停。

图片 20


Ignore a script or pattern of scripts

在 debug 过程中,可以选择忽略部分脚本,不在 Call Stack 中显示,在 step into function 的时候也不会进入被忽略的脚本。

例如:

function animate() {

    prepare();

    lib.doFancyStuff(); // A

    render();

}

A 是你确认与当前问题无关的第三方库,那就可以将它关入黑盒子里忽略掉。

在编辑区操作: 在 Source Tab 中双击打开文件 -> 在文件编辑区右键,选择 Blackbox script 。

图片 21

在Call Stack 面板操作: 在 Call Stack 面板中找到对应的脚本 -> 右键选择 Blackbox script 。

图片 22

在控制台设置黑盒: 控制台右上角找到 'Customize and control DevTools' 图标(或按F1) -> 选择 Blackboxing tab -> 点击 Add pattern ->  在对话框中输入脚本名字或脚本名字的正则表达式 -> 点击 Add

图片 23


Change thread context

在网站有 web workers 或者 service workers 线程的时候,需要分别查看主线程和这两个线程的 context ,可以在 Threads 面板切换。

图片 24

上图蓝色箭头处是当前线程的 context , 可以点击切换其他线程。


View and edit local, closure, and global properties

在断点暂停时,可以在 Scope 面板里查看和编辑局部、闭包和全局范围内的属性和变量的值。不会显示不可枚举的属性。

双击一个属性值可以输入新的值。

图片 25


Run snippets of debug code from any page

如果在调试中,需要一次次在控制台输入相同的内容的话,可以使用 Snippets(代码片段) 功能减少重复劳动。代码片段是您在DevTools中编写、存储和运行的可执行脚本。

Snippets 是全局的,在浏览器的所有标签页都能找到和运行。

具体可查看 从任何页面运行代码片段


Watch the values of custom JavaScript expressions

在 debug 过程中,如果希望重点观察某些变量的值(而不是在 Scope 面板里层层点开),可以加入 Watch 面板。Watch 面板里的值会在执行代码时自动刷新。

图片 26

'+' 图标创建新的 expression;右边是刷新图标,手动刷新变量的值;鼠标移动到变量上,在右侧会出现删除图标。


Make a minified file readable

可以将最小化了的代码还原成对人友好的形式。

点击代码编辑区域左下角的 '{}' 图标。

图片 27


Edit a script

如果要尝试修复 bug , 不需要切换到编辑器修改,再刷新当前页面。你可以直接在代码编辑区域修改代码然后保存看看修改后的效果。如果是最小化了的代码,可以先还原成对人友好的格式。

操作: 修改代码 -> 按 Command + S (mac)或 Ctrl + S (windows, Linux)保存修改 -> 查看效果。

图片 28

本文由前端php发布,转载请注明来源:如何调试Javascript,控制台调试技巧