通过实例解析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 相关文章推荐
jQuery中filter(),not(),split()使用方法
Jul 06 Javascript
jQuery 遍历- 关于closest() 的方法介绍以及与parents()的方法区别分析
Apr 26 Javascript
原生JS实现加入收藏夹的代码
Oct 24 Javascript
Three.js学习之正交投影照相机
Aug 01 Javascript
BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案
Dec 14 Javascript
用原生js做单页应用
Jan 17 Javascript
angular.js实现购物车功能
Oct 23 Javascript
vue+webpack实现异步组件加载的方法
Feb 03 Javascript
Servlet3.0与纯javascript通过Ajax交互的实例详解
Mar 18 Javascript
JS实现的JSON数组去重算法示例
Apr 11 Javascript
使用Vuex解决Vue中的身份验证问题
Sep 28 Javascript
JS函数进阶之prototy用法实例分析
Jan 15 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
基于mysql的bbs设计(二)
2006/10/09 PHP
深入理解PHP中的global
2014/08/19 PHP
PHP微信开发之二维码生成类
2015/06/26 PHP
WordPress迁移时一些常见问题的解决方法整理
2015/11/24 PHP
PHP设计模式之适配器模式(Adapter)原理与用法详解
2019/12/12 PHP
JS日历 推荐
2006/12/03 Javascript
解决FLASH需要点击激活的代码
2006/12/20 Javascript
JavaScript 精粹读书笔记(1,2)
2010/02/07 Javascript
jQuery带箭头提示框tooltips插件集锦
2014/11/17 Javascript
JQuery CheckBox(复选框)操作方法汇总
2015/04/15 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
2016/01/14 Javascript
bootstrap提示标签、提示框实现代码
2016/12/28 Javascript
jquery uploadify隐藏上传进度的实现方法
2017/02/06 Javascript
js实现百度登录框鼠标拖拽效果
2017/03/07 Javascript
深入探讨JavaScript的最基本部分之执行上下文
2019/02/12 Javascript
vue使用video.js进行视频播放功能
2019/07/18 Javascript
Vue中使用Lodop插件实现打印功能的简单方法
2019/12/19 Javascript
js中addEventListener()与removeEventListener()用法案例分析
2020/03/02 Javascript
Vue实现小购物车功能
2020/12/21 Vue.js
如何封装Vue Element的table表格组件
2021/02/06 Vue.js
详解Python中的__init__和__new__
2014/03/12 Python
django启动uwsgi报错的解决方法
2018/04/08 Python
Python中的 ansible 动态Inventory 脚本
2020/01/19 Python
Python list和str互转的实现示例
2020/11/16 Python
浅谈HTML5 FileReader分布读取文件以及其方法简介
2017/11/09 HTML / CSS
利用 Canvas实现绘画一个未闭合的带进度条的圆环
2019/07/26 HTML / CSS
车间班长岗位职责
2013/11/30 职场文书
法学研究生自我鉴定范文
2013/12/04 职场文书
护理实习自我鉴定
2013/12/14 职场文书
如何打造一封优秀的留学推荐信
2014/01/25 职场文书
中介业务员岗位职责
2014/04/09 职场文书
机械制造专业大学生自我鉴定
2014/09/19 职场文书
租车协议书范本2014
2014/11/17 职场文书
导游词之茶卡盐湖
2019/11/26 职场文书
php TP5框架生成二维码链接
2021/04/01 PHP
详解Mysql数据库平滑扩容解决高并发和大数据量问题
2022/05/25 MySQL