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

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

image.png

第9655行如图

image.png

发现并不是真正的源码,并且只要是click事件,都是如下代码:

function noop() {}

真正的源码应该形如:

image.png

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

阅读 4.2k
3 个回答

拿左边这个点赞举个例子

image.png

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

跟进去,再 format 就看到了:

image.png

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

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

image.png

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏