通过实例解析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编程起步(第七课)
Feb 27 Javascript
javascript 鼠标滚轮事件
Apr 09 Javascript
angularjs中的e2e测试实例
Dec 06 Javascript
javascript获取当前鼠标坐标的方法
Jan 10 Javascript
详解jquery事件delegate()的使用方法
Jan 25 Javascript
Three.js入门之hello world以及如何绘制线
Sep 25 Javascript
深入浅析Vue中的Prop
Jun 10 Javascript
Vue 实现前进刷新后退不刷新的效果
Jun 14 Javascript
JavaScript函数IIFE使用详解
Oct 21 Javascript
Preload基础使用方法详解
Feb 03 Javascript
JS组件库AlloyTouch实现图片轮播过程解析
May 29 Javascript
js屏蔽F12审查元素,禁止修改页面代码等实现代码
Oct 02 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
一周让你学会PHP 不错的学习资料
2009/02/06 PHP
CURL状态码列表(详细)
2013/06/27 PHP
PHP创建单例后台进程的方法示例
2017/05/23 PHP
php+mysql+ajax 局部刷新点赞/取消点赞功能(每个账号只点赞一次)
2020/07/24 PHP
PhpStorm2020 + phpstudyV8 +XDebug的教程详解
2020/09/17 PHP
javaScript 简单验证代码(用户名,密码,邮箱)
2009/09/28 Javascript
Jquery操作下拉框(DropDownList)实现取值赋值
2013/08/13 Javascript
javascript实现捕捉键盘上按下的键
2015/05/05 Javascript
JS制作手机端自适应缩放显示
2015/06/11 Javascript
JS简单编号生成器实现方法(附demo源码下载)
2016/04/05 Javascript
js遮罩效果制作弹出注册界面效果
2017/01/25 Javascript
jQuery插件Echarts实现的渐变色柱状图
2017/03/23 jQuery
原生js封装自定义滚动条
2017/03/24 Javascript
微信小程序商城项目之淘宝分类入口(2)
2017/04/17 Javascript
在js代码拼接dom对象到页面上的模板总结
2018/10/21 Javascript
JavaScript 扩展运算符用法实例小结【基于ES6】
2019/06/17 Javascript
七行JSON代码把你的网站变成移动应用过程详解
2019/07/09 Javascript
vue canvas绘制矩形并解决由clearRec带来的闪屏问题
2019/09/02 Javascript
VUE异步更新DOM - 用$nextTick解决DOM视图的问题
2020/11/06 Javascript
JavaScript实现alert弹框效果
2020/11/19 Javascript
Python正则表达式匹配HTML页面编码
2015/04/08 Python
Python文件处理
2016/02/29 Python
从局部变量和全局变量开始全面解析Python中变量的作用域
2016/06/16 Python
Python列表对象实现原理详解
2019/07/01 Python
Python通过Pillow实现图片对比
2020/04/29 Python
用python读取xlsx文件
2020/12/17 Python
Mio Skincare美国官网:身体紧致及孕期身体护理
2017/03/05 全球购物
捷克鲜花配送:Florea.cz
2018/10/29 全球购物
Senreve官网:美国旧金山的奢侈手袋品牌
2019/03/21 全球购物
Envie de Fraise意大利:法国网上推出的孕妇装品牌
2020/10/18 全球购物
物业门卫岗位职责
2013/12/28 职场文书
关于学习的演讲稿
2014/05/10 职场文书
我的梦想演讲稿500字
2014/08/21 职场文书
2016高考寄语集锦
2015/12/04 职场文书
《只有一个地球》教学反思
2016/02/16 职场文书
详解SpringBoot异常处理流程及原理
2021/06/21 Java/Android