Comment «secouer» un appareil Android dans l'émulateur Android pour faire apparaître le menu de développement pour déboguer mon application React Native


201

Je travaille sur une application mobile multi-plateforme React Native. J'écris des instructions console.log au fur et à mesure de mon développement. Je veux voir ces instructions de journalisation dans Chrome pendant que j'exécute l'application Android dans l'émulateur Android par défaut. Selon les documents de Facebook, j'ai juste besoin de "secouer l'appareil". Comment faire cela dans l'émulateur Android?

Pour accéder au menu développeur intégré à l'application:

Sur iOS, secouez l'appareil ou appuyez sur Ctrl + ⌘ + Z dans le simulateur. Sur Android, secouez l'appareil ou appuyez sur le bouton du menu matériel (disponible sur les anciens> appareils et dans la plupart des émulateurs, par exemple dans genymotion, vous pouvez appuyer sur ⌘ + m pour> simuler le clic du bouton du menu matériel)

Réponses:


220

Dans votre application, appuyez Command + Msur l' émulateur Android sur OSX ou Ctrl + Msur Linux et Windows.


2
Malheureusement, F2 ne fonctionne plus sous Linux dans Android Emulator 2 beta. Et maintenant?
Szczepan Hołyszewski

7
@ SzczepanHołyszewski Je voudrais ajouter que, actuellement sous linux, ctrl + m affiche le menu développeur
Ozum Safa

les <kbd> f1 </kbd>, ... <kbd> f12 </kbd> sont déroutants et difficiles à appuyer sur la plupart des ordinateurs
ericn

223

Avec un React Native exécuté dans l'émulateur,
appuyez sur ctrl+ m(pour Linux, je suppose que c'est la même chose pour Windows et + mpour Mac OS X) ou exécutez ce qui suit dans le terminal:

adb shell input keyevent 82

2
Ne travaille pas pour moi immédiatement. Je devais aller dans "Paramètres" ("...")> Paramètres> Envoyer des raccourcis clavier à> Contrôles de l'émulateur (pas un périphérique virtuel), puis cela a fonctionné.
Ryan Knell

ctrl + m ne fonctionne pas sur linux. Cette commande adb shell fonctionne même si je préférerais un raccourci .... je suppose que je peux en faire un qui lance cette commande si je ne trouve pas d'autre moyen
Laurent

Pour spécifier un appareil, faites adb -s <device id/serial> shell input keyevent 82. Je l'utilise lorsque j'utilise à la fois un émulateur et un appareil physique.
grisaitis

79

Si vous utilisez le nouvel émulateur fourni avec Android Studio 2.0, le raccourci clavier pour la touche de menu est maintenant Cmd + M, tout comme dans Genymotion.

Alternativement, vous pouvez toujours envoyer une pression sur un bouton de menu en utilisant adbdans un terminal:

adb shell input keyevent KEYCODE_MENU

Notez également que le raccourci du bouton de menu n'est pas une exigence stricte, c'est juste le comportement par défaut fourni par la ReactActivityclasse Java (qui est utilisé par défaut si vous avez créé votre projet avec react-native init). Voici le code pertinent de onKeyUpen ReactActivity.java:

if (keyCode == KeyEvent.KEYCODE_MENU) {
  mReactInstanceManager.showDevOptionsDialog();
  return true;
}

Si vous ajoutez React Native à une application existante ( documentation ici ) et que vous ne l'utilisez pas ReactActivity, vous devrez connecter le bouton de menu de la même manière. Vous pouvez également appeler ReactInstanceManager.showDevOptionsDialogvia tout autre mécanisme. Par exemple, dans une application sur laquelle je travaille, j'ai ajouté un élément de menu Action Bar uniquement pour les développeurs qui fait apparaître le menu, car je trouve cela plus pratique que de secouer l'appareil lorsque vous travaillez sur un appareil physique.


cela ne fonctionne pas sur MIUI sur mon mi4i. il fait simplement apparaître la barre d'applications. existe-t-il une autre solution? Je ne veux vraiment pas l'exécuter sur un émulateur car cela ralentit la merde de mon ordinateur portable
Shreyans

il semble qu'il y ait d'autres problèmes spécifiques à miui. après avoir activé l'autorisation de notification, je peux maintenant secouer l'appareil pour obtenir le menu. vérifiez ce fil au cas où quelqu'un d'autre aurait des problèmes avec MIUI github.com/facebook/react-native/issues/2754
Shreyans

J'ai modifié mon article pour ajouter plus de détails sur le fonctionnement de tout cela, ce qui peut vous aider à dépister le problème. Ma meilleure supposition est que vous n'utilisez pas ReactActivityet n'avez pas branché le bouton de menu par d'autres moyens.
Alan Pierce

merci pour votre réponse rapide :) bien que le problème soit avec le gestionnaire d'autorisations MIUI qui n'a pas laissé la boîte de dialogue de menu s'afficher.
Shreyans

1
Bon conseil sur ReactActivity. On dirait que ce code a maintenant été déplacé vers ReactActivityDelegate.java
Ryan H.

20

'Ctrl + m' fonctionne pour Windows dans l'émulateur Android pour afficher le menu développeur React-Native.

Impossible de trouver cela documenté nulle part. J'ai trouvé mon chemin ici, deviné le reste ... Bonne douleur.

Au fait: OP: Vous n'avez pas mentionné sur quel OS vous étiez.


14

Pour Linux, vous cliquez sur les trois points "..." à côté de l'émulateur, sur les capteurs virtuels, cochez "Déplacer", puis essayez de déplacer rapidement les coordonnées x, y ou z.

entrez la description de l'image ici


4
En fait, c'est la seule solution qui a fonctionné pour moi.
DsCpp

1
Vous pouvez également cliquer sur le graphique de l'appareil dans la fenêtre affichée et le faire glisser.
brismith


8

Je suis sur Mac OS, donc lorsque j'appuie sur Commande, il active l'option de zoom. Voici ma solution

  • Bouton Ouvrir la fenêtre de [...] configuration
  • Allez dans l' Settingsonglet -> Generalonglet -> Send keyboard shortcuts tochamp
  • Modifiez la valeur Virtual device"comme indiqué dans l'image

Après avoir mis l'accent sur l'émulateur et appuyez sur Commande + M, le menu de développement apparaît.

Option émulateur -> Paramètres -> Général


4

Utiliser command + m(cmd + M)sur MAC. C'est-à- make sure that you are accessing your application while you try to access the Debug Menudire que votre application doit être en cours d'exécution, sinon Cmd + Melle ne fera que retourner le menu habituel du téléphone.


4

Comme lors du développement d'applications natives réactives, nous jouons tellement avec le terminal

j'ai donc ajouté un script dans les scripts du fichier package.json

"menu": "adb shell input keyevent 82"

et j'ai touché le menu $ yarn

pour que le menu apparaisse sur l'émulateur, il transmettra le code de clé 82 à l'émulateur via ADB pas de la manière optimale mais je l'aime et j'ai senti le partager.

entrez la description de l'image ici


2

sur linux, ctrl + m devrait fonctionner mais pas pour résoudre le problème, cliquez sur (...) (ses commandes étendues) puis fermez cette fenêtre. maintenant vous pouvez ouvrir le menu par ctrl + m. puis:

  1. cliquez sur le (...) (ses contrôles étendus)

  2. fermer les contrôles étendus

  3. ctrl + m


1

Ce n'est peut-être pas une solution directe, mais j'ai créé une bibliothèque qui vous permet d' utiliser 3 doigts au lieu de secouer pour ouvrir le menu de développement, en mode développement

https://github.com/pie6k/react-native-dev-menu-on-touch

Vous n'avez qu'à envelopper votre application à l'intérieur:

importer DevMenuOnTouch à partir de 'react-native-dev-menu-on-touch'; // ou: importez {DevMenuOnTouch} à partir de 'react-native-dev-menu-on-touch'

class YourRootApp extends Component {
  render() {
    return (
      <DevMenuOnTouch>
        <YourApp />
      </DevMenuOnTouch>
    );
  }
}

C'est vraiment utile lorsque vous devez déboguer sur un appareil réel et que vous avez des collègues assis à côté de vous.


1

J'essayais de créer une version via adb install -r -d <app-release>.apk🤦

Assurez-vous que vous exécutez la version de débogage , le menu fonctionnera via le raccourci ou l'interface CLI.


-1

Pour les ordinateurs portables Windows fn Key + Control + m

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.