⾕歌浏览器开发调试⼯具中Sources⾯板js调试等完全介绍
这次分享的是Chrome开发⼯具中最有⽤的⾯板Sources。 Sources⾯板⼏乎是我最常⽤到的Chrome功能⾯板，也是在我看来决解⼀般问题的主要功能⾯板。通常只要是开发遇到了js报错或者其他代码问题，在审视⼀遍⾃⼰的代码⽽⼀⽆所获之后，我⾸先就会打开Sources 进⾏js断点调试，⽽它也⼏乎能解决我80%的代码问题。Js断点这个功能让⼈兴奋不已，在没有js断点功能，只能在IE（万恶的IE）中靠alert弹出窗⼝调试js代码的时代（特别alert⼀个object根本不会理你），那样的开发环境对于前端程序员来说简直是⼀场噩梦。本篇⽂章讲会介绍Sources的具体⽤法，帮助各位在开发过程中够愉快地调试js代码，⽽不是因它⽽发疯。⾸先打开F12开发⼯具切换到Sources⾯板中:
javascript说明Sources功能⾯板是资源⾯板，他主要分为四个部分，四个部分并不是独⽴的，他们互相关联，互动共同实现⼀个重要的功能：监控js在执⾏期的活动。简单来说就是断点啦。
⾸先我们来看区域1，它的功能有些类似于Resources⾯板，主要是显⽰⽹页加载的脚本⽂件：例如css， js等资源⽂件（它不包含cookie，img等静态资源⽂件）。
区域1的导航条上有三个tab切换选项，他们都存有不同域名和环境下的js和css⽂件，我们⾸先来说明
Sources（资源）选项的作⽤: Sources: 包含该项⽬的静态资源⽂件。双击选中⽂件，该⽂件内容会在区域2中显⽰，如果你选中的是js⽂件，那么你可以在区域2种单击⾏号进⾏断点调试，只要js执⾏到了你所标记的这⼀⾏，它会停⽌向下执⾏并且等待你的命令:
从上图可以看到js执⾏到断点处时各个区域的变化，⾸先是区域3中的Breakpoints记录信息会变⾼亮，然后是区域4中Scope 选项中列出了断点处私有和公有的变量信息，这样，我可以很直观地知道，此时此刻js的执⾏状态。同样的，你可以把⿏标放到区域2种的某个变量上，浏览器会弹出⼀个⼩框框，框框⾥⾯则是你悬浮其上的变量所有信息:
  然后，你可以按F10跟着js执⾏的路径⼀步⼀步地⾛下去，如果你遇到了⼀个函数包含着另外⼀个函数，那么你可以按F11进⼊到个函数中去观察它的代码执⾏活动。你也可以通过点击区域1底部的各个图标对js代码进⾏跟踪。不过我建议你使⽤快捷键，故名思义，因为它⽐较快捷⽅便。不过怎么⽤完全按照个⼈习惯来吧。下图是各个按钮的作⽤功能。
在上图蓝⾊圆圈中数字，它们分别代表:
1、停⽌断点调试
2、不跳⼊函数中去，继续执⾏下⼀⾏代码（F10）
3、跳⼊函数中去（F11）
4、从执⾏的函数中跳出
5、禁⽤所有的断点，不做任何调试
6、程序运⾏时遇到异常时是否中断的开关
接下来在区域4种切换到Watch Expressions 选项，它的作⽤是为⽬前断点添加表达式，使得每次断点往下⾛⼀步都会执⾏你写下的js代码。需要注意的是这个功能必须谨慎使⽤，因为这可能会导致你写下的监控代码段会不断地被执⾏。
为了避免你的调试代码重复执⾏，我们可以在调试时直接在console控制台上⼀次性地输出当前断点处的信息（推荐这样做）。为了验证我们在console⾯板中拥有的是当前断点环境，我门可以对⽐断点执⾏前后的this值变化。
如果你觉得在断点的时候为了看⼀个变量必须借⽤console⾯板输出的⽅式来查看会⽐较⿇烦，那么你可以更新最新版的Chrome，它已经为我们解决了这个烦恼。为了⽅便开发者调试，在这⼀点上⾕歌已经做到了极致，就在前⼏天更新过Chrome以后，卤煮意外地发现了断点时监控环境变量的另外⼀种⽅
式，这种⽅式极为清晰，在断点调试的时候，区域2中会⾃动显⽰每个变量的值，每次代码往下⾛的时候这个值都回时时更新。这让开发者对当前环境变量⼏乎可以说是⼀⽬了然。（此功能有⼀个⼩缺陷，那就是⽆法查看数组或者对象的具体索引和值，不过我相信google会改进它的。）
当你的项⽬已经线上，出现了⼀个bug，你修复了之后⽆法看到它真正在线上的效果，那么你可以在打开线上的项⽬，直接在浏览器中修改代码然后看到效果。这样的效果往往是最直接的，这种⽅法也能
帮你省去频繁验证发布的⿇烦，毕竟⾝为前端码农的你也⼀定会听到过后台（通常情况下是后台发布）⼤哥的抱怨：“XXX，测试通过了没，不要出现了哈，发布⼀次很⿇烦的！”。⽽在Chrome⾥⾯，只需要在区域2种直接修改，你就可以验证你的代码在线上是否可⾏。卤煮在此处只是指出该功能的⽤法之⼀。其他的就凭诸位的聪明才智去想了。
即使在断点时，你也可以编辑代码，按ctrl+S保存之后，你会看到区域2的背景由⽩⾊变为浅⾊，⽽断点会重新开始执⾏。
回到区域1，Content script 选项开⾥⾯包含着⼀些第三⽅插件或者浏览器⾃⾝的js代码，经常它是被忽略的，实际上它的作⽤很少。我们可以更多关注⼀下Snippets选项。还记得基础篇⾥⾯介绍的style吗？在⾥⾯我们可以编辑界⾯的css代码并且即时看到它们的映射效果，同样地，在Sinppets中，我们也 可以编辑（重写）js代码⽚段。这些⽚段实际上就相当于你的js⽂件⼀样，不同的是本地的js⽂件在编辑器⾥⾯编辑的，⽽此处，你是在浏览器中编写的。这些代码⽚段在浏览器刷新的时候既不会消失，也不会执⾏，除⾮是你⼿动执⾏它。它可以存在你的本地浏览器中，即使关闭浏览器，再次打开时它依然还在那⾥。它的主要作⽤可以使得我们编写⼀些项⽬的测试代码时提供便捷，你
知道，如果你在编辑器上编写这些代码，在发布时你必须为它们添加注释符号或者⼿动删除它们，⽽在浏览器上编写就不需要这样繁琐了。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。