react中,click事件的源码怎么查看?

Question

背景:开发模式与生产模式下都开启了source-map,但是用chrome开发工具查看click事件的源码时,发现并不能找到真正的代码,如图所示

第9655行如图

发现并不是真正的源码,并且只要是click事件,都是如下代码
function noop() {}
真正的源码应该形如

所以怎么才能通过chrome开发工具,看到真正的源码呢?

Answer 1

拿左边这个点赞举个例子

首先inspect到这个元素，在右边的 event listeners 里面找到绑定在该元素上的点击事件：

hover 上去的时候高亮了，就是他，然后跟到右边的代码里面：

只有一行，那就点左下角的 format，找到调用的方法：

这个例子里面它叫做 ca，也是看不到方法内容。我们打个断点：

然后点赞！注意这个方法有可能在其他时候触发，我们不管，只看点赞触发的断点：

在 scope local 里面能看到本次调用触发的元素：

跟进去，再 format 就看到了：

Answer 2

假设你source-map加载成功了，那么是可以直接在控制台中通过commend + p(mac为例)搜到相关代码文件或者也直接可以找到原文件 然后进行debug，

Answer 3

也许你看的并不是 react 项目里源码，而是打包后未压缩的文件 😂 就跟 jQuery 一样，这样的打包文件是不利于阅读的。调试的时候真正的源码应该像这样：

顺便提一句，facebook并没有列出详细文档or教程该怎么调试react源码，而且react的类型检查基于自家的flow。其打包工具是babel，想要自己动手调试还是有一定难度的。。。