vue + webpack +chrome 调试

im, 无色
im, 无色
im, 无色
884
文章
0
评论
2019年7月1日15:47:48 评论 615

问题描述

vue 经过webpack的打包压缩之后,通过source看到的代码已经面目全非,无法轻易对代码进行调试。最近整理一下针对vue的调试方法。

一、 devtools

devtools是Chrome的调试vue的插件,可以直接显示VUE组件现在的状态。
安装方法是在Chrome浏览器的扩展插件仓库里搜vue devtool,安装Vue.js devtools后结合下面这张官方动图,
139062-20180515165823688-1885930023 (1).gif
139062-20180515165823688-1885930023.gif
vue + webpack +chrome 调试

devtools 只能调试开发环境的代码,正式环境没办法调试

二、 使用debugger和sourcemap调试Vue组件

关于webpack的sourcemap一共有7中配置,sourcemap 是指模块引入方式和源文件对应关系,不同的配置会影响打包的速度,和是否能追寻到源代码。

  1. eval 文档上解释的很明白,每个模块都封装到 eval 包裹起来,并在后面添加 //# sourceURL
  2. source-map 这是最原始的 source-map 实现方式,其实现是打包代码同时创建一个新的 sourcemap 文件, 并在打包文件的末尾添加 //# sourceURL 注释行告诉 JS 引擎文件在哪儿
  3. hidden-source-map 文档上也说了,就是 soucremap 但没注释,没注释怎么找文件呢?貌似只能靠后缀,譬如 xxx/bundle.js 文件,某些引擎会尝试去找 xxx/bundle.js.map
  4. inline-source-map 为每一个文件添加 sourcemap 的 DataUrl,注意这里的文件是打包前的每一个文件而不是最后打包出来的,同时这个 DataUrl 是包含一个文件完整 souremap 信息的 Base64 格式化后的字符串,而不是一个 url。
  5. eval-source-map 这个就是把 eval 的 sourceURL 换成了完整 souremap 信息的 DataUrl
  6. cheap-source-map 不包含列信息,不包含 loader 的 sourcemap,(譬如 babel 的 sourcemap)
  7. cheap-module-source-map 不包含列信息,同时 loader 的 sourcemap 也被简化为只包含对应行的。最终的 sourcemap 只有一份,它是 webpack 对 loader 生成的 sourcemap 进行简化,然后再次生成的。

webpack 不仅支持这 7 种,而且它们还是可以任意组合的,就如文档所说,你可以设置 souremap 选项为 cheap-module-inline-source-map。
经过测试只要包含source-map,都能找到debug的源文件,只有eval环境下是转译之后的文件。

关于debuger webstrom的debug标记是不起作用的 需要手动加入debuger命令

 created() {
    debugger
    this.eventBus = bus;
    console.log(this.eventBus);
 }

vue + webpack +chrome 调试

im, 无色
  • 本文由 发表于 2019年7月1日15:47:48
遨游浏览器崩溃原因与解决办法? 其他

遨游浏览器崩溃原因与解决办法?

Q、浏览器崩溃原因 1.页面过多,资源被强占,内核负载量过多; 2.存在残留进程被锁定,导致再次启动浏览器时无法启动或崩溃; 3.用户安装的扩展导致浏览器不稳定,从而闪退; 4.账号数据异常触发了浏览...
遨游浏览器下载 for MAC 浏览器下载

遨游浏览器下载 for MAC

官网:http://www.maxthon.cn/   傲游浏览器是符合中国人使用习惯的多标签浏览器, 拥有业界最优秀的在线收藏和广告过滤功能, 并囊括了智能填表、超级拖放、鼠标手势、分屏浏览等众多易...
用VueJS写一个Chrome浏览器插件 Chrome开发

用VueJS写一个Chrome浏览器插件

浏览器基本已经天下大统了,放眼望去都是Chromium的天下。那么,能写一个浏览器插件也算是一种回报率不错的技能。 基本知识 浏览器插件官方的说法叫扩展程序,允许你为浏览器增加各种功能,但不需要深入研...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: