前端如何使用JS一键三连还能白嫖视频？

视频的一键三连

经常玩B站的同学一定知道，登录B站的情况下，长按视频的点赞按钮，会出现一键三连特效。如下图：

但是，币总是有用完的一天，恰好今天我们遇到一个想一键三连的up主，但是没有币了，该怎么做呢？

那么，我们退出登录然后长按点赞按钮不就行了😀

很可惜，不登录B站的情况下，长按视频的点赞按钮，会弹出登录框

作为一个前端，搞定这个弹框还不容易吗？上我们的调大法！没有什么能阻止我们给up主一键三连（baipiao）!

使用调试工具完成一键三连

要想通过js实现一键三连，我们大致的思路如下：

• 找到点赞对应的DOM元素
• 通过DOM元素找到其绑定的JS代码
• 定位到需要调试的代码
• 修改代码参数，实现一键三连

寻找DOM

首先，我们通过F12打开浏览器的调试工具栏，并进入【元素】面板。然后，鼠标移到点赞按钮上，找到其对应的DOM元素<div class="like-info">

找到DOM对应的js文件

点击我们找到的DOM元素<div class="like-info">节点，然后点击。

在右侧的工具面板里，我们选择事件监听器，为了更清楚的显示该DOM上绑定的事件，我们去除其祖先元素事件的勾选按钮，可以发现，该DOM上只有click、mousedown等四个事件。

由于一键三连需要长按点赞按钮，因此，其逻辑是绑定在mousedown上的事件。我们点击mousedown，找到其对应的JS源文件（video-nano.xxxx.js），然后进入。

代码定位

进入源文件后，我们会发现代码是被压缩的，问题不大，点击【代码格式化】按钮

代码格式化后，我们可以看到，此时光标位置在一个longclick事件内。

仔细观察代码，我们可以发现，其功能是基于vue进行开发的。这段代码逻辑很简单，在vue的install函数内，注册了一个名为longClick的指令，在bind钩子内，是该指令的核心逻辑。

对于vue指令不熟悉的同学，参考官网：https://v2.cn.vuejs.org/v2/guide/custom-directive.html

代码中的t参数是bind钩子的el（绑定的dom）对象，e是bind钩子的第二个参数binding。

bind指令钩子函数会被传入以下参数：

• el：指令所绑定的元素，可以用来直接操作 DOM。
• binding：一个对象，包含以下 property：
• name：指令名，不包括 v- 前缀。
• value：指令的绑定值，例如：v-my-directive=“1 + 1” 中，绑定值为 2。
• oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
• expression：字符串形式的指令表达式。例如 v-my-directive=“1 + 1” 中，表达式为 “1 + 1”。
• arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 “foo”。
• modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。

el绑定了mousedown事件，看来代码位置是没有问题的，长按是够一定时间后才执行的，所以一键三连的核心逻辑应该是在setTimeout函数内定义的，下个断点。

我们长按点赞按钮，触发函数的执行，然后我们点击【下一个函数调用】按钮，开始调试核心代码

更改代码参数实现一键三连

进入函数内部后，可以发现我们位于longClick函数内，点击单步执行函数按钮，鼠标移动到this.LOGIN_INFO.isLogin上时，显示其值为false

看来，B站是通过这个值来判断是否登录的，那么我们此时将这个值更改为true，岂不完成了一键三连？

进入控制台console面板，我们手动将 this.LOGIN_INFO.isLogin的值改为 true，回车保存

然后让函数继续执行

此时，我们就会惊奇的发现，一键三连成功了！

相信大家一定学会为喜欢的up主一键三连（baipiao）了，快去试试吧！

别忘了给我一键三联啊！！！录屏录了好久呢！忍心白嫖？？

失败问题

由于B站的页面是多种技术开发出来的，该方法目前只对Vue开发的页面有效。比如：如果一开始mousedown对应的源文件为sentry-5.7.1.min.js这类的，那么之后的步骤就都不可以了，只能换个视频（目前番剧都可以使用此调试方法）。

其他页面我还没有发现怎么调试，大家可以补充。