使用VsCode开发React-Native[debug调试+智能提示]

前言:
这篇博文主要介绍两个方面:
1. react-native项目的调试
2. react-native项目的代码智能提示
这两个问题主要是由于reactnative和vue,react等框架不一样,这个是跨平台的,写的app不能直接在网页上即看即所得[意味着不能”直接地”console.log打印..]只能在真机调试或者在模拟器中查看,所以关于调试就显得特别重要。其次关于智能提示:react-native同react一样,秉承”一切元素皆组件“设计理念,但它比react更甚:直接抛弃html标签,所有“标签”都得用它的封装好的组件。所以这就是智能提示的重要性。

1. react-native项目的调试

1.1 使用vscode调试

1.1.1 安装React Native Tools

插件支持react-native代码高亮、debug以及代码提示等十分强大的功能

这里写图片描述

1.1.2 使用React Native Tools进行调试

  1. 点扩展插件上面的调试
  2. 播放按钮的旁边,给预调试的项目添加配置
    这里写图片描述

  3. 然后弹出一个选择 ,选react native
    这里写图片描述

  4. 这里我选的是Debug Android[因为我的模拟器是安卓的]
    这里写图片描述
    随后生成一个launch.json文件,按照默认配置即可。对了我项目是在react native 脚手架上写的所以默认配置即可
    这里写图片描述

快捷键F1—>输入 React Native Run Android 来部署应用
相当于命令行敲下 的react-native run-android

这里写图片描述

应用成功启动:

这里写图片描述

开始debug:
1. 打断点
例如我们在注册页面的判空那里打个断点,当用户点击注册按钮时触发这个函数:
这里写图片描述

  1. 开始调试
    调试——》debug Android [即选择刚刚我们新添加的那个配置] ——》开始调试[播放按钮]
    这里写图片描述

开启调试成功: 会出现一行调试的悬浮窗口
这里写图片描述

当我触发注册按钮时:断点
这里写图片描述

接下来就是正常的调试步骤了
按钮依次是:继续,单步跳过,单步调试,单步跳出,重启,停止
这里写图片描述

  1. 对了还有讲下右边界面
    可以看变量,增加断点等
    鼠标移上变量也可以看到变量值,这和chrome调试差不多
    这里写图片描述

1.2 Chrome开发者工具调试

1.win10下 在模拟器ctrl + m 打开菜单选项
选择debug js remotely
这里写图片描述

此时谷歌会打开新页面,如未打开自己输入以下地址亦可
http://localhost:8081/debugger-ui/
这里写图片描述
页面显示Status: Debugger session #0 active. 则证明模拟器连接上了该调试。

  1. F12 打开控制台
    在控制台即可以看到console的输出,以及在sources项中断点调试js脚本[和一般的chrome调试没差别]
    只是在网页不能看到app样子只能输出信息 ,app还是得在真机或者模拟器上查看

2. 利用Typings为Visual Studio Code实现智能提示功能

2.1 全局安装typings

npm install -g typings

2.2 使用typings安装相关代码提示包

先进入你的react-native项目中,在项目的根目录下:

typings install dt~react-native --save --g

安装完成后VSCode的根目录下会多一个typings.json文件
至此配置完,以后关于reactnative的代码就有自动提示+补全。

这里写图片描述

当然也可以使用typings 为node,Lodas等增加智能提示。

后记:

学习reactnative让我真正由衷地发出前端今非昔比的感叹..
从环境搭建到写的应用可以直接调手机的本地文件[前端再也不是简单的网页脚本了。。]到代码调试。让我找到了以前用c++写游戏调试的码感。。
大抵是以前的一个html+js文件就可以跑个网页的时代一去不复返了,大抵是前端走向全栈将要走向客户端后端的大统一了..
要学的东西很多,很新,技术也层出不穷的,不过让我兴奋,为前端感到骄傲~

展开阅读全文

没有更多推荐了,返回首页