[视频] 你好，我是李艺。 上节课我们学习使用了JavaScript Profiler面板以及静态依赖分析工具，这节课我们学习断点调试及关于Source Map和真机调试2.0功能的一些介绍。 首先看一下问题，即使对于有经验的程序员，在第一次面对某些奇怪的异常的时候，也不能完全凭直觉判断出来这个问题出现在哪里，这个时候便需要使用Debug需要断点调试，小程序它天生支持Source Map 不需要额外的配置，结合Sources面板就可以加断点进行调试了，并且结合真机调试功能，即使出问题的设备不在眼前也可以远端开启调试，这项技能对于任何小程序开发者，甚至前端开发者都是最有价值的技能之一，下面我们看项目实践。 首先看实践一：Source Map与本地断点调试。 小程序最终运行的代码与开发者编写的代码，它并不是同一套代码，因为原始代码它会经过开发工具的ES6转ES5编译 压缩和混淆，它会变成另外的一种格式，Source Map顾名思义，它是一种将编译后的代码，与原始代码映射起来的一种调试辅助技术，为了方便开发者读懂运行时出错信息，以及快速定位出出错的源码位置，小程序提供了Source Map功能，并且这项功能它是默认开启的，开发者不需要在这个项目里面做任何的一个配置，在编译之后的小程序JS源码文件里面，会有一条以sourceMappingURL开头的一个尾注，这是一条特殊的一个注释，它的内容就是用于Source Map映射的源码以及其他的一些必要的信息，我们将这个信息里面的base64后面的这一部分，使用Base64解码工具解开，会得到一个JS的字符串，在这个字符串里面它有一个叫做sourcesContent的字段，我们把这个字段拿出来以后，再使用正则法将双斜杠n转化为斜杠n，将斜杠双引号再转化为引号，这样就可以得到一个文本的源码。 这个源码便是我们在这个项目里面编写的原始的源码，json字符串在这里面还有其他信息，这些信息它属于编译前后代码的一个映射信息，它是方便开发工具实现源码定位的，Source Map信息虽然在小程序代码包里面它是默认包含的，但是它不计入我们代码包大小的一个计算，不会占用本来就不多的代码包的额度，而且在本地调试或者使用真机调试的时候，微信开发者工具它会自动解码Source Map信息并且还支持断点调试，这一点对我们十分有用，开发者可以在解码后的源码里面打断点，可以很清楚地看到当前执行上下文环境里面的变量的信息，在本地调试区里面，Sources面板里面，我们可以找到appContext的节点，它下面有一个叫做127.0.0.1这样开头的一个节点，继续往里面我们可以找到appservice，然后下面有一个app.js?[sm]这个节点，这个文件就是微信开发者工具帮我们复原出来的一个主文件源码，我们在这里可以打断点，可以步进，可以步入，可以步出还有可以跳过，进行这些常规的调试操作，当我们把鼠标放在变量上面的时候，还有小的浮动窗口可以显示这些变量的值，与app.js?[sm]文件并列的还有一个叫做app.js文件，这个文件是我们编译以后的真正的运行时执行的文件，我们打开这个文件可以看到里面有以sourceMappingURL开头的信息。 下面我们开始实践一的代码演示。 首先打开我们小程序项目，打开以后单击编译，打开我们调试区，在调试区里面 我们选Sources面板，这个里面我们有很多节点 我们可以选择top，top里面有appContext这个节点，再往里选择127开头的节点，再选择appservice，在这个里面有一个叫做app.js?[sm]这样的一个文件，我们选择这个文件，这个文件看起来有点熟悉，这就是我们的项目里面的一个主文件源码，我们在这个地方已取到了系统消息，这个地方打一个断点 ，打完断点以后 我们单击编译重新进行项目的启动，当再次执行到这个位置的时候，我们发现小程序它暂停了，停在了我们设置断点的地方，在这个地方我们可以进行步进 跳入 跳出以及跳过常规的一个调试操作，我们可以一步一步地来查看它每一个执行的状态，把鼠标放在上下文里面的这些变量上面的时候，它可以显示这些变量的一些状态以及它所包含的这些值。另外在这个地方还有一个Watch，我们还可以将我们这个里面的变量，可以使用添加监听的这种方式加到这个地方，然后以观测它们的一个变化也是可以的，如果我们不需要调试，可以单击这个让它结束 结束本来的调试，这样我们这个页面就渲染出来了。 再次运行一下，我们要看另外的一个文件，再次打开这个节点，与我们这个文件然后相并列的还有一个app.js文件，这个代码是我们编译以后运行时真正要运行的一个源码，在源码的底部它有一行注释，我们看一下这不有一行注释，注释很长 我们将这个给它拷贝一下，双击选择拷贝一下，拷贝以后我们找到一个Base64的一个解码工具，在线解码工具 把这个内容拷贝在这个地方，然后在这个里边，这个信息我们没有拷贝全，需要再重新拷贝一下，复制 然后粘到这个地方来，开头有些信息我们不需要。我们从base64逗号后面的给它断掉，只需要后面这部分就可以了，然后进行解码，解码以后这个就得到了一个json的字符串的信息，我们将这个信息给它拷贝一下放在我们的VSCode里面，新建一个页面，然后这个页面 这个文件我们选择json作为它的格式再进行格式化，看到没有，这个就是我们反解码出来的一个调试信息。 在这个地方有一个sourcesContent，我们将它里面的这个信息给它拷贝一下，可以选择自动换行让它换行一下，这样我们选择起来会比较好选，然后选择这个信息 选完这个信息以后，我们再打开一个文件，打开以后 然后我们这个地方也给它选择json，json作为文件的格式，再选择自动换行，这个里面目前没有办法格式化，我们需要做一些处理，打开正则替换，我们将两个杠的斜杠n转化为一个杠的斜杠n进行一个替换，还有一个是里面的引号，斜杠n引号转化为引号再进行替换，替换完了然后格式化，这个就是我们最终的一个源码了，源码是JS的，我们将文件的格式改一下，改成JavaScript，这就是我们最终的一个源码，当然这个地方好像没有替掉，我们再重新再替一下，现在就已经替掉了，这就是我们JS这个源码。 下面我们看实践二：真机调试2.0与远程断点调试。 微信开发者工具在调试区默认打开是本地调试，在这种调试模式下代码在本地执行调试面板也是在本地查看，另外还有一种真机调试，真机调试它是远程调试，在这种调试模式下，这个代码它是在远程的设备上运行，调试面板是在本地的开发者工具中查看，为了便于区别 真机调试模式打开的时候，微信开发者工具并没有复用调试区的面板，而是在弹出的新窗口里面打开相似的一个调试区窗口，真机调试又分1.0和2.0两个版本，2.0它是应用了新的调试模型，使得调试结果更接近于真机的表现，同时它还支持更多的高级的接口的一个调试，例如像Canvas画布类的接口，它的运行近似相当于真机运行，有一些在模拟器里面无法测试的一些内容，例如像流量主的视频激励广告等等，在真机调试里面都可以进行调试，1.0 2.0这个模式它在开启的时候可以相互的切换，我们在面板里面的左下角它有切换按钮，这里还有一个选项是局域网模式，局域网模式它是干什么用的呢，在开启真机调试的时候，设备与微信开发者工具的调试窗口之间保持了一个实时进行调试信息通讯的一个长连接，如果被调试的手机设备在远端，这个时候必须要经过一台服务器进行中转，而如果这个设备它在本地局域网里面，它就没有必要通过这个服务器进行中转了，这时候我们勾选这个选项，就可以在一定程度上提高我们调试的通讯效率。 在iOS设备的真机调试窗口里面，我们从运行截图可以看出来真机调试这个窗口它没有Performance面板，但它有这个Memory，JavaScript Profiler，还有Storage面板，这些面板的使用方法与我们微信开发者工具在默认的调试区里面打开的这些调试窗口用法是一样的，其中这个JavaScript的，这个Profiler面板在这个默认状态下可能是不显示的，这时候我们只需要选择右上角的更多按钮，然后选择more tools便可以进行手动开启了。 这里有一个问题，就是我们什么时候使用真机调试2.0版本，2.0真机调试推出来以后，1.0它其实并没有消失，它仍然有它的一个价值，有些小程序它可能在2.0下面无法正常运行，这个时候我们可以切到1.0模式进行调试，真机调试功能一般在这个产品上线之前使用，在内测期间，由于QA测试团队和研发团队可能不在一个办公区，这个时候我们就可以使用真机调试功能或者是用户的设备上出现了非常奇怪的一个问题，开发者仅凭这个线上日志他无法定位到这个错误，这个时候我们也可以使用远程真机调试功能，下面我们再看如何在真机2.0调试里面使用断点调试这样的功能。 在真机调试的调试窗口里面可以打开Sources面板，从左边的文档树里面可以找到webapp目录，然后在这个里面可以依次找到app.js?[sm]这个文件，这个文件名和我们在本地调试的时候看到的是一样的，与默认调试区的Sources面板的使用方法一样，在这里我们也可以使用断点调试功能，无疑这对于远程查看设备异常有莫大的一个便利。 下面我们进行实践二的代码演示。 打开我们小程序项目，然后在这个工具栏里面选择真机调试2.0，这个地方有一个切换真机调试2.0，切换真机调试1.0这样一个切换按钮，这个地方有一个局域网模式一个选项，我们选中，在进行手机上真机调试的时候还有一个事情必须要确认，就是我们的request.js里面，我们之前说过我们BASE_URL一定要使用我们本机的局域网的IP，不能再使用前面localhost了，如果用这个网址，我们在手机上无法访问我们这个接口，这个确认以后 接下来我们就可以进行真机调试了，然后选好以后我们单击启动调试按钮，如果是我们手机上已经打开过我们这个测试版本的话，当我们单击这个按钮以后，在手机上它会自动打开我们小程序，同时我们微信开发者工具里面真机调试2.0的调试窗口也会同步打开，这个窗口跟我们开发者工具里面默认调试区里面的窗口它不是一个窗口，这个是专门为真机调试来使用的，但它里面的这些面板与我们原来基本上的这个功能都是一模一样的。 在这个手机上面我们可以看到在右上角，它有一个已连接，展开这样的一个浮动的这样的面板，这个里面可以看到，我们电脑与我们手机现在已经建立一个连接，现在我们在开发者工具里面选择Sources面板接着选择weapp，weapp下面我们可以看到这里面仍然是有这个文件的，仍然是我们有这个文件，然后在这个文件里面我们仍然是可以找到，比如说我们先前已经使用了，已取到了系统消息在这个地方，然后打入一个断点，打入断点以后 我们可以重新进入我们小程序，我们还可以关掉，关掉然后再次打开，刚才是让这个面板记住我们这个调试信息，再次启动一下，现在我们可以看到我们这个断点已经执行到这个位置了，在这个地方我们仍然可以进行Step，还有Step into Step out和Step over的一些调试操作，同样在这个地方，我们还可以查看我们当前执行上下文里面的一些变量以及它变量所包含的这些值，在这个地方都可以看到这个功能与本地调试的时候，它这个功能是类似的，我们这个代码演示就说到这里。 最后我们总结一下，微信开发者工具拥有的这些调试工具各有各的用处，我们具体来看一下定位运行性能问题，可以使用Performance面板Memory面板和JavaScript Profiler面板，查看这个代码包的大小以及文件大小的占用情况，我们可以使用静态依赖分析工具定位JS代码错误，可以使用Sources面板以及断点调试功能，其中调试我们又分为本地模拟器调试和远端真机调试，这两种调试模式都有这个Sources面板，并且都支持这个断点调试功能，除了上面的这些工具以外，微信开发者工具还提供了一个运行时性能分析工具，这个工具我们从下节课开始进行介绍，这节课我们就讲到这里，上面的网址就是本课所涉及的一些文档地址。 点击查看相关文档： 真机调试2.0Source Map在浏览器中调试微信开发者工具下载的 sourcemaps 怎么用 这节课我们主要学习了断点调试及关于Source Map和真机调试2.0功能的一些介绍，下节课我们开始学习视图代码的一个优化技巧。 最后说一下思考题，这里有个问题请你思考一下，我们人类的视觉信息处理能力是有限的，一般低于200ms的变化基本上是感觉不出来的，还有对于某一些scroll事件触发的事件回调，它频率也非常之高，如果是任由它们触发和执行可能会对设备资源造成极大的一个浪费，在传统工业里面有一种叫做节流阀的东西可以限制液体的流动，让流体运行更加稳定和高效，那么在小程序开发里面也有类似的一个机制吗？我们在这个小程序开发里面可以怎么去处理这些问题，这个问题先留给你思考一下，下节课我们一起来深入探讨一下这个问题。