vscode中调试react

kgduu

已于 2022-03-09 10:13:57 修改

阅读量3.6k

点赞数

分类专栏： react 文章标签： vscode react.js 前端

于 2022-03-09 10:12:33 首次发布

本文链接：https://blog.csdn.net/xiexingshishu/article/details/123370350

版权

react 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

本文介绍了如何在工程目录下添加.vscode/launch.json文件，以配置PWA-Chrome启动调试。配置包括一个名为'LaunchChrome'的配置项，用于启动并指向本地主机的3000端口。遵循提供的步骤，开发者可以便捷地进行Web应用的调试工作。

摘要由CSDN通过智能技术生成

1、在工程目录下添加.vscode/launch.json文件

添加配置

{
    "configurations": [
    {
        "name": "Launch Chrome",
        "request": "launch",
        "type": "pwa-chrome",
        "url": "http://localhost:3000",
        "webRoot": "${workspaceFolder}"
    }
    ]
}

2、运行调试

参考资料：

https://zhuanlan.zhihu.com/p/475999585

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

kgduu

关注关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

VSCode使React Vue代码调试变得更爽

zl5186888的博客

08-11

780

因为 React 我们是直接写 jsx、tsx，它和编译之后的 js 文件一一对应，而 Vue 不是，Vue 我们写的是 SFC（single file component）格式的文件，需要 vue-loader 来把它们分成不同的文件，所以路径单独映射一下，才能对应到源码位置。workspaceRoot 是 vscode 提供的环境变量，就是项目的跟路径，这样一映射之后，地址不就变成本地的文件了么？创建了一个调试配置，类型是 chrome，并指定调试的 url 是开发服务器的地址。...

vscode调试react native

qq_39575872的博客

11-26

1129

vscode调试react native 1、安装rn环境，建立rn项目，此处不做叙述 2、在vscode中安装Debugger for Chrome扩展，看下图 3、点击debug按钮、点击小齿轮、选择环境、添加配置。若是直接打开了launch.json文件，请到项目根目录删除./.vscode文件夹再重复以上操作 5、调试器连接包生成工具后，摇一摇唤出菜单选择Debug，再回到VsCod...

参与评论您还未登录，请先登录后发表或查看评论

react快速开始(三)-create-react-app脚手架项目启动；使用VScode调试react

西京刀客

09-01

2297

create-react-app（以下简称cra）作为react官方提供的脚手架工具，是目前生成react项目一个非常常用和主流的工具。很多企业级的应用搭建也是基于这个脚手架工具上二次开发~

探索未来VSCode扩展开发：reactive-vscode

最新发布

gitblog_00090的博客

06-21

674

探索未来VSCode扩展开发：reactive-vscode reactive-vscodeDevelop VSCode extension with Vue Reactivity API项目地址:https://gitcode.com/gh_mirrors/re/reactive-vscode 在VSCode扩展开发的世界里，创新总是不断涌现。今天，我们向您推荐一个极具潜力的开源项目——re...

【VSCode debugger】

m0_47827825的博客

11-24

804

用 VSCode 调试 React 代码用 VSCode debugger 来调试，效率又高、体验又爽。

VScode debug React 项目

与你清欢

06-19

3646

dev程序中注释在vscode中乱码_VS Code 调试完全攻略系列：调试由 TypeScript 开发的 React

weixin_39542111的博客

11-25

227

译者：疯狂的技术宅作者：Charles Szilagyi原链接：https://charlesagile.com/debug-react-typescript转发链接：https://mp.weixin.qq.com/s/tb5GxszN9qWfAmW7mmSHHg前言说到前端，我现在选择的武器是 React、TypeScript 和 Parcel trinity。这是一个简单、可靠而且高效的设置...

weixin_42117463的博客

03-05

1598

使用VSCode调试【Vue、React】前端项目的最佳解决方案 2步搞定

VSCode 配置React Native开发环境的方法

08-28

本文介绍了如何使用 VSCode 配置 React Native 开发环境，包括安装 VSCode 和插件、安装 React Native CLI、配置调试环境和 launch.json 文件的配置选项等。遵循本文的指导，您可以轻松地配置 VSCode，以便更好地...

VSCode搭建React Native环境

11-21

创建的react-native的工程拖入vscode中点击F5即可运行react-native 此时可能出现如下界面，这是因为没有配置运行文件在debug 页面，点击如下位置，添加configurations 然后点击添加配置，选择debug android ...

vscode-react-refactor:这个简单的扩展为React开发人员提供了重构代码操作

05-10

将JSX代码部分提取到新的类或函数组件中支持TypeScript和TSX 适用于类，函数和箭头函数处理键属性和函数绑定与React Hooks API兼容预习 1.1.0更新 Extract to Class Component代码操作添加了Extract to Class ...

使用VScode 插件debugger for chrome 调试react源码的方法

10-16

主要介绍了使用VScode 插件debugger for chrome 调试react源码,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

VSCode配置react开发环境的步骤

08-28

本篇文章主要介绍了VSCode配置react开发环境的步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

chrome插件 vscode_使用VScode 插件debugger for chrome 调试react源码的方法

weixin_42407739的博客

01-17

564

代码调试，是我们前端日常工作中不可或缺的能力了吧！在面向dom开发的时代，我们开发时直接在chrome里打断点是很方便的。但是，当我们面向组件开发时(react),浏览器拿到的是我们编译过后的代码，还想在浏览器里打断点几乎是不可能的了。场景那怎么办，方法总是比困难多！愚蠢的我想到了console/debugger！！一直在使用，虽然很不方便(打印太多实在太乱！上线还要配置删除掉)，但是我竟然使用了...

vscode调试react 最初的源码

奔跑的小猪仔

11-10

1494

webpack 支持 externals 来配置一些模块使用全局变量而不进行打包，这样我们就可以单独加载 react、react-dom，然后把他们导出的全局变量配置到 externals 就行了。不经过 webpack 打包，那就没有 webpack 产生的 sourcemap，不就一次就映射到 React 最初的源码了么。那这么说我们只要让 react-dom.development.js 关联上 sourcemap，就能调试最初的 React 源码了？也就是调试工具只会解析一次 sourcemap。

在Visual Studio Code中调试创建React App应用程序

culiu9261的博客

07-21

1157

In this post, we are going to create an Create React App application, then add configuration to debug it in Visual Studio Code. 在本文中，我们将创建一个Create React App应用程序，然后添加配置以在Visual Studio Code中对其进行调试。 Ch...

在vscode中对使用了whistle代理的 react项目进行断点调试

weixin_44956861的博客

06-09

474

我在本机使用了whistle做代理，启动在8899这个端口（默认端口），想使用vscode对react的代码进行断点调试，发现url写项目端口没用，于是加了一个代理配置，并修改了url指向我的whistle代理地址有两点需要注意：（1）加一个路由代理的参数：–proxy-server=http://127.0.0.1:8899（2）修改url，改为你whistle代理的url，如我这里代理的地址为local.test.com，所以launch.json中的url也填这个。

在vscode 上搭建 React 源代码调试环境(16.8v)

冲锋

06-08

1977

克隆此仓库 git clone https://gitee.com/frontend-qin/react-source-code.git 配置 vscode 安装插件 Debugger for Chrome 后 url：必须是你的 react 项目启动的开发环境地址 { "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "La

VSCode中配置React Native环境与调试指南

安装完成后，你就可以在VSCode中管理和调试React Native项目。接下来，将已创建的React Native工程导入VSCode。你可以通过拖放项目文件夹到VSCode的工作区来实现这一点。一旦项目被打开，你可以通过按下F5键尝试...