Chrome开发者工具如何才能看到Vue项目的源码

大家好,我是 程序员码递夫

今天给大家分享的是 Chrome开发者工具如何才能看到Vue项目的源码。

问题

我们在编写一下Vue项目时,常常要通过 chrome 进行本地调试后,才打包 生产版本。 但有时打开 chrome 的开发者工具后,看到的却是 webpack 编译后的代码,看不到 项目网页的源码,非常不便于调试。
如:
查看不到源代码

解决方法

出现这种现象,就是 vue项目为了提供启动速度,没有输出 sourceMap 的缘故,我们在vue 项目加入一下配置,就可以了。

在vue.config.js (没有的话自己手工创建)中,添加以下配置内容:

module.exports = {configureWebpack: {devtool:"source-map"        },css: {sourceMap: true}
}

添加配置

命令行重新运行vue服务, vue-cli-service serve , 然后在chrome 浏览器刷新,就可以看到源码,方便自己调试了。

vue页面源码

注意

我的 vue-cli 版本是 5.0.8 , 其他版本可能配置格式不是上面所述,自己再度娘一下了。希望本文对你有帮助。
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/430687.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

什么是反射,反射用途,spring哪些地方用到了反射,我们项目中哪些地方用到了反射

3分钟搞懂Java反射 一、反射是什么 在Java中,反射(Reflection)是一种强大的工具,它允许程序在运行时获取和操作类、接口、构造器、方法和字段等。反射是Java语言的一个重要特性,它为开发人员提供了许多灵活性&#xf…

50页PPT麦肯锡精益运营转型五步法

读者朋友大家好,最近有会员朋友咨询晓雯,需要《 50页PPT麦肯锡精益运营转型五步法》资料,欢迎大家下载学习。 知识星球已上传的资料链接: 企业架构 企业架构 (EA) 设计咨询项目-企业架构治理(EAM)现状诊断 105页PPTHW企业架构设…

收据信息提取系统源码分享

收据信息提取检测系统源码分享 [一条龙教学YOLOV8标注好的数据集一键训练_70全套改进创新点发刊_Web前端展示] 1.研究背景与意义 项目参考AAAI Association for the Advancement of Artificial Intelligence 项目来源AACV Association for the Advancement of Computer Vis…

vue-baidu-map的基本使用

前言 公司项目需求引入百度地图,由于给的时间比较短,所以就用了已经封装好了的vue-baidu-map 一、vue-baidu-map是什么? vue-baidu-map是基于vue.js封装的百度地图组件(官方文档) 二、使用步骤 1.下载插件 //我下载的版本 npm install …

在虚幻引擎中实现Camera Shake 相机抖动/震屏效果

在虚幻引擎游戏中创建相机抖动有时能让画面更加高级 , 比如 遇到大型的Boss , 出现一些炫酷的特效 加一些短而快的 Camera Shake 能达到很好的效果 , 为玩家提供沉浸感 创建Camera Shake 调整Shake参数 到第三人称或第一人称蓝图 调用Camera Shake Radius值越大 晃动越强

vscode缩进 和自动格式化

如下图,缩进太大了。 检查2个地方 prettierrc.cjs文件。此处决定缩进几个tab vscode 的设置。 保存的时候 格式化。

数据结构——顺序表、链表

目录 前言 一,数据结构 1,什么是数据结构? 2,有什么类型? 二,顺序表 1,线性表 2,顺序表基本结构 3,动态顺序表的功能实现 三,链表 1,链…

AI大模型微调训练营,全面解析微调技术理论,掌握大模型微调核心技能

一、引言 随着人工智能技术的飞速发展,大型预训练模型(如GPT、BERT、Transformer等)已成为自然语言处理、图像识别等领域的核心工具。然而,这些大模型在直接应用于特定任务时,往往无法直接达到理想的性能。因此&#…

RPA + 计算机视觉

随着超自动化成为顶级企业技术趋势之一,领先的机器人流程自动化 (RPA) 公司开始将人工智能功能集成到其自动化工具中,以创建能够自动化端到端流程并做出决策的智能机器人。计算机视觉是新一代 RPA 工具的关键 AI 功能之一。 在本文中,我们将…

Elasticsearch:检索增强生成背后的重要思想

作者:来自 Elastic Jessica L. Moszkowicz 星期天晚上 10 点,我九年级的女儿哭着冲进我的房间。她说她对代数一无所知,注定要失败。我进入超级妈妈模式,却发现我一点高中数学知识都不记得了。于是,我做了任何一位超级妈…

web学习——VUE

VUE&Element 今日目标: 能够使用VUE中常用指令和插值表达式能够使用VUE生命周期函数 mounted能够进行简单的 Element 页面修改能够完成查询所有功能能够完成添加功能 1,VUE 1.1 概述 接下来我们学习一款前端的框架,就是 VUE。 Vue 是…

二.python基础语法

目录 1.第一个python实例 2.python编码规范 2.1.编写规则 2.2.命名规范 2.3. 空格 2.4. 缩进 2.5. 注释 3.python关键字和标识符 3.1.标识符 3.2.关键字 4.python变量 4.1. 定义变量 4.2. 变量类型是可变的 4.3. 多个变量指向同一个值 5.python基本数据类型 5.…

OpenCV特征检测(12)检测图像中的潜在角点函数preCornerDetect()的使用

操作系统:ubuntu22.04 OpenCV版本:OpenCV4.9 IDE:Visual Studio Code 编程语言:C11 算法描述 计算用于角点检测的特征图。 该函数计算源图像的基于复杂空间导数的函数 dst ( D x src ) 2 ⋅ D y y src ( D y src ) 2 ⋅ D x x src − 2 …

流水线部署失败排查指南

在现代软件开发中,CI/CD(持续集成/持续交付)流水线是确保代码质量和快速交付的重要工具。然而,部署失败时,排查问题的能力至关重要。以下是一些常见的故障排查步骤和技巧。 ## 1. 检查流水线日志 首先,查看…

一文讲清楚0基础小白如何快速入门大语言模型

1、快速一览 读完可以收获: 快速建立大语言模型的概念、基本原理。 几个概念之间的关系: 人工智能:让机器(或系统)像人一样思考行动。 机器学习:从数据中寻找规律、建立关系,根据建立的关系去…

OpenHarmony(鸿蒙南向开发)——小型系统内核(LiteOS-A)【LMS调测】

往期知识点记录: 鸿蒙(HarmonyOS)应用层开发(北向)知识点汇总 鸿蒙(OpenHarmony)南向开发保姆级知识点汇总~ 持续更新中…… 基本概念 LMS全称为Lite Memory Sanitizer,是一种实时…

31省市农业地图大数据

1.北京市 谷类作物种植结构(万亩) 农作物种植结构(万亩) 2.天津市 谷类作物种植结构(万亩) 农作物种植结构(万亩) 3.黑龙江省 谷类作物种植结构(万亩) 农作物…

Appium自动化测试概述

Appium是一个可用于测试iOS、 Android操作系统和Windows桌面平台原生应用,移动网页应用和混合应用的自动化测试框架。 原生应用(Native App):用 android、iOS或者Windows SDK编写的应用 移动网页应用(Web App):通过手机浏览器访问的网页应用,比如iOS中 safari应用,And…

Apache Iceberg Architecture—Iceberg 架构详解

Apache Iceberg Architecture Apache Iceberg 的架构可以分为三个主要层次:Iceberg Catalog、元数据层和数据层。 一、 Iceberg Catalog(目录) Iceberg Catalog 是 Iceberg 的顶层组件,负责管理所有 Iceberg 表的元数据和元数据操…

实现一个基于nio的discard server

写在前面 源码 。 为了能够进一步的熟悉下nio相关的api操作,本文来实现一个基于nio的discard server。 discard server的意思是,server接收到来自client的一个消息之后,直接就将连接关闭,即discard。 1:正戏 1.1&…