是怎么调试 JavaScript 程序的?最原始的方法是用 alert() 在页面上打印内容,稍微改进一点的方法是用 console.log() 在 JavaScript 控制台上输出内容。嗯~,用这两种土办法确实解决了很多小型 JavaScript 脚本的调试问题。不过放着 Chrome 中功能越发强大的开发者工具不用实在太可惜了。本文主要介绍其中的 JavaScript 断点设置和调试功能,也就是其中的 Sources Panel(以前叫 Scripts)。如果你精通 Eclipse 中的各种 Java 调试技巧,那么这里的概念都是类似。写作本文时使用的 Chrome 版本为 25.0.1364.172。

 
基本环境
Sources Panel 的左边是内容源,包括页面中的各种资源。其中,又分 Sources 和 Content scripts。Sources 就是页面本身包含的各种资源,它是按照页面中出现的域来组织的,这是我们要关注的。异步加载的 js 文件,在加载后也会出现在这里的。Content scripts 是 Chrome 的一种扩展程序,它是按照扩展的ID来组织的,这类扩展实际也是嵌入在页面中的资源,它们也可以读写DOM。编写、调试这类扩展的开发者才要关心它们,如果你的浏览器没安装任何扩展,那么 Content scripts 就看不到任何东西。
 
Sources Panel 的中间主区域用于展示左边资源文件的内容。
 
Sources Panel 的右边是调试功能区,最上面的一排按钮分别是暂停/继续、单步执行、单步跳入、单步跳出、禁用/启用所有断点。下面是各种具体的功能区。稍后介绍。
 
注意,左右两边的区域默认可能收缩在两侧没有显示出来,点击两侧的伸缩按钮 展示出来。左边区域展示出来时默认是自动收缩状态,点击旁边的 pin 按钮  就不会缩回去了。
 
最下面还有一些功能按钮很有用。
 
在源代码上设置断点
通过左边的内容源,打开对应的 JavaScript 文件,鼠标点击文件的行号就可以设置和删除断点。添加的每个断点都会出现在右侧调试区的 Breakpoints 列表中,点击列表中断点就会定位到内容区的断点上。如果你有多个文件、多个断点的话,利用 Breakpoints 列表中的断点快速定位非常方便。
 
对于每个已添加的断点都有两种状态:激活和禁用。刚添加的断点都是激活状态,禁用状态就是保留断点但临时取消该断点功能。在 Breakpoints 列表中每个断点前面都有一个复选框,取消选中就将禁用该断点。断点位置的右键菜单中也可以禁用断点。也可以在右侧功能区上面按钮临时禁用所有已添加的断点,再点一下恢复原状态。
 
条件断点:在断点位置的右键菜单中选择“Edit Breakpoint...”可以设置触发断点的条件,就是写一个表达式,表达式为 true 时才触发断点。
 
查看断点的环境
调用栈(Call Stack):在断点停下来时,右侧调试区的 Call Stack 会显示当前断点所处的方法调用栈,比如有一个函数 g() 其中又调用了函数 f() ,而我在 f() 中设置了一个断点,那么我在 console 中执行函数 g() 的时候会触发断点,其调用栈显示如下:

最上面是 f(),然后是 g()。调用栈中的每一层叫做一个 frame,点击每个 frame 可以跳到该 frame 的调用点上。

此外,还可以在 frame 上用右键菜单重新开始执行当前 frame,也就是从该 frame 的开始处执行。比如在函数 f() 的 frame 上 Restart Frame, 断点就会跳到 f() 的开头重新执行,context 中的变量值也会还原。这样结合变量修改和编辑代码等功能,就可以在当前 frame 中反复进行调试,而不用刷新页面重新触发断点了。
 
查看变量

Call Stack 列表的下方是 Scope Variables 列表,在这里可以查看此时局部变量和全局变量的值。

 
执行选择的代码

在断点调试时,可以用鼠标选择想要查看的变量或表达式,然后右键菜单执行“Evaluate in Console”,就可以看到该表达式的当前的值了。

中断下次要执行的 JavaScript 语句
右侧调试区的上面的“中断/继续”按钮还有一个功能,在没有触发断点时,点一下这个按钮就会进入“准备”中断的状态,页面下一次执行 JavaScript 语句时会自动中断,比如触发了一个点击动作时会执行的代码。
 
临时修改 JavaScript 代码
通常我们在调试代码时习惯:修改代码→刷新页面→重新检查,这么一个循环。但其实 Chrome 中可以临时修改 JS 文件中的内容,保存(Ctrl+S)就可以立即生效,结合 Console 等功能就可以立即重新调试了。但注意这个修改是临时的,刷新页面修改就没了。
 
异常时断点
在界面下方能看到按钮,它是设置程序运行时遇到异常时是否中断的开关。点击该按钮会在3种状态间切换:
  1. 默认遇到异常不中断
  2. 遇到所有异常都会中断,包括已捕获的情况
  3. 仅在出现未捕获的异常时才中断
主要解释一下状态2和状态3的区别

try{ throw 'a exception'; }catch(e){ console.log(e); }

上面 try 里面的代码会遇到异常,但是后面的 catch 代码能够捕获该异常。如果是所有异常都中断,那么代码执行到会产生异常的 throw 语句时就会自动中断;而如果是仅遇到未捕获异常才中断,那么这里就不会中断。一般我们会更关心遇到未捕获异常的情况。

 

在 DOM 元素上设置断点

有时候我们需要监听某个 DOM 被修改情况,而不关心是哪行代码做的修改(也可能有多处都会对其做修改)。那么我们可以直接在 DOM 上设置断点。

如图所见,在元素审查的 Elements Panel 中在某个元素上右键菜单里可以设置三种不同情况的断点:

  1. 子节点修改
  2. 自身属性修改
  3. 自身节点被删除
选中之后,Sources Panel 中右侧的 DOM Breakpoints 列表中就会出现该 DOM 断点。一旦执行到要对该 DOM 做相应修改时,代码就会在那里停下来,如下图所示。
 
XHR 断点
右侧调试区有一个 XHR Breakpoints,点击+ 并输入 URL 包含的字符串即可监听该 URL 的 Ajax 请求,输入内容就相当于 URL 的过滤器。如果什么都不填,那么就监听所有 XHR 请求。一旦 XHR 调用触发时就会在 request.send() 的地方中断。
 
按事件类型触发断点
右侧调试区的 Event Listener 列表,这里列出了各种可能的事件类型。勾选对应的事件类型,当触发了该类型的事件的 JavaScript 代码时就会自动中断。
 
调试快捷键

所有开发工具中的快捷键都可以在界面右下角的设置中查到。断点调试时一般用的是 F8、F10、F11或 Shitf+F11,但在 Mac OS 上 F10 等功能键可能与系统默认的快捷键冲突。没关系,它们分别可以用 Cmd+/ 、Cmd+'、Cmd+; 、Shift+Cmd+; 代替。

 
//@ sourceURL 给 eval 出来的代码命名
有时候一些非常动态的代码是以字符串的形式通过 eval() 函数在当前 Javascript context 中创建出来,而不是作为一个独立的 js 文件加载的。这样你在左边的内容区就找不到这个文件,因此很难调试。其实我们只要在 eval 创建的代码末尾添加一行 “//@ sourceURL=name“ 就可以给这段代码命名(浏览器会特殊对待这种特殊形式的注释),这样它就会出现在左侧的内容区了,就好像你加载了一个指定名字的 js 文件一样,可以设置断点和调试了。下图中,我们通过 eval 执行了一段代码,并利用 sourceURL 将它命名为 dynamicScript.js ,执行后左侧内容区就出现了这个“文件”,而它的内容就是 eval 的中的内容。
 
还可以看看这个给动态编译出来的 CoffeeScript 代码命名的示例

var coffee = CoffeeScript.compile(code.value)+ "//@ sourceURL=" + (evalName.value || "Coffeeeeeeee!");
eval(coffee);

实际上,//@ sourceURL 不仅仅可以用在 eval 的代码中,任何 js 文件、甚至是 Javascript Console 输入的代码都可以用,效果一样!
 
格式化代码(Pretty Print)
 按钮用于把杂乱的代码重新格式化为漂亮的代码,比如一些已被压缩的 js 文件基本没法看、更没法调试。点一下格式化,再点一下就取消格式化。

美化前

美化后

参考:http://blog.csdn.net/luckyyulin/article/details/20477695

chrome浏览器调试JS代码的更多相关文章

  1. 如何用浏览器调试js代码

    按F12打开调试工具

  2. 利用Google浏览器调试js代码

    1.js有两种引入方式,外链和内嵌: 内嵌在浏览中直接调试,外链要在断点处写debugger; 示例代码: <!DOCTYPE html> <html lang="en&q ...

  3. chrome浏览器调试js,结果Sources里面找不到js文件解决办法

        页面出现问题,就debug,这是前端开发工程师最常见的做法,但是有时候,我们打开开发者工具,在sources查找js文件,却发现怎么也找不到,无法设置断点.但是文件在network选项卡里确实 ...

  4. 使用浏览器,调试js代码

    1:创建html网页和js文件 <!doctype html> <html> <head> <meta charset="utf-8"&g ...

  5. Google Chrome调试js代码,开发者工具之调试工具常用功能

    参考:Google Chrome调试js代码-http://www.open-open.com/lib/view/open1384785324165.html 重点:左下角一个{}括号图标按钮用于把杂 ...

  6. 前端chrome浏览器调试总结

    引言 "工欲善其事,必先利其器" 恩,这句话我觉得说的特别有道理,举个例子来说吧,厉害的化妆师都有一套非常专业的刷子,散粉刷负责定妆,眼影刷负责打眼影,各司其职,有了专业的工具才能 ...

  7. Google Chrome浏览器调试入门————转载只为自己查看方便

    Google Chrome浏览器调试 作为Web开发人员,我为什么喜欢Google Chrome浏览器 [原文地址:http://www.cnblogs.com/QLeelulu/archive/20 ...

  8. Google Chrome浏览器调试功能介绍

    作为Web开发人员,我为什么喜欢Google Chrome浏览器 [原文地址:http://www.cnblogs.com/QLeelulu/archive/2011/08/28/2156402.ht ...

  9. chrome浏览器调试功能之后端篇

    作为后端开发人员,可能有很多同学不怎么了解chrome调试功能,而即将成为大神的我们,怎么也得会,知其然更要知其所以然,今天我带领大家好好的梳理一下,chrome浏览器调试,个人把它分成了前端功能和后 ...

随机推荐

  1. [React] Write a Custom State Hook in React

    Writing your own custom State Hook is not as a daunting as you think. To keep things simple, we'll r ...

  2. [RxJS] Subject asObservable() method

    You can create your own state store, not using any state management libraray. You might have seen th ...

  3. 为什么 MySQL 索引要使用 B+树而不是其它树形结构?比如 B 树?

    一个问题? InnoDB一棵B+树可以存放多少行数据?这个问题的简单回答是:约2千万 为什么是这么多呢? 因为这是可以算出来的,要搞清楚这个问题,我们先从InnoDB索引数据结构.数据组织方式说起. ...

  4. C++函数调用方式约定stdcall,cdecl,pascal,naked,thiscall,fastcall

    https://www.cnblogs.com/xiangtingshen/p/11014514.html C++函数调用约定_cdecl约定:参数:从右向左依次入栈堆栈平衡:调用方平衡 #inclu ...

  5. mysql 5.7.21, for Linux (i686) 权限配置

    配置权限参数: GRANT语法: GRANT 权限 ON 数据库.* TO 用户名@'登录主机' IDENTIFIED BY '密码' 权限: ALL,ALTER,CREATE,DROP,SELECT ...

  6. AtCoder Grand Contest 003题解

    传送门 \(A\) 咕咕 const int N=1005; char s[N];int val[N],n; int main(){ scanf("%s",s+1),n=strle ...

  7. UVA 1613 K度图染色

    题目 \(dfs+\)证明. 对于题目描述,可以发现\(K\)其实就是大于等于原图中最大度数的最小奇数,因为如果原图度数最大为奇数,则最多颜色肯定为K,而如果原图最大度数为偶数,则\(K\)又是奇数, ...

  8. 三层设备-SHRP详解

    步骤:3-sw1enconf tvlan databasevtp domain s2t117vtp servervlan 10vlan 20vlan 30vlan 40exitint r f0/7 - ...

  9. 实现一个兼容eleUI form表单的多选组件

    本质上是实现了一个eleUI select组件中的创建条目功能的组件,仅仅是将dropdown的选择框变成了label形式.支持eleUI的form表单校验,同时组件也提供了组件内自定义校验的方法.常 ...

  10. macOS 系统下载地址

    macOS Catalina macOS Mojave macOS High Sierra macOS Sierra 点击可以直接在MAC App Store下载,如果不能下载就多试几次.