专栏首页艺述思维14 上线后不想让人看到源码怎么做?

14 上线后不想让人看到源码怎么做?

如果不做任何处理,默认程序员是可以看到的。

目录

如何调试数据?

在安装了Vue Devtools之后,在chrome浏览器开发模式下,打开vue面板,选择组件,然后就可以直接查看和修改data数据:

修改之后,视图即刻更新。当调试vue项目时,浏览器工具栏的Vue Devtools图标是点亮的,其它时间默认是灰色的。

如何安装 Vue Devtools?

Vue Devtools是一款基于chrome游览器的插件,用于调试vue项目。最简单的安装方式,是直接从Google Chrome Webstore安装:

https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

如果不方便访问墙外资源或者想体验最新的开发版,可以从源码安装。安装步骤为:

  1. 克隆源码https://github.com/vuejs/vue-devtools至本地
  2. 安装模块依赖yarn install
  3. 编译yarn run build
  4. 在浏览器新tab页中打开chrome://extensions/
  5. 勾选"开发者模式"
  6. 单击 "加载已解压的扩展程序", 并且选择刚才编译的项目其目录下的shells/chrome文件夹

关于 persistent 选项等

如果扩展程序不能正常工作,通过chrome://version/查看个人资料路径:

打开该目录,在子目录下打开新安装的插件目录。子目录下mainifest.json文件是浏览器插件的配置文件,在这个文件内找到有关background的配置:

将把"persistent":false改成true。据官方文档介绍:

persistent is A Boolean value. true,indicates the background page is to be kept in memory from when the extension is loaded or the browser starts until the extension is unloaded or disabled, or the browser is closed (i.e. the background page is persistent). false,indicates the background page may be unloaded from memory when idle and recreated when needed. Such background pages are often called Event Pages, because they are loaded into memory to allow the background page to handle the events to which it has added listeners. Registration of listeners is persistent when the page is unloaded from memory, but other values are not persistent. If you want to store data persistently in an event page, then you should use the storage API.

persistent这个配置项决定扩展程序的后台持续可用性。只有当设置为true时,表示扩展程序在启动后会一直保持在系统内存中,直到扩展被卸载、禁用或浏览器关闭。

如果还不能正常调试,在浏览器中打开chrome://extensions/,查看这个“访问本地文件”的选项是否勾选:

此外,项目要运行在development模式下(即以yarn serve启动)。还有,在vue.config.js中,vue$不能指向生产环境的运行时版本或是压缩的min版本。

在开发者调试模式下,查看sources面板,可以看到引用的是vue.esm.js版本:

在运行时如何查看源码?

sources面板中,单击暂停script按钮,有交互事情发生时,即会打开vue.esm.js文件源码。

调试时为什么可以看到源码?

调试模式下,打开html页面源码查看,生成的js代码都是经过压缩的,但是在sources面板中看到的源码却是格式化的:

这是为什么?

因为vue编译启用了source map。在vue.config.js配置中,选项productionSourceMap用于决定是否启用,并且其默认值为true

现在将其修改为false

productionSourceMap: process.env.NODE_ENV === 'production' ? false : true,

接下来我们验证一下,在生产模式下编译生成的软件包,还能否看到开发源码。首先我们需要在本地启动一个web server,这一步可以通过简单安装一个现成的webserver插件实现。

全局安装webserver

yarn global add webserver

接着执行项目编译:

yarn build

然后启动本地webserver

webserver 8090 ./dist/

通过浏览器打开http://localhost:8090/,试图查看源码,发现此时源码已非格式化了:

当启用source map时,通过查看编译生成的文件,可以发现包括这样的内容:

//@ sourceMappingURL=xx.min.map
或者
sourceMappingURL=data:application/json;charset=utf-8;base64...

Source map是一个信息文件,里面储存着位置信息。包括代码转换后的位置,及转换前的位置。有了这个文件,当代码出错的时候,调试工具将直接显示原始代码,而不是转换后的代码。

可以识别Source map这种文件,是chrome浏览器本身就具有的功能。在Developer ToolsSetting设置中,可以看到"Enable JavaScript source maps"的选项:

为什么 Vue Devtools 可以修改项目的运行时数据?

在前面我们曾经使用vue面板,直接修改了vue组件的运行时数据。这是怎么做到的?

这是vueVue Devtools扩展通过合作完成的。vue框架本身在开发模式下,如果察觉到自己处于浏览器宿主环境下,并且宿主环境安装了deltools(即Vue Devtools),则向devtools发送一个init事件:

而在vue-devtools/src/hook.js文件源码中,直接监听了这个init事件,用于初始化扩展程序的生命周期:

hook.once('init', Vue => {
    hook.Vue = Vue

    Vue.prototype.$inspect = function () {
      const fn = target.__VUE_DEVTOOLS_INSPECT__
      fn && fn(this)
    }
  })

Vue Devtools通过向浏览器全局注入,让vue察觉到工具扩展的存在。随后在两者之间建立了一个web socket通道,以此实现了双向通讯。

源码

https://git.code.tencent.com/shiqiaomarong/vue-go-rapiddev-example/tags/v202001092

参考链接

  • https://www.jianshu.com/p/dab699ca2fd4
  • https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/background
  • https://www.jb51.net/article/150335.htm
  • https://github.com/vuejs/vue-devtools
  • http://www.ruanyifeng.com/blog/2013/01/javascript_source_map.html

本文分享自微信公众号 - 艺述思维(yishulun2005),作者:石桥码农

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-01-09

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue 全家桶、原理及优化简议

    使用过vue的程序员一般这样评价它,“vue.js兼具angular.js和react.js的优点”。Vue.js 是一个JavaScript MVVM(Mod...

    石桥码农
  • vue 开发常用工具及配置一

    访问 nodejs.org 下载。这是必不可缺的环境之一。下载最新的 LTS 版本。LTS 代表长期维护,通常比较稳定。

    石桥码农
  • vue 开发常用工具及配置三

    在现在的前端开发中,前后分离、模块化、版本控制、文件合并与压缩、mock数据等,是在大前端开发避不开的概念。在开发的时候,以组件的方式分别开发,在部署的时候又将...

    石桥码农
  • 如何处理VirtualBox启动错误消息:The vboxdrv kernel module is not loaded

    Starting local Kubernetes v1.10.0 cluster…

    Jerry Wang
  • 如何处理VirtualBox启动错误消息:The vboxdrv kernel module is not loaded

    Starting local Kubernetes v1.10.0 cluster...

    Jerry Wang
  • 原创译文 | 新闻自由基金会现接受加密货币的捐赠方式

    新闻自由基金会现接受多种加密货币的捐赠,包括比特币、比特币现金、以太坊、莱特币以及zcash。

    灯塔大数据
  • CodeForces 156B Suspects(枚举)

    B. Suspects time limit per test 2 seconds memory limit per test 256 megaby...

    ShenduCC
  • PAT 1004

    A family hierarchy is usually presented by a pedigree tree. Your job is to count...

    week
  • 今日可抢回程火车票,实测两款GitHub开源抢票插件,所有坑我们都帮你踩过了

    如果你对自己手速和市面上的各种“加速包”都没什么信心的话,不妨试试用程序员的手段抢票?

    量子位
  • 原创10000+生信教程大神给你的RNA实战视频演练

    推荐使用偷懒方法,比如安装miniconda软件,下载地址:https://mirrors.tuna.tsinghua.edu.cn/anaconda/mini...

    生信技能树

扫码关注云+社区

领取腾讯云代金券