Webstorm 添加 React Native 调试菜单

[collinxz-coder]

React Native 在真机上调试的时候，要打开调试按钮，需要摇动手机，一直摇手机也受不了。好在可以通过 adb 来发送 KEYCODE_MENU 给真机，但是每次打开菜单后，还要自己去点击具体的菜单。今天好好看了一遍 ADB 的 keyevent ，整理了一下通过 adb 选择具体的菜单项目。

向上翻页键 - KEYCODE_PAGE_UP (92)

我们可以通过 adb shell input keyevent 92 将菜单跳转到第一项。

导航键 向下 - KEYCODE_DPAD_DOWN (20)

通过 adb shell input keyevent 20 来跳转到下一项目

回车键 - KEYCODE_ENTER (66)

这个键可以让我们选定某个菜单。

有了以上三个 key 我们就可以定位具体的菜单了。

• Reload: adb shell input keyevent 82 92 66
• Debug JS Remotely: adb shell input keyevent 82 92 20 66
• Enable/Disable Live Reload: shell input keyevent 82 92 20 20 66
• Enable/Disable Hot Reloading: shell input keyevent 82 92 20 20 20 66
• Toggle Inspector: shell input keyevent 82 92 20 20 20 20 66
• Show Perf Monitor: shell input keyevent 82 92 20 20 20 20 20 66
• Start/Stop Sampling Profiler: shell input keyevent 82 92 20 20 20 20 20 20 66
• Dev Settings: shell input keyevent 82 92 20 20 20 20 20 20 20 66

添加到 WebStorm Tool 菜单中：

1. 打开 WebStorm 设置
2. 选择 Tools -> External Tools
3. 在右侧的列表中添加新的菜单项，主要配置是 Program 和 Arguments，Name 和 Description 这两项直接设置为 React Native 菜单名称就行，Program 的配置是 /Users/collin/Library/Android/sdk/platform-tools/adb，Arguments 的配置的值是 input keyevent 82 92 20 [, 20, ...] 66。

这样我们就添加好了，现在你可以在 WebStorm 菜单的 Tools 中看到这些栏目。