你们要的chrome查找已知代码调试的方法来了
前两天这期排序的视频
好多小伙伴在问
怎么找到的那个排序的代码
虽然我在评论区里回复了
但还有很多小伙伴在问哈
首先呢我们先确定
找的需要是点击这个表头之后的代码
所以呢
我们就需要进到这个el-table里边
我们点进去
至于点进去这个插件哈我之前分享过
然后呢我们往下找
因为我们看的是点击表头的代码
所以我们要进到这个table-header
的组件里边
再点进去
然后这里边呢大家会发现
他用的是这种render的方式去
渲染的页面
所以呢我们可以往下找
看有没有关于salt有关的东西
salt
打开它
在这判断是不是sortable 可排序的
然后呢放这种小图标
然后呢点击之后走这个方法
然后我们再看这个方法
在这里
然后这些呢他其实在做页面上的效果
最后呢
他会掉一个这个commit一个这个方法
那这个方法在这个页面里是没有的
所以呢我们用全文搜找一下这个
但是这个注意啊
默认我们这个是关上的
我们要把这个开关打开
这样的话呢他会搜索所有文件
大概有这么多是吧
我们要找这个方法的定义
我们可以加小括号
看看小括号就没有了
或者我们加冒号
打开冒号就这几个
这样的话呢我们就找到这个方法了
这有一个table.js
还有一个element-ui的common
我们先不管这个
我们尽量看这个table.js里面的
然后呢进来
这有一个execQuery方法
我们再找到这个方法
大家看它有一个exec方法
这就离成功不远了
我们再去找这个方法
大家看 在这里
然后呢它又掉了watcher_sortData
我们继续往里找
找到这个方法
这个方法就好玩了哈
大家看它最终这样调用了一个方法
用object括起来
然后呢找到util数组里的i
但是呢它这有一个注释是orderBy
那我们先不管他为什么这样括起来哈
我们去找这个orderBy的方法
大家看 他在这这个是那个i
然后return一个orderBy
说明orderBby这里边是有一个方法的
大家看就这个
然后呢这就是那关键方法了
大家看这个get key
我们把它收起来
然后这有compare
这都是用变量来存储了两个方法
然后呢最终它return
array.map 然后 .sort 排序
关键的在这里大家看
然后呢我们就需要调试这个对吧
所以呢我们去找到
把这个（方法）签名啊
多选一点（尽量）把它复制一下
然后呢关键来了
我们去到页面里啊
打开这个network
然后选JS
我们刷新一下
这样的话呢页面加载JS都有了
然后在这个地方呢我们用 ctrl + option + F
在windows里应该是 ctrl + shift + F
然后呢我们把这个要搜索的粘到这
搜一下
好大家看搜到这么几个地方
然后呢下边它有一个带参数的
和一个不带参数的
其实都一样的
我们随便选一个
好呢
就是这个方法了打开我们就可以在这
打断点了
最后更新于