mobile debugging make and readme

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."

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