使用VSCode Debugger 调试 React项目

一般我们调试代码时,用的最多的应该就是console.log方式了,还有的是使用Chrome DevTools 通过在对应的

sourcemap代码位置打断点进行调试,除了上面两种方式外还有一种更好用的调试方式: VSCode Debugger。

VSCode Debugger可以直接在你的项目源码打断点,进行一步一步的调试,就像下面这样。

接下来,我以React项目为例,使用 VSCode Debugger 进行代码调试

1 配置VSCode Debugger 的launch.json文件

点击VSCode左侧菜单栏的 运行和调试 按钮,之后点击 创建launch.json文件,会弹出一个弹窗,选择Web 应用(chrome)表示使用chrome浏览器进行调试,如果你想使用Edge浏览器,就选择Web 应用(Edge)选项即可,我这里使用chrome进行调试

创建的launch.json文件文件内容如下

{"version": "0.2.0","configurations": [{"name": "调试React项目","request": "launch","type": "chrome","url": "http://localhost:8080","webRoot": "${workspaceFolder}"},]
}

其中,

name字段表示调试你这个调试脚本的名字,你可以自定义

url字段比较重要,你需要把url地址改为你的本地项目运行的地址,否则,你将无法调试你的项目

其实,你会发现,你做完上面的操作后,会在项目的根目录创建一个.vscode的文件夹,里面存放着launch.json文件,所以,你其实完全可以在你的项目根目录创建一个.vscode的文件夹,存放launch.json文件即可。

2 进入Debug窗口,启动调试

你会看到,这里显示的是 调试React项目,这个就是launch.json中的name字段,你完全可以自定义该字段

你会发现它启动了浏览器,并打开了这个 url:

VSCode 里还会有一排控制执行的按钮:

在代码打个断点,然后点击

刷新:

代码会执行到断点处断住,本地和全局作用域的变量,调用栈等都会展示在左边:

上面的控制按钮分别对应暂停、单步执行、进入函数调用、跳出函数调用,这个和 Chrome DevTools 一样:

还多了刷新和停止的按钮。

那异常断点的按钮呢?在窗口的左下角

可以在被 catch 的异常处断住,也可以在没有被 catch 的异常处断住。

看起来和 Chrome DevTools 里调试差不多呀,在 VSCode Debugger 里调试有啥好处么?

好处是不用切换工具呀,之前是调试在 Chrome DevTools,写代码在 VSCode,而现在写代码和调试都可以在 VSCode 里,可以边调试边写代码。

比如我想访问 this 的某个属性,可以在 Debug Console 里输入 this 看下它的值,然后再来写代码:

也可以在监视窗口输入你想要监视的内容

这样就实现了和 Chrome DevTools 一样的调试功能。

如果你还没用过 VSCode Debugger,不妨就从今天开始用起来吧。

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

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

相关文章

js 深度克隆

深度克隆(Deep Clone)是指复制一个对象或数组及其所有嵌套结构的副本,使得克隆后的对象与原对象完全独立。JavaScript 提供了一些方法实现深度克隆,但每种方法有其优缺点。 1. 常用方法 1.1 使用 JSON.parse 和 JSON.stringify …

mapbox基础,加载mapbox官方地图

👨‍⚕️ 主页: gis分享者 👨‍⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍⚕️ 收录于专栏:mapbox 从入门到精通 文章目录 一、🍀前言1.1 ☘️mapboxgl.Map 地图对象…

汽车IVI中控开发入门及进阶(三十八):手机投屏HiCar开发

手机投屏轻松实现手机与汽车的无缝连接,导航、音乐、通话等功能应有尽有,还支持更多第三方应用,让车载互联生活更加丰富多彩。 HiCar在兼容性和开放性上更具优势。 手机投屏可以说是车机的杀手级应用,大大拓宽了车机的可用性范围。其中华为推出的HiCar就是非常好用的一种。…

优化程序中的数据:从数组到代数

前言 我们往往都希望优化我们的程序,使之达到一个更好的效果,程序优化的一个重点就是速度,加快速度的一个好办法就是使用并行技术,但是,并行时我们要考虑必须串行执行的任务,也就是有依赖关系的任务&#…

Elasticsearch:确保业务规则与语义搜索无缝协作

作者:来自 Elastic Kathleen DeRusso 利用查询规则与语义搜索和重新排序相结合的强大功能。 更多阅读: Elasticsearch 8.10 中引入查询规则 - query rules Elasticsearch 查询规则现已正式发布 - query rules 你是否知道查询规则(query ru…

文本模式下成功。ubuntu P104成功。

https://www.nvidia.com/en-us/drivers/details/226760/ 你下载的 NVIDIA-Linux-x86_64-470.256.02.run 是 NVIDIA 提供的二进制驱动程序安装文件。以下是详细的步骤,帮助你正确安装这个驱动程序。 1. 备份现有驱动(可选) 在安装新驱动之前…

把riscv32位系统弄懂1:riscv32 CPU指令学习

Riscv手册 首先下载手册:文件下载----中国开放指令生态(RISC-V)联盟 从这个页面下载riscv-spec-v2.1中文版 也可以下载中科大的这本:RISC-V手册 Riscv32指令集包括基础指令集和一些扩展指令集,比如在ESP32C3技术手册中,写到E…

全国消费水平系统|Java|SSM|JSP|

【技术栈】 1⃣️:架构: B/S、MVC 2⃣️:系统环境:Windowsh/Mac 3⃣️:开发环境:IDEA、JDK1.8、Maven、Mysql5.7 4⃣️:技术栈:Java、Mysql、SSM、Mybatis-Plus、JSP、jquery,html 5⃣️数据库可…

达梦数据库-读写分离集群部署

读写分离集群部署 读写分离集群由一个主库以及一个或者多个(最多可以配置 8 个)实时备库组成,基于实时归档实现的高性能数据库集群,不但提供数据保护、容灾等数据守护基本功能,还具有读写操作自动分离、负载均衡等特性。同时可以配置确认监视…

【ALGC】探秘 ALGC—— 卓越数据处理能力的科技瑰宝

我的个人主页 我的领域:人工智能篇,希望能帮助到大家!!!👍点赞 收藏❤ 在大数据时代,如何高效地处理和分析海量数据是一个核心挑战。ALGC(Advanced Learning and Generalized Comp…

如何提高webpack的构建速度?

提高Webpack构建速度是优化Web开发流程的一个重要方面。以下是一些提升Webpack构建速度的方法: 1. 使用适当的mode选项 开发模式(development):默认情况下,Webpack以较慢的速度进行构建,以便于开发。如果…

docker仓库用户认证

保证实验环境纯净删除启动的docker 1.安装建立认证文件的工具包 [rootlocalhost ~]# yum install httpd-tools -y 2.创建目录存放认证文件 [rootlocalhost ~]# mkdir auth [rootlocalhost ~]# htpasswd -Bc auth/.htpasswd lee #-B 强制使用最安全加密方式,默认用m…

在 Windows 下生成 .tgz 文件的方法

方法 1:使用 7-Zip 7-Zip 是一个流行的免费压缩工具,支持生成 .tar.gz 格式。 步骤: 下载并安装 7-Zip。准备好要压缩的文件或文件夹。右键点击文件或文件夹,选择 7-Zip > 添加到压缩文件...。在弹出的对话框中:…

WPSJS:让 WPS 办公与 JavaScript 完美联动

随着办公自动化需求的日益增长,WPS Office 推出了 WPSJS,这是一款强大的开发者工具,允许开发者通过 JavaScript 脚本与 WPS 办公软件进行互动。无论是在表格中自动填充数据、在文档中修改格式,还是在演示文稿中插入动态内容&#…

(OCPP服务器)SteVe编译搭建全过程

注意:建议使用3.6.0,我升级到3.7.1,并没有多什么新功能,反而电表的实时数据只能看到累计电能了,我回退了就正常,数据库是兼容的,java版本换位java11,其他不变就好 背景:…

Git 的基本概念和使用

Git是一个分布式版本控制系统,它可以帮助开发人员追踪和管理代码的修改。下面是Git的基本概念和使用方式的解释: 仓库(Repository):Git使用仓库来存储代码和版本历史记录。仓库可以位于本地计算机上,也可以…

【IMU:视觉惯性SLAM系统】

视觉惯性SLAM系统简介 相机(单目/双目/RGBD)与IMU结合起来就是视觉惯性,通常以单目/双目IMU为主。 IMU里面有个小芯片可以测量角速度与加速度,可分为6轴(6个自由度)和9轴(9个自由度)IMU,具体的关于IMU的介…

Linux 基本使用和程序部署

1. Linux 环境搭建 1.1 环境搭建方式 主要有 4 种: 直接安装在物理机上。但是Linux桌面使用起来非常不友好,所以不建议。[不推荐]。使用虚拟机软件,将Linux搭建在虚拟机上。但是由于当前的虚拟机软件(如VMWare之类的)存在一些bug&#xff…

c++------------------函数

函数定义 语法格式 函数定义包括函数头和函数体。函数头包含返回类型、函数名和参数列表。函数体是用花括号{}括起来的代码块,用于实现函数的功能。例如,定义一个计算两个整数之和的函数: int add(int a, int b) {return a b; }这里int是返回…

如何在centos系统上挂载U盘

在CentOS上挂载NTFS格式的U盘,需要执行一系列步骤,包括识别U盘设备、安装必要的软件、创建挂载点,并最终挂载U盘。以下是在CentOS上挂载NTFS格式U盘的详细步骤: 一、准备工作 确认CentOS版本: 确保你的CentOS系统已经安装并正常运行。不同版本的CentOS在命令和工具方面可能…