好友
阅读权限10
听众
最后登录1970-1-1
|
吴天王
发表于 2020-9-30 01:11
系统：Windows10专业版64
工具：Chrome developer tools、postman
语言要求：JavaScript
第一步：打开调试工具，随便播放一首音乐
>如果是第一次播放，会请求一次音乐文件，之后都是读取的缓存。
图1
第二步：复制音乐文件地址，添加到断点。刷新页面看是否能捕获到该请求。刷新之后并没有捕获到，那么接下来换一种方式试试
图2
第三步：查看播放按钮的点击事件。在图3中，可以看到有好几个点击事件。为了确定哪一个点击事件是有效的播放事件，这里可以保留一个点击事件，其他的都移除（点击Remove）。
图3
第四步：经过筛选，获取到有效的播放事件
图4
第五步：点击该点击事件（图4红色框内蓝色字部分），随后会进入到一个JS文件，我们点击箭头指示的按钮，格式化这个文件。
图5
第六步：格式化之后，会进入到第1436行。这里下一个断点（断点位置会在1437行）
图6
第七步：刷新页面，然后点击播放按钮。如果不出意外，会进入到断点处。简单看下调用了什么函数，变量中有哪些信息。有没有特别的地方（主要寻找音乐文件的地址）
图7
第八步：单步调试，按F9或找一找图7红色框内第一行中的按钮。如果不知道这几个按钮是干什么的，那就随便点呗，反正点不坏！
图八是第一次单步之后的界面，这里也没有我想要的数据
图8
第九步：继续单步执行（大概走6、7步），直到图9这个地方。这里可以看到this.status中有了音乐文件的播放地址（this.status.src）；
图9（补）
第十步：搜索this.status.media或this.status.src赋值的地方，我只找到了this.status.media赋值的地方（图十中1265行）。
当然，这只是其中一种方式，还有其他方式也可以获取到这个播放地址，这里就只展示这一种。
在这里下个断点，然后刷新页面
图10
第十一步：查看调用的函数，其实根据函数名这里已经可以找到获取播放地址的地方了。
但有点偷懒的意思
图11
第十二步：从setMeIDA函数依次点击它下面的函数（先调用的函数在下面），直到图12这里，发现了media这个变量就是音乐文件地址
图12
第十三步：继续看下面的函数，图13中可以看到yesplay函数中对media进行了赋值
图13
第14步：在图13中520行下个断点，刷新页面。看看dict.get是干嘛用的。图14中可以到，它只是this变量中的一个值
图14
第15步：继续看下面的函数，直到getmusicinfo这个函数，这个函数中的item变量包含了音乐文件地址
图15
第16步：仔细看一下这个函数，如果在item变量没有值情况下，会请求一个JS文件。并把相应的数据储存到缓存中。
请求路径中的两个变量：id和tpath，id可以从当前播放路径获取，tpath不多说。
图16
第17步：postman测试API，结果：可以获取到。
图17
以下我总结三点
...
最后，如有违规我会及时删除
|
-
图12
-
图13
免费评分
-
查看全部评分
|
发帖前要善用【论坛搜索】功能，那里可能会有你要找的答案或者已经有人发布过相同内容了，请勿重复发帖。 |
|
|
|
|
|
|
|
发表于 2020-12-29 16:50
