题外话:这几个月用vue写了三个项目了,从绊手绊脚开始慢慢熟悉,婶婶的感到语言这东西还是得有点框框架架,太自由了容易乱搞,特别人多的时候。
<强>从webpack开始
直接进入正题。有人觉得vue项目难调试,是因为用了webpack。所有代码揉在了一起,还加了很多框架代码,根本不知道怎么下手。所以vue + webpack调试要从webpack入手。我们先从一般情况开始说。
<代码> -sourcemap
webpack配置提供了devtool这个选项,如果设置为“#源图”,则可以生成. map文件,在chrome浏览器中调试的时候可以显示源代码。
然而这个设置实际上没这么简单.webpack官方给出了7个配置项供选择:戳这里
这里不同的配置有些不同的效果,比如是否保留注释,保留行信息等,具体每一条什么意思这里不详解释,有兴趣的童鞋可以参考这篇文章
官方默认的是用“# cheap-module-eval-source-map”
设置好之后,在vue项目调试的时候,代码里面标注调试器的时候就能看到对应的代码了,非常方便。
或者,直接找到对应的文件。在chrome用ctrl(命令)+ p,输入文件名,可以找到对应的源代码。
打断点:
需要注意的是,这里断点会打在下一行,同时一行代码运行在它的下一行才算执行。
<代码> -vue-cli
vue家的项目脚手架,推荐使用.vue-cli老家在这里
vue-cli可以帮我们自动搭建项目,首先npm全局安装
然后创建一个新的项目
一路回车,搞的定。(更多配置项请参考上面给出的vue-cli链接)
这里从网上下载了一个带webpack的vue项目(跑之前记得npm安装一下)
这是webpack热加载的服务器推送事件,eventsource类型,功能和websocket有点类似。大致作用是建立一个不会停止的流流链接,服务器发送更新数据回来添加到流的末端,前端读取最新追加的数据,然后动态的更新页面上的东西。
接下来我们观察下上文提到的更新数据有哪些。随便更新一个文件,触发热加载,再抓个包,发现有两个.hot-update.json和一个.hot-update.js文件
