用本地js文件替换网站上的js文件来调试第三方网站

You, • web development
Back

以百度为例

需求

在点击百度搜索按钮的时候 alert 一个 字符串 “I am in!” 同时 console.log("I am in!")

步骤

查找 点击“百度一下”调用的哪个 js，哪段代码

  1. F12 打开开发者模式
  2. 点击 Element Tab, 左上角的箭头，点击“百度一下”按钮，可以看到 一个 span 包含了一个 按钮
  3. 右键这个 span element ’ 分别是这几个意思,如果想要监听这个元素本身的变化，用下面这三个

如果是要看点击对应的js文件和代码 选中 element 后 点击右边的 eventListener ，相对应的时间都在下面，选择 click，可以看到很多个，找第一个试试看

右键文件名-> Reveal in sidebar，可以在左边栏找到 对应js文件的 相对位置

准备替换文件夹

在本地电脑新建一个文件夹，我取名为 test 然后点击左边栏 的 Overrides tab页

Select folder for overrides ,选择刚才那个 test 文件夹,记得允许权限

现在 override 的 test 是没有任何东西的，回到 page tab

选择刚才选中的 js文件,save for overrides

回到 Overrides tab，可以看到 已经有东西了，并且紫色原点表示 已经启用 回到电脑本地的文件夹内，也能看到 js文件了

此时就可以修改 这个文件来实现实时修改 js 了

修改js

打开 本地的 js 文件一看

好乱，怎么改？ 回到 chrome，选择对应的文件，复制它，因为它比较 pretty(刚才就应该复制好的) 或者使用网站来美化一下 js 代码 https://deobfuscate.io/

然后把美化过的，复制到编辑器中

然后回到刚才 查找的点击按钮对应的 代码位置 是这里吧，加入我想要的代码

保存！

打开百度，点击按钮！ 居然没有生效！！！ 再看一下 按钮的 click

还是要先打个断点确保调用了那个函数，不然前面白做了 成功出现 I am in 的 alert

其他网站就举一反三吧。

优势

这种修改方式是持久化的，也就是说，哪怕你关机重启，再打开目标网页，替换效果依然存在，而且你在本地对目标文件做的修改都会同步到页面上，非常好用！

参考

© 365有活宝. 粤ICP备2021106758号