如果不做任何处理,默认程序员是可以看到的。
目录
在安装了Vue Devtools
之后,在chrome
浏览器开发模式下,打开vue
面板,选择组件,然后就可以直接查看和修改data
数据:
修改之后,视图即刻更新。当调试vue
项目时,浏览器工具栏的Vue Devtools
图标是点亮的,其它时间默认是灰色的。
Vue Devtools
是一款基于chrome
游览器的插件,用于调试vue
项目。最简单的安装方式,是直接从Google Chrome Webstore
安装:
https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd
如果不方便访问墙外资源或者想体验最新的开发版,可以从源码安装。安装步骤为:
https://github.com/vuejs/vue-devtools
至本地yarn install
yarn run build
tab
页中打开chrome://extensions/
shells/chrome
文件夹如果扩展程序不能正常工作,通过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 Tools
的Setting
设置中,可以看到"Enable JavaScript source maps"的选项:
在前面我们曾经使用vue
面板,直接修改了vue
组件的运行时数据。这是怎么做到的?
这是vue
与Vue 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