不是哥们，我的console.log突然打印不出东西了！

大家好，我是小寒！一枚默默搬砖的前端开发者！

在上个月的时候的一天早上，我还在一如既往的写代码，突然调试的时候，我的console.log在控制台突然打印不出东西了，于是我开始bug排查大法。

检查代码
禁用缓存
刷新页面
运行npm run serve重启devServer（因为写的是vue项目）

经过这一系列操作下来，发现并没有什么卵用，盯着那些代码看，眼睛都看花了都没看出来有什么问题，让同事帮忙看了一下，还是没发现问题，后面还是用浏览器的无痕模式才发现端倪。

在无痕模式下，发现是可以正常打印的，所以首先就怀疑是浏览器插件 的问题，于是在正常模式下，把所有chrome扩展插件全部禁用，果然发现可以正常打印了，然后利用二分法（即先开一半的插件，看是否正常，如果正常，那么有问题的插件就在另一半中，依此类推），经过一顿查找，终于找到罪魁祸首了，就是这个SuperCopy 超级复制插件。

当时非常气愤，于是跑到chrome管理商店去看了下评论区，果然有很多道友也跟我一样，被这个插件给坑了！

后面插件官方的开发者解释说，是因为日志打印功能错误的发布到了商店版本中 ，我的天，这种低级的错误也能犯的么，责任人今年的年终奖估计要被扣了吧！

开始寻找替代方案

自从出了这个事之后，这个插件就给我留下了不太靠谱的印象，而且在评论区有用户评论说，这个插件会劫持用户访问流量添加自己的返利链接，虽然没去验证真假，但宁可信其有不可信其无，所以我就开始寻找替换方案了。

、

既然说到破解禁止复制，肯定是先了解下禁止复制的原理。

网页禁止复制的原理

我们在网页中进行复制的时候，会触发copy事件，我们只需要在事件回调进行处理下，用户就不能复制内容了。

js 复制代码

document.addEventListener('copy', function (e) {
    // 阻止默认行为，会让复制失败
    e.preventDefault();
});

当然，我们还可以再阻止用户复制之后，手动向剪切板里写入内容。

js 复制代码

document.addEventListener('copy', function (e) {
    e.preventDefault();
    // 向剪切板写入文本内容
    e.clipboardData.setData('text/plain', '不准复制，先打钱!');
});

既然知道了原理，那我们就可以着手解决了。

方案一：在控制台禁用JavaScript

在网页中，先按F12打开控制台，然后点击设置，勾选禁用JavaScript。

不过这种方式虽然能复制成功，但会让页面很多功能异常，不是很好用。

方案二：找到copy事件进行移除

按照上图的3步走，手动移除copy事件的监听即可。

方案三：Ctrl + P，让复制变打印

在网页中，我们可以按Ctrl + p进行打印界面，然后我们可以直接在打印左侧的预览区域中直接选中文本进行复制，十分方便。

方案四：Ctrl + S 把网页保存离线文件到本地

我们可以在网页中按Ctrl + s将整个网页的资源都下载到本地，然后在编辑器里打开，自然就可以随意复制粘贴了。

或者你如果只需要复制一小段的话，直接在控制台的Elements区域选中复制就行了。

方案五：截图 + OCR识别

像前面几种方案，遇到百度文库这种把DOM转成Canvas的高级防复制手段，就束手无策了。

这时候就可以用到截图 + OCR图片识别方案，这种其实就是万能破解方案。

现在其实微信中就自带OCR功能，可以直接从图片中提取文字，你只需要截图发在微信中，然后点击提取文字就好了。或者你也可以用三方的OCR插件，像我自己的话，平常喜欢用的是uTools的OCR文字识别插件，很方便。

方案六：浏览器插件

我之前一直是用chrome的插件，其实还是挺方便的，结果就出了这档子事，当然不能把所有插件一棍子打死，chrome应用商店中还有其他的破解复制的插件，大家也可以试一下。

个人选择

以上五种方案其实都可以用，我自己的话，一般还是用谷歌浏览器插件，只不过原来那款不用了，我找了一个替代品（这里就不给大家推荐了，毕竟自己用的时间还不长），如果遇到插件解决不了的，我就不会用截图 + OCR识别去解决。

事后的反思

后面在看vue源码时，突然联想到一个更好的排查方案，如果怀疑某个方法是不是原生的，即有没有被改写，有更好的方式。

在控制台上直接输出一下，看有没有「native code」输出
直接用这个isNative方法进行判断

ts 复制代码

export function isNative(Ctor: any): boolean {
  return typeof Ctor === 'function' && /native code/.test(Ctor.toString())
}

如果当时能在控制台输出一下console.log，那么应该就能第一时间就发现问题了，不需要排查大半天。

只能说当时没想到这种排查问题的方式吧，幸好当时做的需求不太紧急，不然就要加班了~