通过实例解析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 基于原型的对象(创建、调用)
Oct 16 Javascript
JQuery跨Iframe选择实现代码
Aug 19 Javascript
javascript开发随笔二 动态加载js和文件
Nov 25 Javascript
javascript 手动给表增加数据的小例子
Jul 10 Javascript
Javasipt:操作radio标签详解
Dec 30 Javascript
加载列表时jquery获取ul中第一个li的属性
Nov 02 Javascript
js设置document.domain实现跨域的注意点分析
May 21 Javascript
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
Mar 23 jQuery
JavaScript+CSS相册特效实例代码
Sep 07 Javascript
解决Jstree 选中父节点时被禁用的子节点也会选中的问题
Dec 27 Javascript
vue-baidu-map 进入页面自动定位的解决方案(推荐)
Apr 28 Javascript
详解Vue改变数组中对象的属性不重新渲染View的解决方案
Sep 21 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伪造referer突破网盘禁止外连的代码
2008/06/15 PHP
基于OpenCV的PHP图像人脸识别技术
2009/10/11 PHP
javascript 一些用法小结
2009/09/11 Javascript
对象无length属性时IE6/IE7中无法将其转换成伪数组(ArrayLike)
2011/07/31 Javascript
JS对象与JSON格式数据相互转换
2012/02/20 Javascript
各浏览器中querySelector和querySelectorAll的实现差异分析
2012/05/23 Javascript
jQuery插件开发详细教程
2014/06/06 Javascript
使用Javascript简单实现图片无缝滚动
2014/12/05 Javascript
angularjs中的单元测试实例
2014/12/06 Javascript
javascript实现字符串反转的方法
2015/02/05 Javascript
快速学习JavaScript的6个思维技巧
2015/10/13 Javascript
javascript判断复选框是否选中的方法
2015/10/16 Javascript
javascript字符串函数汇总
2015/12/06 Javascript
jquery radio的取值_radio的选中_radio的重置方法
2016/09/20 Javascript
如何使用Bootstrap创建表单
2017/03/29 Javascript
详谈JS中数组的迭代方法和归并方法
2017/08/11 Javascript
了解前端理论:rscss和rsjs
2019/05/23 Javascript
vue-router二级导航切换路由及高亮显示的实现方法
2019/07/10 Javascript
解决一个微信号同时支持多个环境网页授权问题
2019/08/07 Javascript
使用xampp将angular项目运行在web服务器的教程
2019/09/16 Javascript
Python 搭建Web站点之Web服务器与Web框架
2016/11/06 Python
python引入导入自定义模块和外部文件的实例
2017/07/24 Python
对python以16进制打印字节数组的方法详解
2019/01/24 Python
CSS图片翻转动画技术详解(IE也实现了)
2014/04/03 HTML / CSS
Html5剪切板功能的实现代码
2018/06/29 HTML / CSS
HTML5制作3D爱心动画教程 献给女友浪漫的礼物
2014/11/05 HTML / CSS
英国家电购物网站:Sonic Direct
2019/03/26 全球购物
印度尼西亚最完整和最大的在线药房网站:Farmaku.com
2019/11/23 全球购物
如何在.net Winform里面显示PDF文档
2012/09/11 面试题
总裁助理岗位职责
2014/02/17 职场文书
装修协议书范本
2014/04/21 职场文书
民族团结先进个人事迹材料
2014/06/02 职场文书
大学社团活动总结怎么写
2019/06/21 职场文书
python实现的人脸识别打卡系统
2021/05/08 Python
python 经纬度求两点距离、三点面积操作
2021/06/03 Python
Oracle中日期的使用方法实例
2022/07/07 Oracle