程序员经验分享-hwhale

浅谈vue+webpack项目调试方法

2023-05-16

题外话：这几个月用vue写了三个项目了，从绊手绊脚开始慢慢熟悉，婶婶的感到语言这东西还是得有点框框架架，太自由了容易乱搞，特别人多的时候。

从webpack开始

直接进入正题。有人觉得vue项目难调试，是因为用了webpack。所有代码揉在了一起，还加了很多框架代码，根本不知道怎么下手。所以vue+webpack调试要从webpack入手。我们先从一般情况开始说。

-sourcemap

webpack配置提供了devtool这个选项，如果设置为 ‘#source-map’，则可以生成.map文件，在chrome浏览器中调试的时候可以显示源代码。

devtool: '#source-map'

然而这个设置实际上没这么简单。webpack官方给出了7个配置项供选择: 戳这里

devtool介绍

这里不同的配置有些不同的效果，比如是否保留注释、保留行信息等，具体每一条什么意思这里不详解释，有兴趣的童鞋可以参考这篇文章

官方默认的是用 ‘#cheap-module-eval-source-map’

devtool: '#cheap-module-eval-source-map'

设置好之后，在vue项目调试的时候，代码里面标注debugger的时候就能看到对应的代码了，非常方便。

debugger

或者，直接找到对应的文件。在chrome用 ’ctrl(command) + p‘，输入文件名，可以找到对应的源代码。

command+p

打断点：

断点

需要注意的是，这里断点会打在下一行。同时一行代码运行在它的下一行才算执行。

-vue-cli

vue家的项目脚手架，推荐使用。vue-cli老家在这里
vue-cli可以帮我们自动搭建项目，首先npm全局安装

 npm install -g vue-cli

然后创建一个新的项目

vue init webpack my-project

一路回车，搞定。(更多配置项请参考上面给出的vue-cli链接)

这里从网上下载了一个带webpack的vue项目(跑之前记得npm install一下)
vue-cli webpack
从bulid文件夹里面就大概能看出：

  • webpack.dev.conf: 开发模式用
  • webpack.prod.conf: 生产模式用

其中，开发模式提供了devtool为’#cheap-module-eval-source-map’，生产模式根据config文件夹下的productionSourceMap变量控制是否使用。
若为true，则devtool为’#source-map’

其他使用方法一致。非常方便。

线上调试

平时开发的时候，我们用webpack的热加载，可以省去挂载调试的步骤，非常方便。但是发布后部署到服务器上，就失去了这个本地优势。

如果使用挂载文件方式会比较麻烦。由于webpack打出来的文件有版本号这些信息，而且发布一个包看代码量可能需要等待不等，这个方案不实际。但是如果挂载的是热加载到端口下的文件的话，这个问题就很好办了。

-热加载

在此之前，先来分析一下webpack的热加载原理。

对项目抓包可以发现这么一个文件：__webpack_hmr

__webpack_hmr

这是webpack热加载的服务器推送事件，eventsource类型，功能和websocket有点类似。大致作用是建立一个不会停止的stream流链接，服务器发送更新数据回来append到流的末端，前端读取最新append的数据，然后动态的更新页面上的东西。

接下来我们观察下上文提到的更新数据有哪些。随便更新一个文件，触发热加载，再抓个包，发现有两个.hot-update.json和一个.hot-update.js文件

热加载更新文件

这些具体做了些啥我不知道，这里就不深究了。应该是根据json里面的数据，达到一个准确更新的效果。

所以热更新其实就是监听服务器上的数据，有修改的话服务器发送数据过来，前端把数据拿来后替换到页面上这么一个过程。

-AutoResponder

接下来谈谈线上挂载测试，这里推荐一款软件：fiddler

fiddler有一个功能叫做AutoResponder，它可以将一个地址指向另一个地址。之所以用这个软件，是因为它能匹配正则，非常方便。

AutoResponder

上一节说到，webpack热加载用到了这几类文件

  • __webpack_hmr
  • xxxxxxxxxxx.hot-update.json
  • xxxxxxxxxxx.hot-update.js

和.html以及其他.js文件一起，我们就可以把这几个类型的文件挂载上去，达到一个远程热更新的效果，设置如下：

假设：
线上地址：http://192.168.9.189
本地服务器地址：http://localhost:8080/

request matchesrespond with
EXACT:http://192.168.9.189/index.htmlhttp://localhost:8080/
EXACT:http://192.168.9.189/__webpack_hmrhttp://localhost:8080/__webpack_hmr
regex:http://192.168.9.189/([^.]+).js$http://localhost:8080/$1.js
regex:http://192.168.9.189/(.+).hot-update.json$http://localhost:8080/$1.hot-update.json
regex:http://192.168.9.189/(.+).hot-update.js$http://localhost:8080/$1.hot-update.js

为了照顾到接口，不能用*全匹配(上图fiddler里最后一条灰色的)

打开debugger就能发现vue的devtools出来了

wap端

-技巧分享

手机上调试也没那么麻烦。和电脑一样在同一个局域网下，输入地址就能看到效果了。最近在做一个wap端的vue项目，这里谈谈一些自己用到的一些小技巧。

  • iphone可以用safari来检查元素；android可以用chrome远程调试

  • wifi下的http代理可以转发手机的网络请求，挂到本机上可以抓包数据
    http代理

  • 手机加载慢的时候，同样可以使用http代理转发到主机上，再访问速度就比较快了



以上。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

vue

WEBPACK

项目调试方法

浅谈vue+webpack项目调试方法 的相关文章

随机推荐

  • django中vue的使用

    转载 xff1a https blog csdn net qq 21389693 article details 105734696 后端使用vue的目的 后端使用vue的目的就是把ajax里面的数据绑定到前端 xff0c 实现动静分离 V

  • centos7更新yum源

    1 centos7安装后 xff0c 默认yum源配置文件位置 xff1a vi etc yum repos d CentOS Media repo 2 下载新的国内yum源 centos自带的是国外yum源 xff0c 下载速度相当慢 换

  • 临时出差宁波随笔

    因公司吉利项目收尾工作 xff0c 需到客户现场施工 主要负责软件项目的质量查验 xff0c 及相关问题修复 一千多公里的路程 xff0c 坐高铁7小时左右 xff0c 真是体验了中国速度 一路由西北而向东南直下 xff0c 抵达舟山群岛附

  • GitHub Copilot

    介绍 GitHub Copilot 是人工智能编程助手 xff0c 它可以帮助你编写程序 在你用visual studio或visual studio code等软件设计工具进行编程时 xff0c 它可以直接给你整行或整个方法的代码提示 x

  • 微信小程序头像昵称填写功能

    自 2022 年 10 月 25 日 24 时后 xff08 以下统称 生效期 xff09 xff0c 用户头像昵称获取规则将进行如下调整 xff1a 自生效期起 xff0c 小程序 wx getUserProfile 接口将被收回 xff

  • mysql 5.7设置数据库大小写敏感

    1 此处讲的是windows环境下的mysql配置 xff0c 小编用的是win10系统 xff1b 2 安装完mysql后 xff0c 数据库默认是大小写不敏感的 xff1b 3 修改my ini文件 xff1a C ProgramDat

  • eclipse 护眼色设置

    1 调整eclipse editor区域背景色 背景颜色向你推荐 xff1a 色调 xff1a 85 饱和度 xff1a 1 2 3 亮度 xff1a 2 0 5 文档都不再是刺眼的白底黑字 xff0c 而是非常柔和的豆沙绿色 xff0c

  • Js apply方法详解,及其apply()方法的妙用

    Js apply方法详解 我在一开始看到javascript的函数apply和call时 非常的模糊 看也看不懂 最近在网上看到一些文章对apply方法和call的一些示例 总算是看的有点眉目了 在这里我做如下笔记 希望和大家分享 如有什么

  • 如何安装双系统之ubuntu安装

    如何安装双系统之ubuntu安装 1 首先在Windows下对磁盘分出一块空闲分区大概100G左右 2 然后下载Ubuntu16 04镜像 xff0c 制作启动盘 3 重启电脑 xff0c 按住对应的键 xff08 不同电脑型号可能不同 x

  • 场景分类综述——Remote Sensing Image Scene Classification Meets Deep Learning

    一 场景分类面临的挑战 场景分类的挑战包括 xff1a 1 类内多样性大 xff0c 2 类间相似性高 也称为类间可分性低 xff0c 3 对象 场景尺度的差异大 就类内的多样性而言 xff0c 挑战主要来自于在同一个语义类中出现的地物的巨

  • 配置服务器的磁盘阵列并正确分区

    磁盘阵列 xff0c 即独立磁盘冗余阵列RAID xff08 Redundant Array of Independent Disks xff09 xff0c 其实就是一个将多块独立磁盘结合在一起 xff0c 从而提高数据的可靠性和I O性

  • 软件项目组织架构安排

    这个主题涉及到三个方面 xff0c 项目计划管理 组织管理和技术管理范畴 项目计划管理是项目管理中的一个大篇章 xff0c 包括时间计划 成本计划 费用计划等在内的各类计划管理 xff0c 不是本文章所谈的范围 xff0c 只是本文主题涉及

  • SpringBoot2.x学习（二）：为属性注入配置文件中的值：@ConfigurationProperties注解的使用

    文章目录 一 64 ConfigurationProperties 简单介绍二 64 ConfigurationProperties 使用示范1 创建两个 javaBean2 在 SpringBoot 全局配置文件写入需要注入的值2 1 a

  • SpringBoot 2.x学习（三）：为属性注入配置文件中的值：@Value 注解的使用

    文章目录 一 64 Value 注解的作用二 使用 64 Value 为普通成员变量注入值1 字面量 xff08 1 xff09 语法 xff08 2 xff09 举例 2 Spring 表达式 xff08 SpEL xff09 xff08

  • 数据结构与算法学习（一）：线性表之数组的插入与删除（Java 实现）

    文章目录 一 数组介绍1 线性表2 连续的内存空间和类型相同的数据 二 利用数组实现插入操作及相应的时间复杂度分析1 数组原本有顺序 xff0c 插入后需要继续保持数组有序 xff08 1 xff09 思路分析 xff08 2 xff09

  • 抽象类与接口

    抽象类与接口 接口与抽象类 一 抽象类 说起抽象类 xff0c 我们先说一下如何定义一个抽象方法 span class token keyword abstract span span class token keyword class s

  • SpringBoot 项目集成 mybatis-generator

    SpringBoot 项目集成 mybatis generator mybatis 官方提供了一个插件 xff1a myabtis generator xff0c 可以根据数据库中的表生成对应的实体类和针对单表的一些操作方法 xff0c 可

  • InnoDB 和 MyISAM 的区别

    这里写自定义目录标题 MyISAMINNODB事务支持不支持支持数据行锁定不支持 xff08 表锁 xff09 支持 xff08 行锁 xff09 外键约束不支持支持全文索引支持不支持表空间的大小较小较大 xff0c 约为 2 倍 MyIS

  • xshell上传、下载文件

    安装 lrzsz yum y span class token function install span lrzsz 上传资源到服务器命令 rz 回车后 xff0c 会出现一个弹框 xff0c 选择上传的文件即可 从服务器下载资源命令 s

  • 浅谈vue+webpack项目调试方法

    题外话 xff1a 这几个月用vue写了三个项目了 xff0c 从绊手绊脚开始慢慢熟悉 xff0c 婶婶的感到语言这东西还是得有点框框架架 xff0c 太自由了容易乱搞 xff0c 特别人多的时候 从webpack开始 直接进入正题 有人觉

热门标签