首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用Create-React-App进行VSCode调试

Create-React-App是一个用于快速搭建React应用的脚手架工具。它提供了一个现代化的开发环境,包括预配置的Webpack、Babel等工具,使得开发者可以专注于编写React组件而不用担心繁琐的配置。

使用Create-React-App进行VSCode调试的步骤如下:

  1. 在终端中使用Create-React-App创建一个新的React应用:
代码语言:txt
复制
npx create-react-app my-app

这将在当前目录下创建一个名为my-app的新React应用。

  1. 进入新创建的应用目录:
代码语言:txt
复制
cd my-app
  1. 打开VSCode,并在菜单中选择“文件”->“打开文件夹”,选择刚才创建的my-app文件夹。
  2. 在VSCode中安装必要的调试插件。点击左侧的扩展图标,搜索并安装"Debugger for Chrome"插件。
  3. 在VSCode中打开调试面板。点击左侧的调试图标,然后点击顶部工具栏中的齿轮图标,选择"Chrome"作为调试环境。
  4. 在.vscode文件夹中创建一个名为launch.json的文件,并添加以下配置:
代码语言:txt
复制
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/src",
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
    }
  ]
}

这将配置VSCode使用Chrome浏览器进行调试,并指定React应用的URL和源代码路径。

  1. 启动React应用。在终端中运行以下命令:
代码语言:txt
复制
npm start

这将启动React开发服务器,并在浏览器中打开应用。

  1. 在VSCode中点击调试面板中的绿色播放按钮,开始调试React应用。此时,VSCode将自动打开Chrome浏览器并连接到React应用。

通过以上步骤,你可以使用Create-React-App进行VSCode调试,方便地进行React组件的开发和调试。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云容器服务(TKE)。腾讯云云服务器提供了高性能、可扩展的云服务器实例,适用于各种应用场景。腾讯云容器服务是一种高度可扩展的容器管理服务,可帮助用户轻松部署、管理和扩展容器化应用。

更多关于腾讯云云服务器的信息,请访问:腾讯云云服务器

更多关于腾讯云容器服务的信息,请访问:腾讯云容器服务

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • 使用VSCode进行远程炼丹

    作者:韩冰https://zhuanlan.zhihu.com/p/89662757 本文已由作者授权,未经允许,不得二次转载 本文分享一下我使用vscode作为我的炼丹炉的使用心得。...在我们开发过程中,经常需要连接远程的服务器进行炼丹。通常情况下,我们会使用Pycharm的远程开发功能,同步服务器与本地的项目文件,使用远程解释器进行开发。...自从使用vscode的Remote Development功能,我便完全抛弃了Pycharm。 下载安装 官网下载vscode对应系统版本的安装包。...安装完成后,vscode左侧多出了一个菜单栏,我们点击配置按钮配置远程服务器的地址。 ? 选择当前用户目录下的ssh配置文件进行配置 ? 每个服务器需要配置ip,用户名,ssh端口等信息。...使用autossh进行内网穿透 设想这样的场景,你在公司或者学校有一台用于炼丹的服务器,但是只能在内网访问。我在家里使用笔记本也想连接到远程的服务器中,这时我们应该怎么办呢。

    1.6K20

    使用vscode进行远程开发

    前言 为什么突然想到了vscode远程开发,其实是因为在知乎上看到了一个问题,某人的回答指出了是因为vscode能够远程开发,他才抛弃了其他工具,转向了vscode。...,使用vscode也是迟早的事情。虽然jetbrains全家桶很X,但是有时候会卡住,而且时间长了,打开还得等一会儿。。 目前我只有开发python才会使用。...mkdir ~/.ssh chmod 700 ~/.ssh/ vi ~/.ssh/authorized_keys chmod 600 ~/.ssh/authorized_keys 关于第三行使用了vi编辑器...vscode连接 进入vscode,你会看到左边菜单栏多出了一个小电脑的标志,我们点它。 ?...可能会遇到的问题 Bad owner or permissions on C:\Users\Administrator/.ssh/config Windows 下 VSCode 使用 SSH 连接报

    1.9K30

    使用 VSCode 调试 Electron 主进程代码

    [VSCode调试Electron主进程代码.001] 前言 在开发 Electron 应用的时候,为了提高工作效率,我们需要借助于调试工具,及时发现并解决问题。...本文所述步骤是基于已经熟悉或知晓 VSCode 调试方法的,请按需食用! 搭建环境 本文所使用的项目是 electron-quick-start 。...调试配置 使用 VSCode 打开 ,做如下操作: [image.png] 生成如下配置的 lauch.json 文件: { // 使用 IntelliSense 了解相关属性。.../main.js", // 主文件路径 ] } ] } 开始调试 当我们做完了上述的环境搭建和文件配置之后,就可以进行愉快的调试了(根据需要打上断点):...[image.png] VSCode调试方法大家应该都比较熟悉,这里就不做赘述,希望大家调试愉快、快乐摸鱼!

    71341

    使用VSCode远程调试恶意Powershell脚本

    目前最常用的Powershell调试器是ISE,但ISE没有较友好的调试窗口,使得调试脚本时效率低下,下面,将介绍使用VSCode实现远程调试Powershell脚本,帮助你提升解密分析Powershell...解密后的代码,正是这个样本的核心代码,接下来就开始对其进行调试分析。 ?...虚拟机环境搭建 首先虚拟机建议使用Win10,因为VSCode的远程调试功能与Win10兼容性更好,同时,建立远程会话需要将虚拟机里的网络类型设置为专用。 ?...本机VSCode环境搭建 远程调试,需要安装Powershell插件,打开VSCode,直接在商店搜索直接安装即可。 ?...payload.ps1的功能为上传终端的域名、用户名、主机名、IP、OS版本以及Powershell版本信息,为了绕过检测,其会使用RC 4对上述信息进行加密,并在传输之前先上传RC 4秘钥。 ?

    4K10

    如何用vscode进行前端开发 知乎_vscode单步调试

    本文以Mac系统,C++程序为例,进行Debug操作 文章目录 安装插件 Debug页面 配置Debug环境 执行Debug 参考资料 安装插件 不同的语言需要安装的debug插件不一样...,如下 Debug页面 VsCode的Debug页面如下 配置Debug环境 点击左侧的Debug图标,默认情况下,展示的是配置提示 点击图中的【运行和调试】,选择【GDB/LLDB】环境,之后在下拉列表选择...【默认配置】,系统自动创建launch.json文件,用于记录debug的配置信息,其中最主要的是配置调试的程序,program字段,选择要debug运行的程序即可,另外如果有必要,可以让程序在新的终端运行...,将externalConsole设置为true即可,示例如下 { // 使用 IntelliSense 了解相关属性。...编译完成后,点击【运行】>>【启动调试】,即可进入调试阶段 如果要在过程中验证某个变量的值,可以在【调试控制台】中,输入变量名,就会展示出来,这一点还是可以(不过比起IDEA,还是差不少) 参考资料

    1.5K30

    使用vscode调试你的node应用

    从一开始使用 webstorm 内置的 debug 功能, 到使用node-inspector库进行调试顺便脱离 webstorm 的笨重, 再后来 nodejs 内置了debugger 模块也可以帮助调试我们的应用...目前个人使用 vscode 进行日常开发, 本文主要介绍 vscode 平台的 debugger 调试功能. vscode 本身就内置了 nodejs 的 debug 支持, 除此之外还有有非常多 debug...留意下调试控制台, 在调试vscode 执行的命令, 实际上就是使用了 nodejs 原生的debuuger 模块....使用上面的配置运行时. 可观察调试控制台的输出....回到我们最熟悉的 debug 工具 - chrome devtools, 如果是我们日常对网页进行调试这样的工作流, 对应回 vscode调试模式, 就是attach模式.

    2.6K30

    在macOS上使用VSCode调试NGINX

    为了调试方便,可以修改默认配置 conf/nginx.conf,关闭 daemon,并以单进程模式运行: daemon off; master_process off; 编译选项配置 使用 configure...命令进行相关编译参数配置: --with-debug 启用 debugging log --with-cc-opt='-O0 -g' ,使用 -g 包含 debug 符号信息,-O0标志禁用编译器优化.../openssl-1.1.1s 编译和安装 make make install 配置VSCode 首先参考 VSCode 官方文档,完成 VS Code C++ 开发环境的配置。...完成C++开发环境准备后,使用 VSCode 打开 nginx 源码,点击菜单 “Run -> Starting Debugging”,在提示中选择 LLDB,创建出 launch.json,编辑该文件进行..."cwd": "${workspaceFolder}" } ] } 现在就可以在代码中设置断点,再次点击 “Run -> Starting Debugging”,开始调试

    42510

    使用WSL 2和VSCode开发调试

    上篇介绍了如何安装WSL 2,接下来实战如何使用WSL 2和VScode在Windows上做非微软系的开发调试工作 安装VSCode 通过官网下载,一般使用User Installer,建议使用64...安装WSL插件 我们希望能在Windows上的VScode,远程调试WSL里运行的程序,社区提供了Remote – WSL插件,实现VScode端无缝操作WSL。 ? ?...在WSL 2启动VScode 通过Powershell登录WSL 2的Ubuntu环境,cd到你的目标程序目录,输入code ....,就可以直接启动VScode,打开的目录也是目标程序所在目录: https://youtu.be/tThvEBBuB54 第一次启动时,会在WSL环境上安装VScode Server服务,如下图所示:...调试WSL的Golang程序 想要在VScode调试Golang程序,推荐安装专属插件,就可以实现本地调试(相关系列文章请戳这里);想要在VScode里远程调试Golang程序,需要在安装专属插件时选择

    10.4K10

    VSCode进行服务器Lua代码远程调试

    在过去的远程代码调试场景中,需要调试远程服务器上的Lua代码,需要登录服务器,进行代码的编辑。或者将服务器上的代码进行下载,然后编辑后再上传到服务器上。...有了VSCode及SSH远程访问插件,Lua远程Debug插件后,远程调试服务器上的Lua代码变的简单了,只要打开VSC点击要链接访问的服务器,通的VSC的SSH插件访问,省去的了Lua源文件下载、编辑...使用VSC进行远程调试, 为了不对root用户下的配置数据产生污染和影响,最好办法是独立创建一个用户,在新建的用户创建访问key等配置文件,如果不再需要相关的配置,就可以直接删除掉这个用户。...安装VSC服务器端插件 如果想实现Lua远程调试,需要在VSC的插件选项卡里,搜索到指定的插件,进行安装,VSC会通过SSH协议向远程调试的服务器端程序,上传到远程服务器上之后,即可在客户端进行远程Lua...使用简洁的命令行操作,进行OpenResty服务的开始、关闭、重启,Markdown文件的构建。

    3.6K21

    VSCode使用ts-node 调试TypeScript代码

    /ts-code'); TS Config 为了断点调试,我们需要在tsconfig.json中开启sourceMap { "compilerOptions": { "module": "commonjs...", "internalConsoleOptions": "neverOpen" } 通过这些简单的配置,我们在vsc的debug界面中选择Debug by ts-node的任务,就可以开始愉快的调试了...,修改代码之后直接重启服务即可,这里简单的介绍一些vsc debug相关的快捷键,参考 F5 – 开始调试、继续执行 cmd(ctrl) + shift + F5 – 重启 shift + F5 – 结束调试...F9 – 添加断点 F10 – 单步跳过 F11 – 单步调试 shift + f11 – 单步跳出 调试当前打开ts文件 { "name": "Current TS File", "type...": "inspector" } 然后打开一个包含mocha单元测试的ts文件,添加断点,运行Debug Current TS Tests File即可进行断点调试

    12.5K20

    关于vscode断点调试

    很多人习惯在 Chrome 的调试窗口中调试 Vue 代码, 或者直接使用 console.log 来观察变量值, 这是非常痛苦的一件事,需要同时打开至少 3 个窗体。个人还是更加习惯于断点调试。...这篇文章将介绍如何配置 Visual Studio Code 和 Chrome 来完成直接在 VS Code 断点调试代码, 并且在VS Code的调试窗口看到Chrome中console相同的值。...按钮, 在弹出的调试配置窗口中点击 设置 小齿轮, 然后选择 chrome, VS Code 将会在工作区根目录生成.vscode 目录,里面会有一个 lanch.json 文件并会自动打开 用下面的配置文件覆盖自动生成的...一切具备了, 现在验收成果了 通过第一步的方式以远程调试打开的方式打开 Chrome 在 vue 项目中执行npm run dev以调试方式启动项目 点击 VS Code 左侧边栏的调试按钮,选择 Attach...现在就可以在.vue文件的js代码中打断点进行调试了。

    1.8K20
    领券