解决:Vue 中 debugger 不生效

目录

  • 1,问题
  • 2,解决
    • 2.1,修改 webpack 配置
    • 2.2,修改浏览器设置

1,问题

在 Vue 项目中,可以使用 debugger 在浏览器中开启调试。但有时却不生效。

2,解决

2.1,修改 webpack 配置

通过 Vue CLI 创建的项目,默认配置下是没有开启 source-map 的。

source-map 是一个信息文件,存储着位置信息:转换后代码的每一个位置,都对应着转换前的位置。这样就可以借助工具在报错时定位到原始代码。

转换的目的:提高性能和兼容性。比如对代码进行压缩混淆、多个文件合并(减少 HTTP 请求)、es6+ 转 es5 等等。

所以开启 source-map 即可。

// vue.config.js
module.exports = {configureWebpack: {devtool: "source-map",}// ...
}

那 Vite 项目呢?

2.2,修改浏览器设置

目前只发现 Chrome 浏览器支持。

1,打开控制台,点击这里打开设置

在这里插入图片描述

2,取消勾选即可

在这里插入图片描述


以上。

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

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

相关文章

MySQL权限控制(DCL)

我的mysql里面的一些数据库和一些表 基本语法 1.查询权限 show grants for 用户名主机名;例子1:查询权限 show grants for heima%;2.授予权限 grant 权限列表 on 数据库名.表名 to 用户名主机名;例子2: 授予权限 grant all on itcast.* to heima%;…

【linux】 date命令

date 命令在 Linux 和类 Unix 系统中用于显示和设置系统的日期和时间。这个命令非常灵活,允许用户以不同的格式查看日期和时间,也可以用来设置新的日期和时间(虽然这需要管理员权限,通常是通过 sudo 或以 root 用户身份执行&#…

Android Studio Menu制作

文章目录 一、创建菜单在Activity上新建onCreateOptionsMenu新建menu目录及资源文件新建Menu一级菜单在Activity上加载Menu测试效果 二、菜单点击事件 一、创建菜单 在Activity上新建onCreateOptionsMenu Overridepublic boolean onCreateOptionsMenu(Menu menu) {return supe…

Rust:Result 和 Error

在 Rust 编程语言中,错误处理是一个核心部分,用于确保程序的健売性和可靠性。Rust 通过 Result 枚举和 Error 特质(trait)来处理错误。 Result 枚举 Result 是一个泛型枚举,用于表示一个操作可能成功或失败。它有两个…

NEXT.js 创建postgres数据库-关联github项目-连接数据库-在项目初始化数据库的数据

github创建项目仓库创建Vercel账号选择hobby连接github仓库install - deploy创建postgres数据库(等待deploy完成) Continue to DashboardStorage(头部nav哪里)create Postgresconnect连接完后,切换到.env.local&#x…

Pytest配置文件pytest.ini如何编写生成日志文件?

1、新建pytest.ini文件 [pytest] log_clitrue log_leveLNOTSET log_format %(asctime)s %(levelname)s %(message)s %(filename)s %(funcName)s %(lineno)d log_date_format %Y-%m-%d %H:%M:%Slog_file ./logdata/log.log log_file_level info log_file_format %(asctime…

深入探究HTTP网络协议栈:互联网通信的基石

在我们日常使用互联网的过程中,HTTP(HyperText Transfer Protocol,超文本传输协议)扮演着至关重要的角色。无论是浏览网页、下载文件,还是进行在线购物,HTTP协议都在背后默默地支持着这些操作。今天&#x…

杂牌鼠标侧键设置

X-Mouse Button Control修改侧键基本功能介绍-CSDN博客 下载链接 【X-Mouse汉化版】X-Mouse中文版 v2.19.2 绿色版(支持Win10)-开心电玩 (kxdw.com)

SQL:子查询

子查询是SQL中强大的功能之一,它允许在一个查询内部嵌套另一个查询,以便处理更复杂的逻辑或数据检索需求。子查询可以用在SELECT、FROM、WHERE、HAVING、IN、ANY、ALL等子句中,根据使用场景和目的的不同,子查询可以分为多种类型。…

Python 入门教程(3)基础知识 | 3.6、标准输入与输出

文章目录 一、标准输入与输出1、标准输入2、标准输出3、格式化输出3.1、使用%操作符的格式化3.2、使用str.format()方法3.3、使用f-strings(格式化字符串字面量) 前言: Python的标准输入与输出是编程中非常基础且重要的概念,它们允…

MATLAB图像处理

MATLAB图像处理 MATLAB,作为美国MathWorks公司出品的商业数学软件,以其强大的矩阵运算能力和丰富的函数库,在图像处理领域得到了广泛的应用。MATLAB不仅提供了基础的图像处理功能,还通过图像处理工具箱(Image Process…

一个基于Java SSM框架(Spring、SpringMVC、MyBatis)的沙县小吃点餐系统

下面是一个基于Java SSM框架(Spring、SpringMVC、MyBatis)的沙县小吃点餐系统的简单代码案例。这个系统通常包含用户管理、菜单浏览、点餐、订单管理等功能。 1. 实体类(POJO) 首先,我们定义一个简单的Product实体类…

git分支合并时忽略指定文件

分支合并忽略特定文件步骤 1.在项目根目录下cmd窗口运行以下命令 git config merge.ours.driver true2.在项目根目录下新建文件.gitattributes然后文件中写入需要忽略的文件名 mergeours, 一个文件占一行 Dockerfile mergeours /nginx/default.conf mergeours

Linux中权限和指令

💥1、Linux基本指令 1.1 mv 指令 mv指令是move的缩写,用来移动或重命名文件、目录,经常用来备份文件或目录。 mv old_name new_name: 重命名文件或目录mv file /path/to/directory: 移动文件到指定目录 roothcss-ecs…

LeetCode题练习与总结:2 的幂--231

一、题目描述 给你一个整数 n,请你判断该整数是否是 2 的幂次方。如果是,返回 true ;否则,返回 false 。 如果存在一个整数 x 使得 n 2^x ,则认为 n 是 2 的幂次方。 示例 1: 输入:n 1 输出…

数据结构与算法——顺序表期末复习五大经典题型

目录 一:顺序表-移除元素 二:顺序表-删除有序数组中的重复项 三:顺序表-合并两个有序数组 四:顺序表-旋转数组 五:顺序表-数组形式的整数加法 一:顺序表-移除元素 题型链接:27. 移除元素 -…

玖逸云黑系统源码 v1.3.0全解无后门 +搭建教程

功能带有卡密生成和添加黑名单等,反正功能也不是很多具体的自己看程序截图即可。 搭建教程 完成 1.我们先添加一个站点 2.PHP选择7.3 3.上传源码解压 4.导入数据库 5.配置数据库信息config.php 源码下载:https://download.csdn.net/download/m0_6…

10年408考研真题-数据结构

23.[2010统考真题]若元素 a,b,c,d,e,f 依次进栈,允许进栈、退栈操作交替进行,但不允许连续3次进行退栈操作,不可能得到的出栈序列是(D)。 A.dcebfa B.cbdaef C.bcaefd D.afedcb 解析:直接看D选项&#xff0c…

VUE实现刻度尺进度条

一、如下图所示效果&#xff1a; 运行后入下图所示效果&#xff1a; 实现原理是用div画图并动态改变进度&#xff0c; 二、div源码 <div style"width: 100%;"><div class"sdg_title" style"height: 35px;"><!--对话组[{{ dialo…

用Python画一个五星红旗

#codingutf-8 import turtle import mathdef draw_polygon(aTurtle, size50, n3): 绘制正多边形args:aTurtle: turtle对象实例size: int类型&#xff0c;正多边形的边长n: int类型&#xff0c;是几边形 for i in range(n):aTurtle.forward(size)aTurtle.left(360.0/n)de…