vue + webpack +chrome 调试

BWrong 发布于2019-08-23 12:49 / 2422人阅读

摘要：最近整理一下针对的调试方法。一是的调试的插件，可以直接显示组件现在的状态。最终的只有一份，它是对生成的进行简化，然后再次生成的。关于的标记是不起作用的需要手动加入命令

问题描述

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

一、 devtools

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

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

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

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

eval 文档上解释的很明白，每个模块都封装到 eval 包裹起来，并在后面添加 //# sourceURL

source-map 这是最原始的 source-map 实现方式，其实现是打包代码同时创建一个新的 sourcemap 文件，并在打包文件的末尾添加 //# sourceURL 注释行告诉 JS 引擎文件在哪儿

hidden-source-map 文档上也说了，就是 soucremap 但没注释，没注释怎么找文件呢？貌似只能靠后缀，譬如 xxx/bundle.js 文件，某些引擎会尝试去找 xxx/bundle.js.map

inline-source-map 为每一个文件添加 sourcemap 的 DataUrl，注意这里的文件是打包前的每一个文件而不是最后打包出来的，同时这个 DataUrl 是包含一个文件完整 souremap 信息的 Base64 格式化后的字符串，而不是一个 url。

eval-source-map 这个就是把 eval 的 sourceURL 换成了完整 souremap 信息的 DataUrl

cheap-source-map 不包含列信息，不包含 loader 的 sourcemap，（譬如 babel 的 sourcemap）

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);
 }

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99031.html

Visual Studio Code 断点调试 Vue

摘要：个人还是更加习惯于断点调试。这篇文章将介绍如何配置和来完成直接在断点调试代码并且在的调试窗口看到中相同的值。现在就可以在文件的代码中打断点进行调试了。很多人习惯在 Chrome 的调试窗口中调试 Vue 代码，或者直接使用 console.log 来观察变量值，这是非常痛苦的一件事，需要同时打开至少 3 个窗体。个人还是更加习惯于断点调试。这篇文章将介绍如何配置 Visual S...

qpwoeiru96 2019-08-22 14:51 评论0 收藏0
weex初探

摘要：解决在文件中，多页面配置默认是单页面效果，首先，真正运行的是，通过作为入口文件文件，通过，将文件打包成进行使用。多页面的重点，就是将独立页面的文件，生成多个文件。的入口和出口配置参考文件，创建一个，作为的入口，用于生成页面。前言 RN weex hippy taro 1.Weex与RN 比较 showImg(https://segmentfault.com/img/bVbvfFL?w...

Cruise_Chan 2019-08-02 15:33 评论0 收藏0
weex初探

摘要：解决在文件中，多页面配置默认是单页面效果，首先，真正运行的是，通过作为入口文件文件，通过，将文件打包成进行使用。多页面的重点，就是将独立页面的文件，生成多个文件。的入口和出口配置参考文件，创建一个，作为的入口，用于生成页面。前言 RN weex hippy taro 1.Weex与RN 比较 showImg(https://segmentfault.com/img/bVbvfFL?w...

biaoxiaoduan 2019-08-26 10:11 评论0 收藏0
前端资源系列（4）-前端学习资源分享&前端面试资源汇总

摘要：特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。本以为自己收藏的站点多，可以很快搞定，没想到一入汇总深似海。还有很多不足&遗漏的地方，欢迎补充。有错误的地方，还请斧正... 托管: welcome to git，欢迎交流，感谢star 有好友反应和斧正，会及时更新，平时业务工作时也会不定期更...

princekin 2019-08-20 11:28 评论0 收藏0
一步一步创建vue2.0项目（一）

摘要：一步一步创建项目已经发正式版本了，来研究一下吧新建一个文件夹。文件内容本身是一个字符串，不仅仅是一个对象。代码如下下一步开始创建文件。一步一步创建vue2.0项目 vue2.0已经发正式版本了，来研究一下吧新建一个文件夹 vue2.0-learn 。_前提是默认已经安装了nodejs和npm_ npm init 按照步骤初始化package.json，这个文件提供了这个项目需要...

ranwu 2019-08-20 15:58 评论0 收藏0