likes
comments
collection
share

当chrome中Vue图标亮但控制台无显示时

作者站长头像
站长
· 阅读数 34

当某日学习时,我看着屏幕上老师控制台中的Vue陷入了沉思

我的Vue呢????

被电脑当作早餐吃掉了吗!!!!

快给我吐出来啊!!!

当chrome中Vue图标亮但控制台无显示时

如果有同样遇到这类问题的兄弟姐妹,欢迎前来收看催吐之——如何让chrome吐出控制台中的Vue选项

(从网络上找到并尝试了n种方法,不知道究竟是哪种起了作用)

咳咳,首先让我们先来浅浅分析一哈子

点击亮晶晶的Vue图标,你会发现这样子一坨东西 "Vue.js is detected on this page. Devtools inspection is not available because it's in production mode or explicitly disabled by the author. "

凭借我有限的英语知识翻译一哈: 在此页面上检测到Vue.js。开发工具检查不是 可用,因为它处于生产模式或由作者显示禁用。 ”

抓到重点:

     1.处于生产模式

     2.作者显示禁用

也就是说,解决这两个问题就可以了!!!

那么第一步:

当chrome中Vue图标亮但控制台无显示时 在Vue官网安装选项中有两个版本,一个开发版本,一个生产版本。已知生产模式是带"min"的那个文件。那在引用Vue的时候我们把它换成不带"min"的那一个不就好了嘛!!!

当chrome中Vue图标亮但控制台无显示时 (如图,我们引入第一个 Vue.js)

好!让我们刷新尝试一下:

、、、

、、、

当chrome中Vue图标亮但控制台无显示时

我的还不可以,你们的出现了没😑

出现了的话就走吧,留我一人继续尝试≡(▔﹏▔)≡

当chrome中Vue图标亮但控制台无显示时

呀!你还在看!吼吼,不止我一个人的Vue没被吐出来啊(¬‿¬)

那我们接着进行第二次尝试:

在JS最上面加上这一小撮试试: Vue.config.devtools = true;

(如果引用了min版本,不想换为另一版本的话可以加这句话尝试一哈)

(这句话对开发版本半点用也无)

再刷新一下(´ー∀ー·)

当chrome中Vue图标亮但控制台无显示时

emmmmmmm,我的还不可以😑

勇敢牛牛 不怕困难 让我们开始第三次实验

  • 去google浏览器的扩展程序中找到devtools的ID并复制下来

当chrome中Vue图标亮但控制台无显示时

  • 找到google浏览器数据目录(C盘\Users\系统用户名\AppData\Local\Google)

  • 再将复制好的ID放到搜索框中搜索,找到对应的文件夹

  • 打开里面的manifest.json文件

  • 将里面的"persistent": false

    改为 "persistent": true

    *别问这一步为什么没有配图,问就是懒O_O

再刷新一下试试(●'◡'●)
当chrome中Vue图标亮但控制台无显示时

你们的好了不!!!!!!反正我是没有X﹏X

来来来,也不差第四步了

  • 再次找出这个框框

当chrome中Vue图标亮但控制台无显示时

  • 点击详情

像下图一样,勾上“无痕模式启用”和“允许访问文件网址”两个选项以及选中“在所有网站上” 当chrome中Vue图标亮但控制台无显示时

好,兄弟们,我们再次刷新

当chrome中Vue图标亮但控制台无显示时

我的!还没出现!!!!!

然后,然后, 就是那么的阴差阳错,我突然发现我不知道什么时候又用生产版本代替了开发版本(•_•)

当我再次换回开发版本

当chrome中Vue图标亮但控制台无显示时

咦!!我中了

当chrome中Vue图标亮但控制台无显示时

虽然不知道哪步发挥了作用,但是!!!!Vue最终被吐出来了(¬‿¬)

虽然1000字的文章900字的废话,但是!你们成功了不?

转载自:https://juejin.cn/post/7206950454097838136
评论
请登录