美文网首页ReactNative 学习混合式AppReact Native开发经验集
React-native调试小技巧,在Logcat输出conso

React-native调试小技巧,在Logcat输出conso

作者: MiBoy | 来源:发表于2017-02-10 21:29 被阅读1916次

    当初新学React-native的时候,也是感觉一脸懵逼,只能看官网,看视频,去找qq群,没人帮助自己。一点一点肯,慢慢的跳坑,然后再跳出来,学到现在,也不敢说能参透notejs的原理,但是 我会把自己遇到的一些小技巧记下来,方便后人采纳。

    很多新手好比调试网络接口的时候会很苦恼,为什么呢? 一是因为对fetch的不熟悉,不知道这样写对不对,想通过打log的方式去看看程序执行的过程,但是reactnative中要不用ToastAndroid 要不用alert,但是这写只能打出一个字符串,有时候拿不准数据类型还会报错,如果用dubug的模式,会非常卡顿,而且效率不高;二是对整个React-native流程的不熟悉,感觉写代码就是碰运气,一点一点试试。
    我还是想给新手的同学的们点忠告,官网还是要看的,一定要仔细。里面还是有很多好东西的,那我就说一下React-native的调试小技巧。

    Log

    很多同学疑问 ,既然js有个全局API console.log() 为什么看不到输出呢?或者找不到输出在哪里,有很多同学认为console的log只能在debug的窗口下的console下打印出来,那么你就错了,mac自带的终端 用logcat也可以输出。


    就记住一个命令就行

    react-native log-android

    当然,如果是ios的就是

    react-native log-ios

    原理很简单,debug模式,app会通过网络把你的本地代码部署到浏览器上,让浏览器模拟运行,所以你会感觉到卡,而终端打印log的原理就是把console打印的log结合logcat打印出来,既然是到了logcat这一步,那还不随便让你折腾呢。

    Debug 弹窗

    在开发的过程中需要经常调试程序,Facebook 制定的调试模式 必须摇晃手机才能弹出debug 弹窗,真机还可以摇一摇 ,但是到了模拟器上 就没办法摇了,有的同学要说,模拟器不是有menu键吗 ?Facebook 也规定了可以按menu健弹出debug 窗口,我想说同学你说的对,但是到了手机5.0及以上版本,menu键取消了,取而代之的是多任务键。现在我想说的是,虽然取消了但是还是可以通过ADB命令去模拟按键的

    强大的Adb命令啊!

    adb shell input keyevent 82

    试试吧,是不是感觉神奇。对这个命令可以帮助你免去摇一摇辛苦,免去模拟器5.0以上没有menu健的烦恼。

    PS:有些手机可能不好使,但是大部分手机能用

    附带一些adb shell input keyevent KEY_CODE

    0 --> "KEYCODE_UNKNOWN"
    1 --> "KEYCODE_MENU"
    2 --> "KEYCODE_SOFT_RIGHT"
    3 --> "KEYCODE_HOME"
    4 --> "KEYCODE_BACK"
    5 --> "KEYCODE_CALL"
    6 --> "KEYCODE_ENDCALL"
    7 --> "KEYCODE_0"
    8 --> "KEYCODE_1"
    9 --> "KEYCODE_2"
    10 --> "KEYCODE_3"
    11 --> "KEYCODE_4"
    12 --> "KEYCODE_5"
    13 --> "KEYCODE_6"
    14 --> "KEYCODE_7"
    15 --> "KEYCODE_8"
    16 --> "KEYCODE_9"
    17 --> "KEYCODE_STAR"
    18 --> "KEYCODE_POUND"
    19 --> "KEYCODE_DPAD_UP"
    20 --> "KEYCODE_DPAD_DOWN"
    21 --> "KEYCODE_DPAD_LEFT"
    22 --> "KEYCODE_DPAD_RIGHT"
    23 --> "KEYCODE_DPAD_CENTER"
    24 --> "KEYCODE_VOLUME_UP"
    25 --> "KEYCODE_VOLUME_DOWN"
    26 --> "KEYCODE_POWER"
    27 --> "KEYCODE_CAMERA"
    28 --> "KEYCODE_CLEAR"
    29 --> "KEYCODE_A"
    30 --> "KEYCODE_B"
    31 --> "KEYCODE_C"
    32 --> "KEYCODE_D"
    33 --> "KEYCODE_E"
    34 --> "KEYCODE_F"
    35 --> "KEYCODE_G"
    36 --> "KEYCODE_H"
    37 --> "KEYCODE_I"
    38 --> "KEYCODE_J"
    39 --> "KEYCODE_K"
    40 --> "KEYCODE_L"
    41 --> "KEYCODE_M"
    42 --> "KEYCODE_N"
    43 --> "KEYCODE_O"
    44 --> "KEYCODE_P"
    45 --> "KEYCODE_Q"
    46 --> "KEYCODE_R"
    47 --> "KEYCODE_S"
    48 --> "KEYCODE_T"
    49 --> "KEYCODE_U"
    50 --> "KEYCODE_V"
    51 --> "KEYCODE_W"
    52 --> "KEYCODE_X"
    53 --> "KEYCODE_Y"
    54 --> "KEYCODE_Z"
    55 --> "KEYCODE_COMMA"
    56 --> "KEYCODE_PERIOD"
    57 --> "KEYCODE_ALT_LEFT"
    58 --> "KEYCODE_ALT_RIGHT"
    59 --> "KEYCODE_SHIFT_LEFT"
    60 --> "KEYCODE_SHIFT_RIGHT"
    61 --> "KEYCODE_TAB"

    62 --> "KEYCODE_SPACE"
    63 --> "KEYCODE_SYM"
    64 --> "KEYCODE_EXPLORER"
    65 --> "KEYCODE_ENVELOPE"
    66 --> "KEYCODE_ENTER"
    67 --> "KEYCODE_DEL"
    68 --> "KEYCODE_GRAVE"
    69 --> "KEYCODE_MINUS"
    70 --> "KEYCODE_EQUALS"
    71 --> "KEYCODE_LEFT_BRACKET"
    72 --> "KEYCODE_RIGHT_BRACKET"
    73 --> "KEYCODE_BACKSLASH"
    74 --> "KEYCODE_SEMICOLON"
    75 --> "KEYCODE_APOSTROPHE"
    76 --> "KEYCODE_SLASH"
    77 --> "KEYCODE_AT"
    78 --> "KEYCODE_NUM"
    79 --> "KEYCODE_HEADSETHOOK"
    80 --> "KEYCODE_FOCUS"
    81 --> "KEYCODE_PLUS"
    82 --> "KEYCODE_MENU"
    83 --> "KEYCODE_NOTIFICATION"
    84 --> "KEYCODE_SEARCH"
    85 --> "TAG_LAST_KEYCODE"

    相关文章

      网友评论

      • BBBOND:react-native log-android 这个命令很受用
      • 陆仁丙:厉害了,这个果然是不错~
      • MiBoy:感觉有用的就评论下吧,希望大家看看我其他的文章,本人主攻一些实用的小技巧,冷知识,希望对大家有用
        f24bb1a26338:那我现在要打包。我不知道静态资源放在哪里。因为开发的时候是在自己调用的相对路径下。
        MiBoy:@Wolf_Totem 我不知道,我猜它们的相对路径是一定的,你可以编译打包,然后解压之后可以看到
        f24bb1a26338:你知道require引用的静态资源,在打包的时候。这些静态资源要放到什么地方吗?

      本文标题:React-native调试小技巧,在Logcat输出conso

      本文链接:https://www.haomeiwen.com/subject/zldnittx.html