通过实例解析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实现的水平和垂直居中的div窗口
Aug 08 Javascript
自定义右键属性覆盖浏览器默认右键行为实现代码
Feb 02 Javascript
JavaScript创建类/对象的几种方式概述及实例
May 06 Javascript
jquery实现select选择框内容左右移动代码分享
Nov 21 Javascript
老生常谈 js中this的指向
Jun 30 Javascript
JavaScript 计算笛卡尔积实例详解
Dec 02 Javascript
JavaScript轻松创建级联函数的方法示例
Feb 10 Javascript
Angular2学习教程之TemplateRef和ViewContainerRef详解
May 25 Javascript
js中bool值的转换及“&&”、“||”、 “!!”详解
Dec 21 Javascript
JS实现的检验身份证格式并输出出生日期,年龄,性别,出生地示例
May 17 Javascript
element-ui如何防止重复提交的方法步骤
Dec 09 Javascript
jQuery实现手风琴效果(蒙版)
Jan 11 jQuery
详解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
用Zend Encode编写开发PHP程序
2006/10/09 PHP
PHP学习笔记之二 php入门知识
2011/01/12 PHP
php IP转换整形(ip2long)的详解
2013/06/06 PHP
php判断用户是否手机访问代码
2015/06/08 PHP
详解WordPress中用于更新和获取用户选项数据的PHP函数
2016/03/08 PHP
javascript控制Div层透明属性由浅变深由深变浅逐渐显示
2013/11/12 Javascript
jquery ajax 局部无刷新更新数据的实现案例
2014/02/08 Javascript
深入解读JavaScript中的Hoisting机制
2015/08/12 Javascript
jQuery实现瀑布流布局详解(PC和移动端)
2020/09/01 Javascript
JS密码生成与强度检测完整实例(附demo源码下载)
2016/04/06 Javascript
详解VueJS应用中管理用户权限
2018/02/02 Javascript
Vue项目使用CDN优化首屏加载问题
2018/04/01 Javascript
微信小程序异步API为Promise简化异步编程的操作方法
2018/08/14 Javascript
Vue项目中配置pug解析支持
2019/05/10 Javascript
vue操作dom元素的3种方法示例
2020/09/20 Javascript
浅析python 内置字符串处理函数的使用方法
2014/06/11 Python
python的pdb调试命令的命令整理及实例
2017/07/12 Python
Flask入门之上传文件到服务器的方法示例
2018/07/18 Python
Python docx库用法示例分析
2019/02/16 Python
django的分页器Paginator 从django中导入类
2019/07/25 Python
面向对象学习之pygame坦克大战
2019/09/11 Python
python 字典有序并写入json文件过程解析
2019/09/30 Python
使用phonegap创建联系人的实现方法
2017/03/30 HTML / CSS
全球性的在线商店:Vogca
2019/05/10 全球购物
大学应届生求职简历的自我评价
2013/10/08 职场文书
艺术系应届生的自我评价
2013/10/19 职场文书
经济职业学院毕业生自荐书
2014/03/17 职场文书
ktv服务员岗位职责
2015/02/09 职场文书
餐饮服务食品安全承诺书
2015/04/29 职场文书
卫生保健工作总结2015
2015/05/18 职场文书
感恩教育观后感
2015/06/17 职场文书
《月光曲》教学反思
2016/02/16 职场文书
python 如何用map()函数创建多线程任务
2021/04/07 Python
浅谈pytorch中的dropout的概率p
2021/05/27 Python
python opencv旋转图片的使用方法
2021/06/04 Python
win7配置本地ftp服务器的图文教程
2022/08/05 Servers