# 前言 笔者刚接触EAS WEB开发，对于WAF2框架的使用还处于懵懵懂懂的状态，在使用和调试上遇到很多问题。今天就挑其中一个主题来给大伙分享一下, 希望能对刚接触waf2开发的小伙伴一点帮助。 ## 1.调试准备知识 首先为大家分享一些浏览器的调试知识，在稍后的WAF2代码调试对大家会有帮助。 做过web端开发的程序员都知道，在浏览器按下快捷键会弹出 浏览器的调试窗口，如下图所示。  在网页上，点击一个按钮会触发若干事件，事件经过对应的事件处理函数的处理，会执行相应的逻辑。比如，点击一个按钮，弹出一个窗口。那我们怎么知道点击按钮后，事件在哪里被处理了呢？ 如果你使用的是Chrome浏览器，可以点击元素审查按钮，然后再网页上选中你要审查的元素，如一个按钮，在右侧的Event Listeners 中，我们可以查看到该元素绑定的不同类型的事件。 比如我们想审查点击事件，就点击click展开点击事件下绑定的处理函数，在处理函数旁我们甚至可以点击直接跳转到对应的处理代码的位置。  笔者在使用多款浏览器后，觉得审查元素绑定事件最方便的浏览器应属火狐浏览器。因为我们只要使用元素选择器选中对应审查的元素，便可直接在html中直观地观察到该元素目前绑定的事件处理函数，并可以一键跳转至源码的位置。  接下来是关于浏览器断点调试的技巧，在下一章中我们会用到该技巧追踪事件处理函数的具体位置。 假设我们在某js代码的某行处打断点，该行读出了一个变量，变量的类型是一个事件处理方法，那么我们在调试进入断点的时候，将鼠标悬浮在改变量上，浏览器会弹出一悬浮窗口，并暗示我们点击箭头会跳转到该处理函数定义的位置，如下图所示。  ## 2. WAF2知识 当你读到第二章，我默认你已经掌握了第一章提及的网页调试技巧，接下来我们结合waf2框架来回答开篇提出的问题，即 **如何找到事件触发后的业务代码的处理位置?** 常见的网页会直接把事件处理函数绑定到元素上，我们直接审查需要交互的元素，找到对应的处理函数即可分析代码。与一般的网页不同，在waf2网页上审查一个元素[比如一个按钮]，我们并不能直接找到业务处理的代码。 因此调试waf2的网页，我们需要掌握一些waf2重要的调试点。在waf2网页上，我们点击一个按钮，会经过框架层层转发交由eventbus.js 寻找对应事件注册的处理函数，并触发函数的处理。知道这一点，我们就可以在eventbus.js 关键的执行点打断点，尝试找到点蛛丝马迹。 给点提示，我们可以关注eventbus.js 的fireEvent方法中的三个处理，即**事件执行前处理**，**当前事件处理** 和 **事件执行后处理**。在上述三个处理代码中，我们发现框架会从**beforeEventList**,**currentEventList** 和 **afterEventList** 中取出事件注册的处理方法[变量 handler]。我们只需要在取出handler后打上断点，对handler变量进行监视，利用章节1提供的技巧，便可顺利跳转到该事件处理的业务代码的位置了。  ## 3. 总结 至此，笔者在文章的第一章节分享了浏览器的一些调试技巧，并在第二章节应用该技巧解决了新手经常会碰到的问题，即在不熟悉代码的情况下如何找到事件处理函数具体位置的问题。