[React Native]Visual Studio Code调试React-Native

最新推荐文章于 2024-03-29 12:06:04 发布
VIP文章 最新推荐文章于 2024-03-29 12:06:04 发布
阅读量1.6k 收藏
点赞数
分类专栏： React Native 文章标签： React Native
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/annkie/article/details/82758396
版权

1.配置Visual Studio Code为React-Native开发IDE

参考这篇文档
以及
知乎

2.添加配置

  1. Open launch.json

  2. Add Configuration

  3. 选择 React Native:Debug iOS 这个根据自己需要

image.png

添加后的配置如下：

{
            "name": "Debug iOS",
            "program": "${workspaceRoot}/.vscode/launchReactNative.js",
            "type": "reactnative",
            "request": "launch",
            "platform": "ios",
最低0.47元/天 解锁文章
annkie
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
monaco-react:适用于React的Monaco编辑器-在任何React应用程序中使用monaco编辑器，而无需使用webpack（或rollupparceletc）配置文件插件
04-03
@ monaco-editor /React· 适用于React的Monaco编辑器·可在任何应用程序中使用，而无需使用webpack （或rollup / parcel / etc / etc）配置文件/插件 :high_voltage: 已经支持； 好好享受 :party_popper: :party_popper: 版本v4在这里-要查看新版本中的新增功能以及如何从v3进行迁移，请阅读此（此外，如果您需要旧版本README ，请） :party_popper: 新的“部分已创建-现在，您可以运行游乐场并使用图书馆的内部设施进行游戏 :party_popper: 它已经与集成 概要 Monaco编辑器包装器，可与任何React应用程序轻松/单线集成，而无需使用webpack （或任何其他模块捆绑器）配置文件/插件。 它可以与由create-react-app ， create-snowpack-app vite create-snowpack-app ， vite ， Next.js或任何其他应用程序生成
使用VsCode开发React-Native[debug调试+智能提示]
热门推荐
young_Emily的博客
01-08 4万+
前言： 这篇博文主要介绍两个方面： 1. react-native项目的调试 2. react-native项目的代码智能提示 这两个问题主要是由于reactnative和vue，react等框架不一样，这个是跨平台的，写的app不能直接在网页上即看即所得[意味着不能”直接地”console.log打印..]只能在真机调试或者在模拟器中查看，所以关于调试就显得特别重要。其次
前端程序猿的天花板？react-native开发及调试方案（真实项目，建议收藏）
最新发布
2401_83330193的博客
03-29 745
你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。我特地针对初学者整理一套前端学习资料分享给大家，戳这里即可获取你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难。
vscode 搭建react-native 详解
guoer9973的专栏
01-22 2万+
本文记录如何使用vscode打造一个现代化的RN开发环境，旨在提高开发效率和质量。问题 代码没有提示： 许多刚接触RN开发的非前端同学，都会问“哪个编辑器有智能提示？”。。。而对于前端同学来说，现在的日子已经好很多了，要什么自行车。 低级代码错误： 这里的错误是指类似拼写错误，符号错误等。写完代码，跑起来各种报错，有时候费死劲的找，最后发现是个中文的分号问题。 解决办法可选的方案大概有： 使用t
使用Visual Studio Code编写react-native插件介绍
江苏小白龙
03-27 2830
vs code安装插件如图 最后一个正方形图标然后在里面搜索下面的插件 小虫子的图标为调试项目用 dash:直接搜索在线文档 EsLint:代码静态检查工具 git history:图形化gitlog查看 Path Intellisense:路径自动补全 react native tools:rn开发必备该插件支持了代码智能提醒,运行调试 Typings auto instal...
环境配置：React Native智能开发工具，可代码提醒的IDE——VS Code
非著名程序员
10-31 9295
VS Code是一个专门为React Native项目提供开发环境的扩展开发插件工具。可以调试代码，快速运行React Native的命令，并且可以智能提醒。非常的简便好用。 安装首先要确保你已经安装了相关的React Native开发环境，并配置了开发环境。 安装VS Code方法非常简单，去github上下载插件，直接安装在电脑就可以了。 插件地址：https://github.com/Mi
react-native-vscode-settings:React Native的Visual Studio Code设置
05-28
安装npm install --save-dev react-native-vscode-settings 或者yarn add react-native-vscode-settings --dev install ，它将自动安装库中配置的所有插件。 笔记： 在安装此软件包之前，请.vscode/settings.json...
rocketseat-vscode-react-native-snippets：用于Visual Studio Code Editor的Rocketseat React本机片段
02-05
rocketseat-vscode-react-native-snippets：用于Visual Studio Code Editor的Rocketseat React本机片段
VSC-React-Native-React-Redux-Snippets：用于React和React-Native的代码片段，以及用于es6es7用户的Redux
02-05
VSC-React-Native-React-Redux-Snippets：用于React和React-Native的代码片段，以及用于es6es7用户的Redux
Visual Studio Code
07-30
react-native开发工具
gostack-desafio-3-reactnative::trophy: Gostock 训练营第三个挑战 | React原生概念
05-30
现在导航到创建的文件夹并在 Visual Studio Code 中打开它，在终端中运行yarn命令以安装所有依赖项，您就可以开始了。 注意：如果您在 iOS 上进行仿真，请在您的项目文件夹中通过运行cd ios命令导航到 ios 文件夹...
visual studio code + react 开发环境搭建
CrazyHSF的博客
07-13 4万+
开发环境 windows 开发工具 visual studio code node 安装和 npm windows 安装node 可以直接在 node官网 直接下载直接当作普通软件安装即可。 安装完成可以在控制台中运行node测试是否安装成功 win + r 输入 cmd ,直接在终端输入node -v 输出版本号及已经成功安装。 目前新版本的node自带npm(npm 是随...
React Native常用IDE推荐与安装配置
MN1107
06-01 2万+
React Native常用IDE推荐与安装配置（一）前言 上一讲提到了React Native框架安装和运行,以及创建了一个项目并介绍这个项目结构。这样介绍项目项目结构其实极其不方便，这一节将介绍开发React Native常用的IDE. 所谓工欲善其事必先利其器，做React Native开发也和其他应用开发一样。现在推荐使用几款比较好的IDE: sublime、webstorm以及官网推荐
React Native 之Visual Studio Code 推荐安装插件
轻量开发
04-09 2319
 Visual studio code 是Microsoft在2015年4月30推出 轻量级开发代码编辑器。相比Visual studio小了很多，Visual studio安装Xamarin移动开发100G的C盘快要爆满了，无力吐槽，普通电脑带不动Visual studio；还好Microsoft良心发现推出 Visual studio code，挺好用，默默把Microsoft从黑名单中删除。...
VSCode配置React Native调试环境
王同学LM的专栏
04-09 2030
VSCode上搭建React Native调试环境
react-native debug工具
destiny_JL的博客
10-09 1816
模拟器内，windows使用快捷键win+M 键调出开发菜单，点击debug，自动打开浏览器调试页面http://localhost:8081/debugger-ui。https://juejin.cn/post/6844903732497399816补充：节点样式可以使用模拟器中的开发菜单show Element Inspector，查看样式信息。安装watchman 环境，之后实践发现可以不安装，安装后项目将不能运行，可能是与react内的watchman冲突。第一步：打开模拟器内的开发菜单。
Visual Studio Code 调试 React Native （RN） 步骤 Mac版
ws1836300的博客
01-13 1851
1. 点击 2. 在“应用商店中搜索扩展”输入框输入 “React Native Tools”插件 安装并启用。 3.点击 顶部 “调试”-->启动调试。 出现 该状态框 注意：如果是调试iOS模拟器,请选择 Debug iOS; 调试Android模拟器，请选择 Debug Android; 如果需要和XCode 和Android Studio ...
react-native入门之调试
蛐蛐的博客
04-04 1267
如果想用其他的 JavaScript 调试器来代替 Chrome可以设置一个名为REACT_DEBUGGER的环境变量，其值为启动自定义调试器的命令。调试的流程依然是从开发者菜单中的 Debug 选项开始。被指定的调试器需要知道项目所在的目录（可以一次传递多个目录参数，以空格隔开）。
Luna：你想要的 React Native 调试工具
weixin_47388410的博客
01-28 1439
Luna 是一款 RN 的应用内调试工具，偏向于解决生产环境调试的痛点。
按照react native的官方教程搭建一个手机app小框架。
07-28
你可以按照以下步骤搭建一个基本的React Native小框架： 1. 首先确保你已经安装好了Node.js和npm。你可以在终端中运行以下命令来检查它们的版本： ``` node --version npm --version ``` 2. 安装React Native命令行工具。在终端中运行以下命令： ``` npm install -g react-native-cli ``` 3. 创建一个新的React Native项目。在终端中运行以下命令： ``` react-native init MyApp ``` 4. 进入项目目录： ``` cd MyApp ``` 5. 运行项目。在终端中运行以下命令来启动一个模拟器或连接真机进行调试： - iOS设备：运行 `react-native run-ios` - Android设备：运行 `react-native run-android` 6. 在编辑器中打开项目文件夹，你可以使用任何你喜欢的文本编辑器或集成开发环境（如Visual Studio Code）。 7. 修改App.js文件，这是React Native应用的入口文件。你可以在这个文件中添加你的组件、样式和逻辑。 8. 运行项目后，你将在模拟器或真机上看到你的应用程序。 这只是一个简单的开始，你可以根据你的需要进一步开发和定制你的React Native应用程序。你可以查阅React Native官方文档以获得更多的帮助和指导：https://reactnative.dev/docs/getting-started

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值