From 2c2e6f7b84834fa575829c7632ae08fc8e6d5a52 Mon Sep 17 00:00:00 2001 From: bach Date: Tue, 13 Oct 2026 15:11:26 +0200 Subject: [PATCH] mobile debugging make and readme --- Makefile | 83 ++++++++++++++++++++++++++++++++++++-------- README.md | 102 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ src | 2 +- 3 files changed, 172 insertions(+), 15 deletions(-) diff --git a/Makefile b/Makefile index 5fc42df..75fb03f 100644 --- a/Makefile +++ b/Makefile @@ -85,18 +85,73 @@ exec_mysql: dump_db: docker exec leshed-mysql-1 sh -c 'exec mariadb-dump -uroot -pleshed leshed' > ./ressources/leshed-$(DATE_NOW)-local.sql -# Test sur mobile : connexion ADB sans fil + tunnel vers le serveur Vite (HMR). -# Le port du débogage sans fil change à chaque activation : on le passe -# (make mobile MOBILE=192.168.1.101:37495) ou on le laisse trouver par nmap. -# L'appareil doit avoir été associé une fois (adb pair IP:PORT CODE). -MOBILE ?= 192.168.1.101 +# --- Mobile : associer puis inspecter ---------------------------------------- +# Le port de débogage sans fil change à chaque activation : le relire sur +# l'écran du téléphone avant chaque commande. +# +# 1. Association (une seule fois ; ou si la connexion refuse ensuite) : +# téléphone : « Débogage sans fil » > « Associer l'appareil avec un code +# d'appairage », noter le port affiché, puis : +# make mobile_associate ADDR=192.168.1.101:PORT +# et saisir le code à 6 chiffres demandé par adb. +# +# 2. Inspection : relier l'adresse de la ligne « Adresse IP et port » : +# make mobile_inspect ADDR=192.168.1.101:PORT +# Ça connecte l'appareil et pose deux tunnels : +# - reverse 5173 : le localhost:5173 du téléphone (assets Vite en dev, +# librairie leshed/vitehmr) pointe vers le laptop. Sans lui : page +# sans styles ni JS, aucune erreur visible. +# - forward 9223 : socket de débogage Firefox du téléphone exposé en +# local (inspecteur : about:debugging). Pas 9222 : réservé au +# --remote-debugging-port du Firefox desktop (WebDriver BiDi). +# Après connexion : recharger la page sur le téléphone. +# +# Piège connu : tout changement de transport (câble, reboot, réactivation du +# sans fil) tue les tunnels en silence — les requêtes restent en attente, +# plus rien ne charge. Relancer mobile_inspect, recharger la page. -mobile: - @target="$(MOBILE)"; \ - case "$$target" in *:*) ;; *) \ - port=$$(nmap -Pn -p 30000-50000 --min-rate 3000 -T4 "$$target" | awk -F/ '/open/ {print $$1; exit}'); \ - [ -n "$$port" ] || { echo "Aucun port ADB trouvé sur $$target (débogage sans fil actif ?)"; exit 1; }; \ - target="$$target:$$port";; \ - esac; \ - adb connect "$$target" && adb -s "$$target" reverse tcp:5173 tcp:5173 && \ - echo "OK : $$target, localhost:5173 du mobile -> Vite du laptop. Firefox : about:debugging" +mobile_associate: + @case "$(ADDR)" in *:*) ;; *) echo "Usage : make mobile_associate ADDR=IP:PORT"; exit 1;; esac; \ + adb pair "$(ADDR)" + +mobile_inspect: + @case "$(ADDR)" in *:*) ;; *) echo "Usage : make mobile_inspect ADDR=IP:PORT"; exit 1;; esac; \ + adb connect "$(ADDR)" || exit 1; \ + adb reverse --remove tcp:5173 2>/dev/null; \ + adb forward --remove tcp:9223 2>/dev/null; \ + adb -s "$(ADDR)" reverse tcp:5173 tcp:5173 && \ + adb -s "$(ADDR)" forward tcp:9223 localabstract:org.mozilla.firefox/firefox-debugger-socket && \ + echo "OK : tunnels posés ($(ADDR)). Recharger la page sur le téléphone." + +# --- Mobile USB : associer puis inspecter ------------------------------------ +# Plus simple que le sans fil : pas de code, pas de port à lire. +# L'« association » USB est l'autorisation donnée sur le téléphone à la +# première connexion (popup empreinte de l'ordinateur). +# +# 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. +# 2. [Ordinateur] make mobile_associate_usb — vérifie que l'appareil est vu +# et autorisé. Si « unauthorized », revalider la popup sur le téléphone. +# 3. [Ordinateur] make mobile_inspect_usb — pose les mêmes tunnels que +# mobile_inspect (reverse 5173, forward 9223) sur l'appareil USB. +# Ensuite : recharger la page sur le téléphone, puis étapes 6 à 8 de la +# procédure sans fil du README (inspection about:debugging, HMR). + +mobile_associate_usb: + @state=$$(adb devices | awk 'NR>1 && $$1 !~ /:/ && NF {print $$2; exit}'); \ + case "$$state" in \ + device) echo "OK : appareil USB vu et autorisé.";; \ + unauthorized) echo "Non autorisé : valider la popup sur le téléphone."; exit 1;; \ + *) echo "Aucun appareil USB (câble branché ? « Débogage USB » actif ?)."; exit 1;; \ + esac + +mobile_inspect_usb: + @serial=$$(adb devices | awk 'NR>1 && $$2=="device" && $$1 !~ /:/ {print $$1; exit}'); \ + [ -n "$$serial" ] || { echo "Aucun appareil USB vu — lancer d'abord make mobile_associate_usb."; exit 1; }; \ + adb reverse --remove tcp:5173 2>/dev/null; \ + adb forward --remove tcp:9223 2>/dev/null; \ + adb -s "$$serial" reverse tcp:5173 tcp:5173 && \ + adb -s "$$serial" forward tcp:9223 localabstract:org.mozilla.firefox/firefox-debugger-socket && \ + echo "OK : tunnels posés ($$serial, USB). Recharger la page sur le téléphone." diff --git a/README.md b/README.md index 3a89478..f38c6e0 100644 --- a/README.md +++ b/README.md @@ -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 diff --git a/src b/src index 7581ab9..600aee7 160000 --- a/src +++ b/src @@ -1 +1 @@ -Subproject commit 7581ab9333f971507cfe1c84fbebb0dff9ce2c1d +Subproject commit 600aee78f544d9cc1b606b5431033e40012c092e