通过实例解析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 相关文章推荐
Javascript 遮罩层和加载效果代码
Aug 01 Javascript
前端开发过程中浏览器版本的两种判定方法
Oct 30 Javascript
JQuery实现倒计时按钮具体方法
Nov 14 Javascript
最短的IE判断var ie=!-[1,]分析
May 28 Javascript
Js的Array数组对象详解
Feb 22 Javascript
一些实用性较高的js方法
Apr 19 Javascript
浅谈如何实现easyui的datebox格式化
Jun 12 Javascript
webpack 静态资源集中输出的方法示例
Nov 09 Javascript
详解JWT token心得与使用实例
Aug 02 Javascript
Echarts地图添加引导线效果(labelLine)
Sep 30 Javascript
Javascript原型链及instanceof原理详解
May 25 Javascript
js之ajax文件上传
May 13 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
德生9700DX电路分析
2021/03/02 无线电
用PHP制作静态网站的模板框架(一)
2006/10/09 PHP
解析CI即CodeIgniter框架在Nginx下的重写规则
2013/06/03 PHP
PHP彩蛋信息介绍和阻止泄漏的方法(隐藏功能)
2014/08/06 PHP
php版微信公众平台实现预约提交后发送email的方法
2016/09/26 PHP
JavaScript/jQuery 表单美化插件小结
2012/02/14 Javascript
js中浮点型运算BUG的解决方法说明
2014/01/06 Javascript
浅谈JavaScript中定义变量时有无var声明的区别
2014/08/18 Javascript
Google Maps API地图应用示例分享
2014/10/23 Javascript
javascript实现checkBox的全选,反选与赋值
2015/03/12 Javascript
jQuery链式操作实例分析
2015/11/16 Javascript
使用vue编写一个点击数字计时小游戏
2016/08/31 Javascript
AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】
2016/11/02 Javascript
BootStrap select2 动态改变值的方法
2017/02/10 Javascript
微信小程序选择图片和放大预览图片功能
2017/11/02 Javascript
Vue2实时监听表单变化的示例讲解
2018/08/30 Javascript
nodejs 使用nodejs-websocket模块实现点对点实时通讯
2018/11/28 NodeJs
Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题
2019/04/16 Javascript
JavaScript 实现自己的安卓手机自动化工具脚本(推荐)
2020/05/13 Javascript
Selenium执行JavaScript脚本的方法示例
2020/12/31 Javascript
python 3.5下xadmin的使用及修复源码bug
2017/05/10 Python
python实现ID3决策树算法
2017/12/20 Python
python使用webdriver爬取微信公众号
2018/08/31 Python
python数值基础知识浅析
2019/11/19 Python
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
2016/06/28 HTML / CSS
HTML5拖放API实现自动生成相框功能
2020/04/07 HTML / CSS
MAC Cosmetics官方网站:魅可专业艺术彩妆
2019/04/10 全球购物
英国儿童设计师服装和玩具购物网站:Zac & Lulu
2020/10/19 全球购物
mysql_pconnect()和mysql_connect()有什么区别
2012/05/25 面试题
干部培训自我鉴定
2014/01/22 职场文书
奥巴马英文演讲稿
2014/05/15 职场文书
稽核岗位职责
2015/02/10 职场文书
环卫处个人工作总结
2015/03/04 职场文书
Html5大屏数据可视化开发的实现
2021/06/11 HTML / CSS
Java中多线程下载图片并压缩能提高效率吗
2021/07/01 Java/Android
十大最强电系宝可梦,阿尔宙斯电系之一,第七被称为雷神
2022/03/18 日漫