.babelrc

{

"presets": [ "react-native" ],

"sourceMaps": true

}

Many JavaScript developers are used to simply log stuff into the console when debugging their software. This works kinda okay. Sadly it seems the console feature on React-Native isn't that sophisticated as in state of the art browsers. Often, big outputs are simply swallowed or you simply get the beloved  [object Object] which hasn't much information to provide either. Sometimes you can't even use  JSON.stringify() to get around this.

But as you may expected, there is a better way, a  debugger .

What

Simply speaking, a debugger is a program that lets you put  breakpoints at lines of your source code and watch the values of specific variables. While I have the feeling that logging still seems the way to go for most JS developers, most browsers and Node.js provide you with debug interfaces or fully integrated graphical interfaces. So it shouldn't be a foreign concept.

Why

In my opinion, debugging brings the most fun when used with the tool you wrote your code in the first place. For me this is currently  VSCode .

VSCode comes with a huge  extension eco-system , one of these happens to be  specifically for react-native and is even created by Microsoft itself, probably because  they also build things with RN .

While it comes with a whole bunch of features, the one I care about the most is a nice debugger integration.

How

I expect you to already have VSCode and the React-Native CLI installed.

First, you need to install the extension into your VSCode via the  Extensions icon on the left menu. The extension is called  React Native Tools .

Then you need to create (or update) your  .babelrc . These are the basic settings that have to be included:


After that you need to create a debug environment by clicking on the  Debug icon on the left menu and then on the gear. This will present you a few debug environments to choose from, here you choose  React Native .

This will generate a  launch.json inside a  .vscode directory for you, which has a few configurations that will be used, when you start a debugging session.

After this, you simply need to set a breakpoint somewhere in your code, select one of the configurations in the select box besides the green run arrow in the debug view and click the arrow. You'll notice that the names in the select box correspond to the names in the launch.json .

Pitfalls

While this seems all straight forward, I encountered 2 problems.

One was the fact, that you need to explicitly  enable debugging in your app via the  React-Native Debug Menu , on the iOS simulator it's opened with  cmd+d . Otherwise your breakpoints will be gray and the debugger won't stop.

The other one is that breakpoints only worked inside React's component methods. When I set a breakpoint at a place where I defined a variable, class or function in the top scope of a .js file/module it would not be hit. I didn't get around this problem at the moment.

Conclusion

Debugging is much nicer than logging. It gives you direct insight of your runtime code, while letting you stay in your beloved editor, it also doesn't require you to write additional logging code you would have to delete later.

https://www.tuicool.com/articles/mYniMjn

react native断点调试--Debug React-Native with VSCode的更多相关文章

  1. React Native 断点调试 跨域资源加载出错问题的原因分析

    写在前面 ————如果从头开始看还没解决,试试文章最后的绝招 闲来无事,折腾了一下React Native,相比之前,开发体验好了不少.但在真机断点调试那里遇到了跨域资源加载出错的问题,一番探索总算解 ...

  2. Visual Studio 2015 MFC之Button颜色变化-断点调试(Debug)

    软件开发,对自己的程序进行调试很重要,本次文章在上一边随笔的基础上,介绍一下Button控件做显示灯的用法,Button控件的添加和变量设置等可以参考下面的的链接:Visaul Studio 2015 ...

  3. Spring Boot项目使用Eclipse进行断点调试Debug

    1.在命令行下定位到项目根目录,启动Spring Boot项目,命令如下: java -Xdebug -Xrunjdwp:server=y,transport=dt_socket,address=80 ...

  4. AS 断点调试 debug

    debug面板 点击下图工具栏开启调试会话 此种调试方式是通过冻结应用运行的状态,仿佛时间停止了一般,然后我们逐一观察此时程序的各个参数是否符合我们的预期. 这种调试方法适用于对时间不敏感的程序.也就 ...

  5. Tomcatd断点调试Debug

    ideaDebug设置

  6. React Native:真机断点调试+跨域资源加载出错问题解决

    写在前面 闲来无事,折腾了一下React Native,相比之前,开发体验好了不少.但在真机断点调试那里遇到了跨域资源加载出错的问题,一番探索总算解决,目测是RN新版本调试服务的bug. 遇到类似问题 ...

  7. React Native 入门 调试项目

    不管时用哪种语言,哪种框架,调试永远都是一个避不开的话题 为我们提供了远程调试的功能,而这个功能需要Chrome浏览器的配合. 1. 首先浏览器一定要安装好React Developer Tool 插 ...

  8. Hybrid APP基础篇(二)->Native、Hybrid、React Native、Web App方案的分析比较

    说明 Native.Hybrid.React.Web App方案的分析比较 目录 前言 参考来源 前置技术要求 楔子 几种APP开发模式 概述 Native App Web App Hybrid Ap ...

  9. 利用 Create React Native App 快速创建 React Native 应用

    本文介绍的 Create-React-Native-App 是非常 Awesome 的工具,而其背后的 Expo 整个平台也让笔者感觉非常的不错.笔者目前公司是采用 APICloud 进行移动应用开发 ...

随机推荐

  1. Oracle账号,用于下载jdk

    账号:liwei@xiaostudy.com 密码:OracleTest1234

  2. 【C++】一个指针占几个字节?为什么呢?

    一个指针在32位操作系统上,占4个字节 一个指针在64位操作系统上,占8个字节 但是,编译器为了兼容32位操作系统和64位操作系统,所以指针都是4个字节长度 为什么呢? 在计算机中,CPU不能直接与硬 ...

  3. 仿微信、qq聊天,@好友功能

    文章主要介绍我们平时用的qq,微信输入框里面的@功能 如图,输入@符号 会出现一个ul ul的位置随着@符号的位置变动 下面是代码 希望对大家有用 直接全部复制,在编辑器中打开 即可 <!DOC ...

  4. sqlserver替换一个单引号为多个单引号

    SqlServer Where语句中如果有单引号,需要替换为两个单引号,不然会语法错误,替换方法如下REPLACE(@UserName,'''','''''') REPLACE(@UserName,' ...

  5. golang 数据导出excel (github.com/360EntSecGroup-Skylar/excelize)

    package handler import ( "fmt" "git.shannonai.com/public_info_prophet/prophet_risk_ag ...

  6. Delphi阿里云邮件推送【支持单一发信、邮件批量发送和获取指定条件下的发送数据】

    作者QQ:(648437169) 点击下载➨Delphi阿里云邮件推送               阿里云api文档 [Delphi阿里云邮件推送]支持SingleSendMail(单一发信接口). ...

  7. 红黑树和AVL树的区别(转)

    add by zhj: AVL树和红黑树都是平衡二叉树,虽然AVL树是最早发明的平衡二叉树,但直接把平衡二叉树等价于AVL树,我认为非常不合适. 但很多地方都在这么用.两者的比较如下 平衡二叉树类型 ...

  8. asp.net图片浏览器效果

    技术来源于同学会实践 前台设计 <%@ Page Language="C#" AutoEventWireup="true" CodeFile=" ...

  9. Linux中的RCU的那点事

      原文:https://zhuanlan.zhihu.com/p/67520807     今天来讲一下这Linux内核中的RCU(Read Copy Update,读复制更新)机制. 我主要参考的 ...

  10. java List深拷贝示例

    示例一 import org.slf4j.Logger; import org.slf4j.LoggerFactory; import java.util.ArrayList; import java ...