ReactNative入门-用webstorm调试

作者: LaxusJ | 来源:发表于2018-01-12 10:19 被阅读643次

    目的

    之前一直用chrome调试,一个是不习惯前端调试方法,毕竟是android 出身嘛还是习惯IDE调试,还有就是源码位置总要滑到底才能找到,很麻烦。突然发现ReactNative也能用IDE调试真是喜出望外啊,将配置和调试方法记录一下。

    IDE设置

    首先配置项,点击Edit Configurations

    配置.png

    然后配置react native启动项

    1.gif

    其中有几点说明一下

    • name可以随便填可以代表应用名
    • React Native package这项需要选择RN的命令行工具一般在~\AppData\Roaming\npm\node_modules\react-native-cli这个目录
    • 如果没安装命令行可以执行npm install -g yarn react-native-cli进行安装
    • Target platform选择目标设备
    • Browser选项按需选择,一般开发只保留一个chrome就好了

    运行效果是这样的


    2.gif

    运行中弹出了指定的浏览器,如果想静默运行在Browser选项中添加-headless --disable-gpu代码就可以了

    3.png

    调试

    配置完IDE启动项后,就可以愉快的debug玩耍了,这里用法和studio一样很方便android小伙伴快速上手,debugger面板左侧显示当前线程运行的方法,右侧显示的是当前变量,有本地变量和全局变量很方便啊。


    4.png

    菜单项

    5.png

    打开菜单项有三种方式

    • 在控制台输入adb shell input keyevent 82
    • 在模拟器上用快捷键ctrl+M,这个比第一种好用
    • 在手机上摇一摇(需要用力。。)

    几项常用的说明一下

    • Reload 重新加载 这个和在模拟器上双击R的效果是一样的
    • Remote JS Debugging 就是远程调试了,用启动项运行起来是默认开启状态
    • Live Reload是全局刷新,写完代码保存一下就会自动更新
    • Hot Reloading是局部刷新,写完代码保存一下就会自动更新
    • Toggle Inspector 审查元素用的小工具
      • perf 暂时不清楚哈,有知道的请留言
      • Inspect 可以快速看到布局相关元素
        6.png
      • Network可以清晰地看到网络请求相关所有信息,这个太实用了


        7.png
      • Touchables 可以看到可点击区域


        8.png

    参考资料

    https://youtrack.jetbrains.com/issue/WEB-27303

    相关文章

      网友评论

      • 小码儿:我 mac 咋弄
        小码儿:没有弄好 能帮忙看看嘛
        1169393184 qq
        LaxusJ:@小码儿 一样的,基本都通用
      • 78f0f9fd7bf9:请问有没有办法console能像chrome一样展开object的结构,现在只能打印出[object object]这一句话
      • 洁简:demo在哪 能瞅瞅吗
        LaxusJ:@洁简 还没上传哈,后几天上传。还需要整理整理。可以持续关注哈
      • 黑羽肃霜:有一个疑问, 如果我要实现类似于 vscode debugger 调试中 "attach to packager"要怎么做呢? 因为之间运行的话, 其实是去寻找当前这个文件夹下对应的原生工程去启动然后调起 RN 服务器的. 目前我调试的情况是,从别处路径启动的原生工程,需要链接到当下的目录,我不需要他直接 debugger 启动, 请问要如何实现.
        LaxusJ:@黑羽肃霜 这种需求还真没试过,如果比较复杂可以先用浏览器debug可以配合插件React Devtools。只要开了debugger,浏览器肯定能捕获到。还有你用react-native-cli run-android 试试能不能捕获到。
        黑羽肃霜:@LaxusJ 不是不走 debugger, 而是说,从别处启动了这个 package, (别个工程目录启动了 react-native run-ios或 run-android) 这个时候让webstorm 去链接到那个工程, 这时候, 在模拟器中启动"debug remotely" 链接到webstorm 的 debugger.

        可能有些绕,不过确实是有这种需求的.
        LaxusJ:vscode我倒是没用过,你大概意思是直接启动不走debugger?可以启动后通过菜单第二项把debugger停掉,或者直接用原始方法启动npm react-native run-android。

      本文标题:ReactNative入门-用webstorm调试

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