通过实例解析vuejs如何实现调试代码


Posted in Javascript onJuly 16, 2020

基于webpack的配置调试

使用Vue-cli命令行工具初始化基于wabpack模板的项目的命令语法:

npm install -g @vue/cli         # 全局安装vue-cli,版本vue3.x
vue init webpack [my-project] [app-name] # 使用vue-cli初始化一个完整的webpack项目。
cd my-project              # 进入目录
npm install               # 安装依赖 (package.json)
npm start                # 启动开发环境版本

在config/index.js文件中更改devtool配置为source-map:

module.exports = {
   devtool: 'source-map',//默认是:cheap-module-eval-source-map
}

设置为source-map,则可以生成.map文件,在chrome浏览器中调试的时候可以显示源代码,效果如下:

通过实例解析vuejs如何实现调试代码

cheap-module-eval-source-map选项效果:

通过实例解析vuejs如何实现调试代码

webpack中devtool的其它选项各代表什么呢:

  • 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 进行简化,然后再次生成的。

基于vue-cli的配置调试

vue-cli是基于webpack的打包的效果和上面的一样,只是配置不一样。

在vue.config.js文件中加如下配置即可:

module.exports = {
  configureWebpack: {
    devtool:'souce-map'
  }
}

vscode编辑器调试

vscode 调试一直有问题,debug模式已启动一会就一定卡死,尝试很多方式没成功过

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
自动更新作用
Oct 08 Javascript
简单的JS多重继承示例
Mar 13 Javascript
javascript tips提示框组件实现代码
Nov 19 Javascript
Jquery 插件开发笔记整理
Jan 17 Javascript
浅谈js中变量初始化
Feb 03 Javascript
浅谈Javascript数组索引
Jul 29 Javascript
Javascript基础_嵌入图像的简单实现
Jun 14 Javascript
详解JS去重及字符串奇数位小写转大写
Dec 29 Javascript
Vue.js划分组件的方法
Oct 29 Javascript
JavaScript常用数组操作方法,包含ES6方法
May 10 Javascript
Vue引用Swiper4插件无法重写分页器样式的解决方法
Sep 27 Javascript
JS多个表单数据提交下的serialize()应用实例分析
Aug 27 Javascript
详解js中的几种常用设计模式
Jul 16 #Javascript
JS寄快递地址智能解析的实现代码
Jul 16 #Javascript
详解js中的原型,原型对象,原型链
Jul 16 #Javascript
详解Webpack4多页应用打包方案
Jul 16 #Javascript
快速了解Vue父子组件传值以及父调子方法、子调父方法
Jul 15 #Javascript
微信小程序12行js代码自己写个滑块功能(推荐)
Jul 15 #Javascript
TypeScript 引用资源文件后提示找不到的异常处理技巧
Jul 15 #Javascript
You might like
Bo-Blog专用的给Windows服务器的IIS Rewrite程序
2007/08/26 PHP
php调用Google translate_tts api实现代码
2013/08/07 PHP
php生成图形(Libchart)实例
2013/11/06 PHP
CodeIgniter生成静态页的方法
2016/05/17 PHP
PHP学习笔记之php文件操作
2016/06/03 PHP
Laravel5.1自定义500错误页面示例
2016/10/09 PHP
PHP读取文本文件并逐行输出该行使用最多的字符与对应次数的方法
2016/11/25 PHP
使用prototype.js 的时候应该特别注意的几个问题.
2007/04/12 Javascript
js程序中美元符号$是什么
2008/06/05 Javascript
JS写的数字拼图小游戏代码[学习参考]
2008/10/29 Javascript
在jQuery1.5中使用deferred对象 着放大镜看Promise
2011/03/12 Javascript
js判断手机浏览器操作系统和微信浏览器的方法
2016/04/30 Javascript
Bootstrap布局之栅格系统详解
2016/06/13 Javascript
浅谈jQuery animate easing的具体使用方法(推荐)
2016/06/17 Javascript
微信小程序之购物车功能
2020/09/23 Javascript
Webpack执行命令参数详解
2017/06/17 Javascript
Vue父组件调用子组件事件方法
2018/02/23 Javascript
浅析前端路由简介以及vue-router实现原理
2018/06/01 Javascript
基于JS实现父组件的请求服务过程解析
2019/10/14 Javascript
vue h5移动端禁止缩放代码
2019/10/28 Javascript
React实现todolist功能
2020/12/28 Javascript
python使用epoll实现服务端的方法
2018/10/16 Python
Pytorch 计算误判率,计算准确率,计算召回率的例子
2020/01/18 Python
Django choices下拉列表绑定实例
2020/03/13 Python
使用HTML5中的contentEditable来将多行文本自动增高
2016/03/01 HTML / CSS
荷兰网上买鞋:MooieSchoenen.nl
2017/09/12 全球购物
Laura Geller官网:美国彩妆品牌
2018/12/29 全球购物
AssertionError 跟一下那个类是 “is – a”的关系
2012/02/21 面试题
中学生自我鉴定
2014/02/04 职场文书
药学职务聘任书
2014/03/29 职场文书
世界文化遗产导游词
2015/02/13 职场文书
党员个人承诺书
2015/04/27 职场文书
毕业论文致谢部分怎么写
2015/05/14 职场文书
2016国培研修心得体会
2016/01/08 职场文书
导游词之秦皇岛燕塞湖
2020/01/03 职场文书
python热力图实现的完整实例
2022/06/25 Python