mobile debugging make and readme
This commit is contained in:
@@ -168,6 +168,108 @@ make composer_install
|
||||
You can now visit http://dev.leshed.fr on your browser
|
||||
After the first run
|
||||
|
||||
## Mobile : tester et inspecter sur téléphone
|
||||
|
||||
En dev (`APP_ENV=development`), le thème charge ses assets depuis le serveur
|
||||
Vite du laptop (`leshed/vitehmr`, voir `leshed.theme`) — des URLs en
|
||||
`http://localhost:5173`. Sur le téléphone, «localhost» désigne le téléphone :
|
||||
il faut un tunnel ADB pour que ces URLs atteignent le Vite du laptop.
|
||||
|
||||
### Procédure pas à pas
|
||||
|
||||
L'association (étapes 1 à 3) ne se fait qu'une fois — ou si l'étape 4 refuse
|
||||
de connecter. Ensuite, chaque session de travail commence à l'étape 4.
|
||||
|
||||
**1. [Téléphone]** Paramètres → Options pour développeurs → activer
|
||||
**« Débogage sans fil »**. Ouvrir son écran (l'option activée ne suffit pas :
|
||||
les ports ne sont lisibles que sur cet écran). Et dans Firefox → Paramètres :
|
||||
activer **« Remote debugging via USB »** (nécessaire pour l'inspection,
|
||||
étape 7).
|
||||
|
||||
**2. [Téléphone]** Sur cet écran, taper **« Associer l'appareil avec un code
|
||||
d'appairage »** : une popup affiche une adresse `IP:PORT` et un **code à 6
|
||||
chiffres**. Laisser la popup ouverte.
|
||||
|
||||
**3. [Ordinateur]** Associer (avec le port de la popup de l'étape 2) :
|
||||
|
||||
```sh
|
||||
make mobile_associate ADDR=192.168.1.101:PORT
|
||||
```
|
||||
|
||||
Saisir le code à 6 chiffres quand adb le demande. Répondre « Successfully
|
||||
paired » → fermer la popup sur le téléphone.
|
||||
|
||||
**4. [Téléphone]** Revenir sur l'écran « Débogage sans fil » et lire la ligne
|
||||
**« Adresse IP et port »** — attention, ce port de *connexion* est différent du
|
||||
port de pairing de l'étape 2, et il change à chaque réactivation du débogage
|
||||
sans fil. Il faut le relire à chaque session.
|
||||
|
||||
**5. [Ordinateur]** Connecter et poser les tunnels :
|
||||
|
||||
```sh
|
||||
make mobile_inspect ADDR=192.168.1.101:PORT
|
||||
```
|
||||
|
||||
Répondre « OK : tunnels posés ». La cible connecte l'appareil puis pose :
|
||||
- `adb reverse tcp:5173 tcp:5173` — le `localhost:5173` du mobile pointe vers
|
||||
le Vite du laptop. **Sans lui, la page charge sans styles ni JS, sans erreur
|
||||
visible** (les requêtes restent en attente).
|
||||
- `adb forward tcp:9223 localabstract:org.mozilla.firefox/firefox-debugger-socket` —
|
||||
le socket de débogage de Firefox Android devient joignable en local sur le
|
||||
port 9223. Pas 9222 : ce port est réservé au `--remote-debugging-port` du
|
||||
Firefox desktop (WebDriver BiDi), avec qui il entrerait en collision.
|
||||
|
||||
**6. [Téléphone]** Recharger la page `dev.leshed.fr` dans Firefox : les styles
|
||||
apparaissent. Si la page reste nue, voir « Piège connu » ci-dessous.
|
||||
|
||||
**7. [Ordinateur]** Pour inspecter, ouvrir `about:debugging#/setup` dans le
|
||||
Firefox desktop : le téléphone apparaît dans la colonne de gauche →
|
||||
**This Firefox** → la liste des onglets du téléphone s'affiche → **« Inspect »**
|
||||
sur l'onglet voulu : une fenêtre DevTools complète, branchée sur la page du
|
||||
téléphone.
|
||||
|
||||
**8. [Téléphone + Ordinateur]** On travaille en parallèle : les éditions SCSS
|
||||
repartent sur le téléphone par HMR à chaque sauvegarde, sans rechargement. La
|
||||
mesure scriptée (si l'agent est lancé) interroge la même page par le port 9223.
|
||||
|
||||
### Variante USB (plus simple)
|
||||
|
||||
Pas de code d'appairage, pas de port à lire : l'« association » USB est
|
||||
l'autorisation donnée sur le téléphone.
|
||||
|
||||
**1. [Téléphone]** Brancher le câble, activer **« Débogage USB »** dans les
|
||||
Options pour développeurs. À la première connexion, une popup demande
|
||||
d'autoriser l'ordinateur : cocher **« Toujours autoriser depuis cet
|
||||
ordinateur »**, valider. (Firefox → Paramètres → **« Remote debugging via
|
||||
USB »** doit aussi être activé, comme en étape 1 du sans fil.)
|
||||
|
||||
**2. [Ordinateur]** Vérifier que l'appareil est vu et autorisé :
|
||||
|
||||
```sh
|
||||
make mobile_associate_usb
|
||||
```
|
||||
|
||||
Si la réponse est « unauthorized », revalider la popup sur le téléphone.
|
||||
|
||||
**3. [Ordinateur]** Poser les tunnels (mêmes tunnels que `mobile_inspect`) :
|
||||
|
||||
```sh
|
||||
make mobile_inspect_usb
|
||||
```
|
||||
|
||||
**4. [Téléphone]** Recharger la page `dev.leshed.fr` — puis l'inspection
|
||||
(`about:debugging`) et le travail en parallèle se déroulent comme aux étapes
|
||||
6 à 8 du sans fil.
|
||||
|
||||
### Piège connu : les tunnels meurent en silence
|
||||
|
||||
Après tout changement de transport ADB (passage USB ↔ sans fil, reboot du
|
||||
téléphone, réactivation du débogage), le reverse/forward existent toujours
|
||||
côté téléphone mais n'aboutissent plus — symptôme : les assets ne chargent
|
||||
plus. Relancer la cible qui correspond au transport courant
|
||||
(`mobile_inspect ADDR=IP:PORT` en sans fil, `mobile_inspect_usb` en USB),
|
||||
puis recharger la page sur le téléphone.
|
||||
|
||||
## Coding
|
||||
### drush
|
||||
you can access to drush by loging into the php container
|
||||
|
||||
Reference in New Issue
Block a user