前端调试技巧(npm Link,vscode调试,浏览器调试等)
Npm Link
功能:
在本地开发npm模块的时候,我们可以使用npm link命令,将npm 模块链接到对应的运行项目中去,方便地对模块进行调试和测试





断点调试
vscode调试
Debug Vue2 Project
- 目标:在VSCode中调试项目代码,即在VSCode中打的某个断点要映射到浏览器的运行代码中。
a. 运行的项目代码由webpack打包生成,然后存储在webpack://xxx中
b. VSCode的某行代码打上了断点,标记了本地文件夹下原文件的第几行
c. 去找浏览器的代码,对应不上
d. 一是文件经过编码,行数对不上:需要生成.map文件,使得VSCode找到断点位置在打包代码的映射
e. 二是文件放置的目录对不上:VSCode去localhost/src找,但代码存到了webpack:///src中:需要写一个映射规则,让VSCode把找到的webpack://下的文件映射到本地路径下
2.步骤
- 配置生成sourcemap:
const vueConfig = {configureWebpack: {devtool: 'source-map'}
}
- 添加launch configurations文件:



- 配置文件中增加sourceMapPathOverrides:


Debug Vue3 Project
- 文件位置:从项目的端口取资源

- 文件内容:默认开启sourcemap
- 添加launch configurations文件即可
浏览器调试
还有另外一种方式是,直接通过浏览器f12打开source找到对应文件设置断点调试
封装组件
使用$attrs
把传给子组件的props和事件打包起来以$attrs变量传给后代组件,可直接调用后代组件的api,避免了逐个声明props进行props的接收
- 传给子组件的v-model,再通过$attrs传给后代时,不能接收到数据变化
// Parent.vue
<my-input v-model="value" placeholder="...">// MyInput.vue
<input v-bind="$attrs" type="text"/>
- 需要对传给子组件的v-model的事件名进行更改
// MyInput.vue
const props = defineProps(['modelValue'])
const emits = defineEmits(['update:modelValue'])
const value = computed({get: () => props.modelValue,set: (val) => {emits('update:modelValue', val)}
})<input v-bind="$attrs" v-model="value" type="text"/>
使用json配置
针对H5页面的简单且后续不维护的表单,使用配置进行每一个form-item的生成。
- 一个form的配置生成一项form-item
- 通过value的指定,与formData的数据进行关联
- 通过传入formData,进行form的重新计算,更新form-item
<FormItem v-model="formData" :form="form"></FormItem>
const formData = {name: '',quality: '',
}
const form = [{ type: 'input', label: '输入武将名字', value: 'name', placeholder: '4字以内', maxlength: "4" },{ type: 'select', label: '选择武将兵种', value: 'quality', placeholder: '下拉选择', options: [{ value: '1', label: '盾兵' },{ value: '2', label: '弓兵' },], ifShow: (formData) => {return formData.name} },]
// FormItem.vue
<template><div class="form-item" :class="getClass(item)" v-for="item, index in props.form" :key="index"><template v-if="item.type === 'input'"><div class="label">{{ item.label }}</div><div class="value"><Input :maxlength="item.maxlength" v-model="modelValue[item.value]" type="text" :placeholder="item.placeholder"></Input></div></template><template v-else-if="item.type === 'select'"><div v-show="item.ifShow == null || typeof item.ifShow === 'function' && item.ifShow(modelValue)"><div class="label">{{ item.label }}</div><div class="value"><Select v-model="modelValue[item.value]" :options="item.options" :placeholder="item.placeholder"></Select></div></div></template><template v-else-if="item.type === 'textarea'"><div class="label">{{ item.label }}</div><div class="value"><Input v-model="modelValue[item.value]" type="textarea" :maxlength="item.maxlength" :placeholder="item.placeholder"></Input></div></template><template v-else-if="item.type === 'upload'"><Upload class="upload" @openPick="emits('openPick')" :placeholder="item.placeholder"></Upload></template></div>
</template>
补充
还有另外一种方式是类似通过jsx的方式,通过一个函数传参的方式,决定是渲染哪种类型的组件
tab切换的刷新控制
- 初次加载:t-tabs会同时加载放在t-tab下的内容,需要把内容放在t-tabs外,使用KeepAlive包裹,实现打开才开始第一次加载;
- 后续刷新:tabA里做了操作,可能导致A刷新B不刷新,也可能导致AB都刷新,因此使用数据进行刷新控制;
const tableRefresh = ref({enabled: 0,disabled: 0,
});
例如A的操作要使B刷新,
// ATable.vue
const emits = defineEmits(['update:disabledRefresh']);const onUpdate = () => {// postemits('update:disabledRefresh', 1);
}
// BTable.vue
const props = defineProps(['disabledRefresh']);onActivated(() => {if (props.disabledRefresh) {getData();emits('update:disabledRefresh', 0);}
});
例如ATable组件被父组件的操作导致要刷新
// ATable.vue
const props = defineProps(['enabledRefresh']);watch(() => props.enabledRefresh,(val) => {if (val) {getData();emits('update:enabledRefresh', 0);}},
);
补充:如果有多个tab,则可以将状态放到tabs中统一处理
活动登录模板
可以考虑统一登录模板或者分组织统一
相关文章:
前端调试技巧(npm Link,vscode调试,浏览器调试等)
Npm Link 功能: 在本地开发npm模块的时候,我们可以使用npm link命令,将npm 模块链接到对应的运行项目中去,方便地对模块进行调试和测试 断点调试 vscode调试 Debug Vue2 Project 目标:在VSCode中调试项目代码…...
SSL证书到期自动巡检脚本-推送钉钉告警
1. 编写SSL证书巡检脚本 cat /hao/batch_check_ssl_expire.sh #!/bin/bash# 域名列表文件绝对路径 domains_file"/hao/domains.txt"#钉钉webhook webhook_url"https://oapi.dingtalk.com/robot/send?access_token99999999999999999999999999999999999999999…...
Winform打印编程基础
1、目的 进行打印设置、打印预览、及实现打印功能 2、代码 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Drawing.Printing; using System.IO; using System.Linq; using System.Te…...
Python编程实例-Python的隐藏特性
Python的隐藏特性 文章目录 Python的隐藏特性1、Python中的下划线(_)2、通过解析树进行正则表达式调试3、省略号(...)4、dir()函数5、Lambda 函数6、链式比较运算符7、zip()函数8、修饰器9、上下文管理器和with语句10、生成器和yield语句11、元类(Metaclass)12、小结Python…...
防火墙安全策略利用
拓扑图: 办公区为10.0.1.0/24 生产部为:10.0.2.0/24 办公区为vlan2,生产区为vlan3 DMZ区域为10.0.3.0/24、10.0.3.10为HTTP服务器 游客区:210.0.0./24 ISP:12.0.0.0/24 要求3: 添加安全策略…...
SystemUIService启动-Android13
SystemUIService启动-Android13 1、SystemUIService启动2、其他SystemUI services启动2.1 Dagger依赖注入2.2 Recents为例 1、SystemUIService启动 SystemUI启动,及其SystemUIService启动 <!-- SystemUi service component --><string name"config_s…...
linux权限深度解析——探索原理
前言:本节内容主要讲述的是linux权限相关的内容, linux的权限如果使用root账号是感受不到的, 所以我们要使用普通账号对本节相关内容进行学习,以及一些实验的测试。 然后, 通过linux权限的学习我们可以知道为什么有时候…...
Qt学生管理系统(付源码)
Qt学生管理系统 一、前言1.1 项目介绍1.2 项目目标 2、需求说明2.1 功能性说明2.2 非功能性说明 三、UX设计3.1 登录界面3.2 学生数据展示3.3 信息插入和更新 三、架构说明3.1 客户端结构如下3.2 数据流程图3.2.1 数据管理3.2.2 管理员登录 四、 设计说明3.1 数据库设计3.2 结构…...
重磅!新公司法正式实施,这些变化你必须知道! ️
新公司法来了!企业设立和经营必知的关键变动 🏛️🚀 大家好,我是猫头虎,科技自媒体博主。今天我们来聊聊一件大事——新公司法的实施,这对企业设立和经营带来了哪些重大影响?跟着我,…...
[Flask笔记]一个完整的Flask程序
前面讲过Flask是一个轻量级Web开发框架,为什么说是轻量级的呢,因为它用短短几行代码就能运行起来,我们一起来看看最简单的flask框架。 安装Flask 在看Flask框架之前我们需要先安装flask模块,学过python的肯定都知道,…...
企业专利布局怎么弄
企业专利布局策略与实施 在当今竞争激烈的商业环境中,企业的专利布局已成为保护创新成果、提升市场竞争力的重要手段。专利布局不仅是技术创新的体现,更是企业战略布局的重要一环。 一、企业专利布局的策略 多维度布局 企业专利布局应结合市场、技术、…...
ArduPilot开源飞控之AP_Mount_Topotek
ArduPilot开源飞控之AP_Mount_Topotek 1. 源由2. 框架设计3. 重要函数3.1 动态过程3.1.1 AP_Mount_Topotek::update3.1.2 AP_Mount_Backend::calculate_poi 3.2 基础能力3.2.1 AP_Mount_Topotek::healthy3.2.2 AP_Mount_Topotek::has_pan_control 3.3 设备功能3.3.1 AP_Mount_T…...
React组件间通信的几种方式
一、Props向下传递(Top-Down Propagation) 父组件通过props将其状态或数据传递给子组件。 父组件: class ParentComponent extends React.Component {state { message: Hello World };render() {return <ChildComponent message{this.…...
2024最新国际版抖音TikTok安装教程,免root免拔卡安卓+iOS,附全套安装工具!
我是阿星,今天给大家带来是2024年最新TikTok国际版抖音的下载和安装教程,而且还是免root免拔卡的那种,安卓和iOS都能用哦!由于某些原因,国内用户并不能使用TikTok。今天阿星就教一下大家怎么安装TikTok。 TikTok在全球…...
kafka与zookeeper的SSL认证教程
作者 乐维社区(forum.lwops.cn)许远 在构建现代的分布式系统时,确保数据传输的安全性至关重要。Apache Kafka 和 Zookeeper 作为流行的分布式消息队列和协调服务,提供了SSL(Secure Sockets Layer)认证机制&…...
为何数字化转型项目会夭折?深入分析失败的关键因素
数字化转型是一个复杂的过程,涉及企业运营的各个方面。根据麦肯锡的报告,尽管数字化转型对企业至关重要,但根据数据显示70%的数字化转型尝试未能成功。本文总结了六大常见失败原因:转型准备不足、组织文化障碍、技术实施问题、人才…...
数据结构(其二)--线性表
目录 1. 基本概念 2.线性表的基本操作 3.顺序表 (1).静态分配 (2).动态分配 (3).顺序表的插入与删除(以静态分配为例)(示例代码中包含了一下必要的基本函数…...
软链接node_modules
公司项目很多微应用的子项目公用同一套模板,也就会使用同一个node_modules 1.先创建3个同样的项目,并安装一个其中的一个node_modules给他丢到外边 2.win r -------> cmd --------> ctrlshift enter(已管理员身份打开cmd) 3.在窗口分别执行以下代码…...
Apache中使用SSI设置
先停服务在修改httpd.conf,备份下 Apache\Apache24\conf 设置httpd.conf LoadModule ssl_module modules/mod_ssl.so 取消该命令前的注释符# AddType text/html .shtml AddOutputFilter INCLUDES .shtml 取消该命令前的注释符# 加入html AddType text/html .s…...
Java Stream API详解:高效处理集合数据的利器
引言 Java 8引入了许多新特性,其中最为显著的莫过于Lambda表达式和Stream API。Stream API提供了一种高效、简洁的方法来处理集合数据,使代码更加简洁明了,且具有较高的可读性和可维护性。本文将深入探讨Java Stream API的使用,包…...
CentOS下的分布式内存计算Spark环境部署
一、Spark 核心架构与应用场景 1.1 分布式计算引擎的核心优势 Spark 是基于内存的分布式计算框架,相比 MapReduce 具有以下核心优势: 内存计算:数据可常驻内存,迭代计算性能提升 10-100 倍(文档段落:3-79…...
HTML 列表、表格、表单
1 列表标签 作用:布局内容排列整齐的区域 列表分类:无序列表、有序列表、定义列表。 例如: 1.1 无序列表 标签:ul 嵌套 li,ul是无序列表,li是列表条目。 注意事项: ul 标签里面只能包裹 li…...
从零开始打造 OpenSTLinux 6.6 Yocto 系统(基于STM32CubeMX)(九)
设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile,新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...
DBAPI如何优雅的获取单条数据
API如何优雅的获取单条数据 案例一 对于查询类API,查询的是单条数据,比如根据主键ID查询用户信息,sql如下: select id, name, age from user where id #{id}API默认返回的数据格式是多条的,如下: {&qu…...
拉力测试cuda pytorch 把 4070显卡拉满
import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试,通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小,增大可提高计算复杂度duration: 测试持续时间(秒&…...
Unsafe Fileupload篇补充-木马的详细教程与木马分享(中国蚁剑方式)
在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件 本期内容是为了更好的为大家解释木马(服务器方面的)的原理,连接,以及各种木马及连接工具的分享 文件木马:https://w…...
虚拟电厂发展三大趋势:市场化、技术主导、车网互联
市场化:从政策驱动到多元盈利 政策全面赋能 2025年4月,国家发改委、能源局发布《关于加快推进虚拟电厂发展的指导意见》,首次明确虚拟电厂为“独立市场主体”,提出硬性目标:2027年全国调节能力≥2000万千瓦࿰…...
比较数据迁移后MySQL数据库和OceanBase数据仓库中的表
设计一个MySQL数据库和OceanBase数据仓库的表数据比较的详细程序流程,两张表是相同的结构,都有整型主键id字段,需要每次从数据库分批取得2000条数据,用于比较,比较操作的同时可以再取2000条数据,等上一次比较完成之后,开始比较,直到比较完所有的数据。比较操作需要比较…...
【无标题】湖北理元理律师事务所:债务优化中的生活保障与法律平衡之道
文/法律实务观察组 在债务重组领域,专业机构的核心价值不仅在于减轻债务数字,更在于帮助债务人在履行义务的同时维持基本生活尊严。湖北理元理律师事务所的服务实践表明,合法债务优化需同步实现三重平衡: 法律刚性(债…...
数据结构第5章:树和二叉树完全指南(自整理详细图文笔记)
名人说:莫道桑榆晚,为霞尚满天。——刘禹锡(刘梦得,诗豪) 原创笔记:Code_流苏(CSDN)(一个喜欢古诗词和编程的Coder😊) 上一篇:《数据结构第4章 数组和广义表》…...
