2023年11月25日发(作者：)

⾕歌浏览器开发调试⼯具中Sources⾯板js调试等完全介绍

这次分享的是Chrome开发⼯具中最有⽤的⾯板Sources。 Sources⾯板⼏乎是我最常⽤到的Chrome功能⾯板，也是在我看来决解⼀般

问题的主要功能⾯板。通常只要是开发遇到了js报错或者其他代码问题，在审视⼀遍⾃⼰的代码⽽⼀⽆所获之后，我⾸先就会打开Sources

进⾏js断点调试，⽽它也⼏乎能解决我80%的代码问题。Js断点这个功能让⼈兴奋不已，在没有js断点功能，只能在IE（万恶的IE）中靠

alert弹出窗⼝调试js代码的时代（特别alert⼀个object根本不会理你），那样的开发环境对于前端程序员来说简直是⼀场噩梦。本篇⽂章讲

会介绍Sources的具体⽤法，帮助各位在开发过程中够愉快地调试js代码，⽽不是因它⽽发疯。⾸先打开F12开发⼯具切换到Sources⾯板

中:

从上图可以看到js执⾏到断点处时各个区域的变化，⾸先是区域3中的Breakpoints记录信息会变⾼亮，然后是区域4中Scope 选项中列出

了断点处私有和公有的变量信息，这样，我可以很直观地知道，此时此刻js的执⾏状态。同样的，你可以把⿏标放到区域2种的某个变量

在上图蓝⾊圆圈中数字，它们分别代表:

1、停⽌断点调试

2、不跳⼊函数中去，继续执⾏下⼀⾏代码（F10）

如果你觉得在断点的时候为了看⼀个变量必须借⽤console⾯板输出的⽅式来查看会⽐较⿇烦，那么你可以更新最新版的Chrome，它已经

在Snippets选项的空⽩处右键后选择弹出的new选项，建⽴⼀个你⾃⼰的新的⽂件，然后在区域2种编辑它。

Snippets 的⾮常功能强⼤，它的许多隐藏功能还有待发掘。⽬前卤煮使⽤它是在记住调试⽚段、单元测试、少量的功能代码编写功能上。

4、击+ 并输⼊ URL 包含的字符串即可监听该 URL 的 Ajax 请求，输⼊内容就相当于 URL 的过滤器。如果什么都不填，那么就监听所有