Modern ERP Reports Application with microservices architecture Tech Stack: - Backend: FastAPI + python-oracledb (Oracle DB integration) - Frontend: Vue.js 3 + PrimeVue + Vite - Telegram Bot: python-telegram-bot + SQLite - Infrastructure: Shared database pool, JWT authentication, SSH tunnel Features: - FastAPI backend with async Oracle connection pool - Vue.js 3 responsive frontend with PrimeVue components - Telegram bot alternative interface - Microservices architecture with shared components - Complete deployment support (Linux Docker + Windows IIS) - Comprehensive testing (Playwright E2E + pytest) Repository Structure: - reports-app/ - Main application (backend, frontend, telegram-bot) - shared/ - Shared components (database pool, auth, utils) - deployment/ - Deployment scripts (Linux & Windows) - docs/ - Project documentation - security/ - Security scanning and git hooks
24 KiB
Ghid Testare pe Telefon Android Real cu Chrome DevTools MCP
Ghid complet pentru configurarea testării aplicației ROA2WEB pe telefon Android real folosind ADB WiFi și Chrome DevTools MCP server.
De ce Chrome DevTools MCP?
Avantaje fata de emulare Playwright:
- [OK] Testezi pe hardware real (touch, senzori, performanta reala)
- [OK] Vezi exact cum arata pe telefonul tau
- [OK] Claude Code poate controla direct telefonul prin MCP
- [OK] Performance profiling real
- [OK] Network throttling real
- [OK] Screenshot-uri de pe dispozitiv real
Cerinte
- Telefon Android (versiune 10+) pentru ADB WiFi
- Windows 10/11 cu PowerShell
- WSL/Linux pentru development
- Chrome instalat pe telefon
- Telefon si calculator in aceeasi retea WiFi
Arhitectura Retea
Android Phone Windows Host WSL Environment
(10.0.20.114) (10.0.20.144) (172.18.251.234)
| | |
|--- ADB WiFi ----------| |
| | |
| |--- Port Proxy --------|
| | (9222, 3000, 8001) |
| | |
|<-- http://localhost:3000 (reverse proxy) --> App (Vite)
| |
|<-- http://localhost:8001 (reverse proxy) --> API (FastAPI)
|
Claude Code (WSL) --> MCP --> http://10.0.20.144:9222 --> ADB Forward --> Chrome on Phone
IP-uri importante:
- Phone WiFi IP: 10.0.20.114 (variaza)
- Windows physical IP: 10.0.20.144 (variaza)
- WSL IP: 172.18.251.234 (WSL internal network)
- WSL gateway: 172.18.240.1
Pas 1: Instalare ADB (Android Debug Bridge) pe Windows
IMPORTANT: ADB trebuie instalat pe Windows, NU in WSL! WSL2 nu poate vedea dispozitivele USB conectate la Windows, iar chiar si cu ADB WiFi exista probleme de networking intre WSL2 si dispozitivele Android.
Metoda 1: Winget (Recomandat)
Windows PowerShell:
# Instalare ADB Platform Tools
winget install Google.PlatformTools
# Verifica instalarea
adb version
Daca adb version nu returneaza nimic:
ADB poate fi instalat de winget dar nu adaugat automat in PATH. Locatie posibila:
C:\Users\[USERNAME]\AppData\Local\Microsoft\WinGet\Packages\Google.PlatformTools_Microsoft.Winget.Source_8wekyb3d8bbwe\platform-tools\
Adauga temporar in PATH (sesiunea curenta):
$env:Path += ";C:\Users\$env:USERNAME\AppData\Local\Microsoft\WinGet\Packages\Google.PlatformTools_Microsoft.Winget.Source_8wekyb3d8bbwe\platform-tools"
# Verifica
adb version
Adauga permanent in PATH:
# Windows PowerShell (Administrator)
[Environment]::SetEnvironmentVariable("Path", $env:Path + ";C:\Users\$env:USERNAME\AppData\Local\Microsoft\WinGet\Packages\Google.PlatformTools_Microsoft.Winget.Source_8wekyb3d8bbwe\platform-tools", "Machine")
Metoda 2: Download Manual
Download de pe site oficial:
https://developer.android.com/tools/releases/platform-tools
- Download "SDK Platform-Tools for Windows"
- Extrage in
C:\platform-tools - Adauga
C:\platform-toolsin PATH (System Environment Variables)
Pas 2: Configurare Telefon Android
1. Activeaza "Developer Options"
Setari -> Despre telefon -> Apasa de 7 ori pe "Numar compilare" (Build number)
Vei vedea un mesaj: "Esti acum developer!"
2. Activeaza USB Debugging si Wireless Debugging
Setari -> System -> Optiuni pentru dezvoltatori
-> Activeaza "USB debugging"
-> Activeaza "Wireless debugging"
Pe unele telefoane:
- Samsung: Setari -> Optiuni dezvoltator -> USB debugging + Wireless debugging
- Xiaomi: Setari -> Setari suplimentare -> Optiuni pentru dezvoltatori
- Huawei: Setari -> System & updates -> Developer options
IMPORTANT: Android 10+ este necesar pentru Wireless debugging.
3. Conectare ADB WiFi
Pe telefon:
Setari -> Developer options -> Wireless debugging -> "Pair device with pairing code"
Vei vedea un dialog cu:
- Pairing code: 6 cifre (ex: 123456)
- IP address & Port: ex: 10.0.20.114:37639
NOTA IMPORTANTA: Exista doua porturi diferite:
- Pairing port: Pentru asociere initiala (ex: 37639)
- Wireless debugging port: Pentru conexiune permanenta (diferit de pairing port!)
In Windows PowerShell:
# Pas 1: Pair (prima data, foloseste pairing port)
adb pair 10.0.20.114:37639
# Introdu codul de 6 cifre cand este cerut
# Pas 2: Verifica portul wireless debugging (MAIN PORT)
# Pe telefon: Wireless debugging screen -> IP address & Port (diferit de pairing!)
# Exemplu: 10.0.20.114:38261
# Pas 3: Connect (foloseste wireless debugging port, NU pairing port!)
adb connect 10.0.20.114:38261
# Verifica conexiunea
adb devices
Output asteptat:
List of devices attached
10.0.20.114:38261 device
Daca vezi unauthorized:
- Deblocheaza telefonul
- Accepta prompt-ul "Allow wireless debugging"
- Bifeaza "Always allow from this computer"
4. Troubleshooting Conexiune
Error: "failed to connect"
# Restart ADB server
adb kill-server
adb start-server
# Reincearca pairing si connect
Pairing sau connect nu raspunde:
- Verifica telefonul si PC-ul sunt pe aceeasi retea WiFi
- Dezactiveaza si reactiveaza "Wireless debugging" pe telefon
- Verifica nu exista restrictii WiFi (guest network, isolation)
Pas 3: Configurare Port Forwarding Complet
Port forwarding este necesar la TREI niveluri pentru ca totul sa functioneze:
- ADB forward - Phone Chrome -> Windows localhost
- Windows port proxy - Windows -> WSL (pentru MCP si acces aplicatie)
- Firewall rules - Permite conexiuni pe porturile necesare
A) ADB Port Forwarding (Chrome DevTools)
Windows PowerShell:
# Forward Chrome DevTools Protocol de pe telefon la Windows
adb forward tcp:9222 localabstract:chrome_devtools_remote
# Verifica port forwarding
adb forward --list
Output asteptat:
10.0.20.114:38261 tcp:9222 localabstract:chrome_devtools_remote
Testeaza conexiunea:
Deschide in browser Windows desktop:
http://localhost:9222/json/version
Ar trebui sa vezi informatii despre Chrome de pe telefon (versiune, WebSocket URL, etc.)
B) Windows Port Proxy (pentru WSL/MCP Access)
Windows PowerShell (Administrator):
# Port proxy pentru Chrome DevTools (WSL -> Windows -> Phone)
netsh interface portproxy add v4tov4 listenport=9222 listenaddress=0.0.0.0 connectport=9222 connectaddress=127.0.0.1
# Port proxy pentru aplicatie (Phone -> Windows -> WSL)
# Inlocuieste 172.18.251.234 cu IP-ul tau WSL!
netsh interface portproxy add v4tov4 listenport=3000 listenaddress=0.0.0.0 connectport=3000 connectaddress=172.18.251.234
netsh interface portproxy add v4tov4 listenport=8001 listenaddress=0.0.0.0 connectport=8001 connectaddress=172.18.251.234
# Verifica configurarea
netsh interface portproxy show all
Cum afli IP-ul WSL:
# In WSL bash
ip route show | grep default | awk '{print $3}' # Gateway IP
hostname -I | awk '{print $1}' # WSL IP direct
C) Configurare Firewall
Windows PowerShell (Administrator):
# Firewall rule pentru Chrome DevTools
New-NetFirewallRule -DisplayName "Chrome-DevTools-Android" -Direction Inbound -LocalPort 9222 -Protocol TCP -Action Allow
# Firewall rules pentru aplicatie ROA2WEB
New-NetFirewallRule -DisplayName "ROA2WEB-Frontend-WSL" -Direction Inbound -LocalPort 3000 -Protocol TCP -Action Allow
New-NetFirewallRule -DisplayName "ROA2WEB-Backend-WSL" -Direction Inbound -LocalPort 8001 -Protocol TCP -Action Allow
# Verifica rules
Get-NetFirewallRule -DisplayName "*ROA2WEB*" | Select-Object DisplayName, Enabled, Direction
Get-NetFirewallRule -DisplayName "Chrome-DevTools-Android" | Select-Object DisplayName, Enabled, Direction
D) Script Automatizat pentru Setup Complet
In loc de comenzi manuale, foloseste scriptul automatizat:
Windows PowerShell:
cd E:\proiecte\roa2web\roa2web\reports-app\frontend\scripts
.\android-test-setup.ps1
Scriptul:
- Verifica ADB si telefon conectat
- Configureaza ADB forward pentru Chrome DevTools
- Configureaza Windows port proxy (9222, 3000, 8001)
- Testeaza conexiunea la Chrome pe telefon
- Afiseaza informatii de retea si configurare MCP
E) Testare Completa
In WSL:
# Testeaza acces Chrome DevTools de la WSL
# Inlocuieste 10.0.20.144 cu IP-ul tau Windows!
curl http://10.0.20.144:9222/json/version
Pe telefon Chrome:
http://localhost:3000
Daca aplicatia se incarca, port forwarding functioneaza corect!
F) Verificare chrome://inspect (Optional)
Pe calculatorul tau, in Chrome desktop Windows:
chrome://inspect#devices
Ar trebui sa vezi telefonul tau listat si tab-urile deschise in Chrome pe telefon.
Pas 4: Instalare si Configurare Chrome DevTools MCP Server
1. Configurare MCP in Claude Code (WSL)
IMPORTANT: Pentru Claude Code care ruleaza in WSL, trebuie sa folosim IP-ul FIZIC al Windows, NU localhost!
Editare fisier de configurare:
# In WSL
nano ~/.claude.json
Gaseste sau adauga sectiunea chrome-devtools-android:
{
"mcpServers": {
"chrome-devtools-android": {
"type": "stdio",
"command": "npx",
"args": [
"chrome-devtools-mcp@latest",
"--browser-url",
"http://10.0.20.144:9222"
]
}
}
}
NOTA CRITICA: Inlocuieste 10.0.20.144 cu IP-ul FIZIC al calculatorului tau Windows!
Cum afli IP-ul fizic Windows:
# Windows PowerShell
ipconfig | findstr "IPv4"
Output exemplu:
IPv4 Address. . . . . . . . . . . : 10.0.20.144
De ce NU localhost:9222?
In WSL, localhost se refera la WSL intern, NU la Windows host. Deoarece ADB forward asculta pe Windows localhost, trebuie sa accesam prin IP-ul fizic Windows cu Windows port proxy configurat.
2. Alternativ: Chrome DevTools pentru Browser Desktop (Optional)
Daca vrei sa controlezi atat Chrome desktop CAT si Chrome Android:
{
"mcpServers": {
"chrome-devtools": {
"type": "stdio",
"command": "npx",
"args": [
"chrome-devtools-mcp@latest",
"--browser-url",
"http://localhost:9222"
]
},
"chrome-devtools-android": {
"type": "stdio",
"command": "npx",
"args": [
"chrome-devtools-mcp@latest",
"--browser-url",
"http://10.0.20.144:9222"
]
}
}
}
3. Reload Claude Code
Dupa salvarea configuratiei:
VSCode (Claude Code):
Ctrl+Shift+P -> "Developer: Reload Window"
Sau restart complet VSCode.
4. Verificare MCP Functioneaza
In WSL bash (pentru debugging):
# Testeaza ca MCP poate ajunge la Chrome pe telefon
curl http://10.0.20.144:9222/json/version
In Claude Code:
Cere Claude Code:
"Folosind chrome-devtools-android, fa un screenshot de pe telefonul Android"
Daca totul este configurat corect, Claude Code va putea controla Chrome pe telefon!
Pas 5: Testare pe Telefon Android
Workflow Complet de Testare
1. Setup Initial (Prima Data)
Windows PowerShell (Administrator):
# A) Conectare telefon WiFi
adb pair 10.0.20.114:PAIRING_PORT # Cu pairing code
adb connect 10.0.20.114:MAIN_PORT # Wireless debugging port
# B) Setup complet port forwarding si firewall
cd E:\proiecte\roa2web\roa2web\reports-app\frontend\scripts
.\android-test-setup.ps1
# Scriptul configureaza automat:
# - ADB forward pentru Chrome DevTools (9222)
# - Windows port proxy pentru WSL access
# - Firewall rules pentru porturile necesare
# - Reverse port forwarding pentru acces localhost pe telefon
2. Porneste Aplicatia ROA2WEB
In WSL:
cd /mnt/e/proiecte/roa2web/roa2web
./start-dev.sh
Aplicatia va porni:
- Backend (FastAPI): http://localhost:8001
- Frontend (Vite): http://localhost:3000
3. Acceseaza Aplicatia pe Telefon
Pe telefon Chrome:
Opțiunea 1 (Recomandat - cu reverse proxy):
http://localhost:3000
Opțiunea 2 (Alternativ - IP Windows direct):
http://10.0.20.144:3000
Important: Daca folosesti localhost pe telefon, trebuie sa fi rulat scriptul android-test-setup.ps1 care configureaza reverse port forwarding automat!
4. Control Chrome pe Telefon prin Claude Code
In Claude Code (WSL), poti cere:
"Folosind chrome-devtools-android, fa un screenshot de pe telefonul Android"
"Navigheaza la pagina de facturi pe telefon"
"Verifica performanta dashboard-ului pe telefon"
"Analizeaza console errors de pe Chrome Android"
Claude Code poate:
- [OK] Captura screenshot-uri de pe telefon
- [OK] Naviga intre pagini
- [OK] Analiza performance
- [OK] Inspectie DOM
- [OK] Citire console logs
- [OK] Network request monitoring
Comenzi Utile ADB (Windows PowerShell)
Verificare conexiune:
adb devices -l
Verificare Chrome este pornit pe telefon:
adb shell dumpsys activity activities | Select-String -Pattern "chrome"
Restart ADB server:
adb kill-server
adb start-server
adb devices
Port forwarding manual:
# Forward Chrome DevTools
adb forward tcp:9222 localabstract:chrome_devtools_remote
# Reverse port forwarding (pentru acces localhost pe telefon)
adb reverse tcp:3000 tcp:3000
adb reverse tcp:8001 tcp:8001
# Verifica forwarding
adb forward --list
adb reverse --list
Logcat in timp real:
adb logcat | Select-String -Pattern "chrome"
Informatii retea:
# IP Windows fizic
ipconfig | findstr "IPv4"
# Verifica port proxy Windows
netsh interface portproxy show all
# Verifica firewall rules
Get-NetFirewallRule -DisplayName "*ROA2WEB*" | Select-Object DisplayName, Enabled
Get-NetFirewallRule -DisplayName "Chrome-DevTools-Android" | Select-Object DisplayName, Enabled
Workflow Zilnic de Testare
Dimineata (Setup Rapid):
Windows PowerShell:
# 1. Conectare telefon WiFi (daca s-a deconectat)
adb connect 10.0.20.114:38261 # Inlocuieste cu IP:PORT-ul tau
# 2. Verifica conexiune
adb devices
# 3. Setup port forwarding complet
cd E:\proiecte\roa2web\roa2web\reports-app\frontend\scripts
.\android-test-setup.ps1
Pornire Aplicatie:
In WSL:
cd /mnt/e/proiecte/roa2web/roa2web
./start-dev.sh
Testare pe Telefon:
Pe telefon Chrome:
http://localhost:3000
In Claude Code:
"Folosind chrome-devtools-android, fa un screenshot de pe telefon"
"Testeaza dashboard-ul pe telefonul Android"
"Verifica performanta paginii de facturi pe telefon"
Seara (Cleanup):
In WSL:
cd /mnt/e/proiecte/roa2web/roa2web/reports-app/frontend
./scripts/android-disconnect.sh
Script cleanup:
- Sterge toate ADB forward rules
- Sterge toate ADB reverse rules
- Cleanup complet pentru deconectare sigura
Troubleshooting
Problema: adb: no devices/emulators found
Cauze posibile:
- Telefonul nu este conectat WiFi la aceeasi retea
- Wireless debugging nu este activat
- ADB server nu ruleaza
Solutie:
# Windows PowerShell
# 1. Verifica ADB server ruleaza
adb devices
# 2. Restart ADB server
adb kill-server
adb start-server
# 3. Reconnect telefon WiFi
adb connect 10.0.20.114:38261 # Inlocuieste cu IP:PORT-ul tau
Problema: device unauthorized
Solutie:
- Deblocheaza telefonul
- Ar trebui sa apara prompt-ul de autorizare
- Bifeaza "Always allow from this computer"
- Restart ADB:
adb kill-server
adb start-server
adb devices
Problema: Nu pot accesa http://localhost:9222 din Windows
Solutie:
# Verifica port forwarding
adb forward --list
# Re-forward portul
adb forward --remove-all
adb forward tcp:9222 localabstract:chrome_devtools_remote
# Deschide Chrome pe telefon si incearca din nou
curl http://localhost:9222/json/version
Problema: Nu pot accesa http://10.0.20.144:9222 din WSL
Cauza: Windows port proxy nu este configurat sau firewall blocheaza.
Solutie:
# Windows PowerShell (Administrator)
# 1. Configureaza port proxy
netsh interface portproxy add v4tov4 listenport=9222 listenaddress=0.0.0.0 connectport=9222 connectaddress=127.0.0.1
# 2. Adauga firewall rule
New-NetFirewallRule -DisplayName "Chrome-DevTools-Android" -Direction Inbound -LocalPort 9222 -Protocol TCP -Action Allow
# 3. Verifica din WSL
# WSL
curl http://10.0.20.144:9222/json/version # Inlocuieste cu IP-ul tau Windows
Problema: Pe telefon nu se incarca aplicatia (http://localhost:3000)
Cauza: Reverse port forwarding nu este configurat.
Solutie:
# Windows PowerShell
# Ruleaza scriptul care configureaza automat reverse forwarding
cd E:\proiecte\roa2web\roa2web\reports-app\frontend\scripts
.\android-test-setup.ps1
Sau manual:
adb reverse tcp:3000 tcp:3000
adb reverse tcp:8001 tcp:8001
# Verifica
adb reverse --list
Problema: Pe telefon "ERR_EMPTY_RESPONSE" sau "This site can't be reached"
Verificari:
-
Telefonul si PC-ul sunt in aceeasi retea WiFi?
-
Windows port proxy este configurat?
netsh interface portproxy show all
# Ar trebui sa vezi forwarding pentru 3000 si 8001
- Firewall permite conexiuni?
Get-NetFirewallRule -DisplayName "*ROA2WEB*"
- Backend ruleaza pe 0.0.0.0:8001 (nu doar 127.0.0.1)?
# In WSL
netstat -tulpn | grep 8001
# Ar trebui: 0.0.0.0:8001
Problema: Chrome DevTools MCP nu se conecteaza din Claude Code
Cauze posibile:
- MCP configurat cu localhost in loc de IP fizic Windows
- Port proxy nu este configurat
- Chrome nu ruleaza pe telefon
Solutie:
# 1. Verifica configuratie MCP in WSL
cat ~/.claude.json | grep browser-url
# Ar trebui sa fie: http://10.0.20.144:9222 (IP fizic Windows, NU localhost!)
# 2. Testeaza manual din WSL
curl http://10.0.20.144:9222/json/version
# 3. Daca nu functioneaza, verifica Windows port proxy
# Windows PowerShell (Administrator)
netsh interface portproxy show all
# Ar trebui sa vezi: 9222 -> 127.0.0.1:9222
# 4. Reload Claude Code
# VSCode: Ctrl+Shift+P -> "Developer: Reload Window"
Problema: "adb pair" nu raspunde sau timeout
Solutie:
- Verifica telefonul si PC sunt pe aceeasi retea WiFi (nu guest network!)
- Dezactiveaza si reactiveaza "Wireless debugging" pe telefon
- Incearca alt port (genereaza un nou pairing code)
- Verifica nu exista WiFi isolation (router settings)
Problema: MCP screenshot deschide Chrome pe calculator, nu pe telefon
Cauza: MCP configurat cu http://localhost:9222 in loc de IP fizic Windows.
Solutie:
# WSL - Editeaza configuratie MCP
nano ~/.claude.json
# Schimba localhost cu IP fizic Windows:
# "http://localhost:9222" -> "http://10.0.20.144:9222"
# Afla IP Windows:
# Windows PowerShell
ipconfig | findstr "IPv4"
Problema: WSL nu poate accesa serviciile (3000, 8001)
Cauza: Port proxy inversat (WSL -> Windows in loc de Windows -> WSL).
Port proxy corect:
- Pentru MCP (WSL -> Windows -> Phone): Listen pe 0.0.0.0:9222, connect la 127.0.0.1:9222
- Pentru aplicatie (Phone -> Windows -> WSL): Listen pe 0.0.0.0:3000, connect la 172.18.x.x:3000
Solutie:
# Windows PowerShell (Administrator)
# Sterge port proxy gresit
netsh interface portproxy delete v4tov4 listenport=3000 listenaddress=0.0.0.0
# Adauga port proxy corect (Phone -> WSL)
# Inlocuieste 172.18.251.234 cu IP-ul tau WSL!
netsh interface portproxy add v4tov4 listenport=3000 listenaddress=0.0.0.0 connectport=3000 connectaddress=172.18.251.234
netsh interface portproxy add v4tov4 listenport=8001 listenaddress=0.0.0.0 connectport=8001 connectaddress=172.18.251.234
Comparatie: Playwright Emulation vs Chrome DevTools MCP
| Aspect | Playwright Emulation | Chrome DevTools MCP (Real Device) |
|---|---|---|
| Setup | [OK] Simplu, zero config | [WARN] Necesita ADB WiFi + port forwarding |
| Viteza | [OK] Foarte rapid | [WARN] Mai lent (network latency) |
| Acuratete vizuala | [WARN] Nu exact ca pe telefon | [OK] 100% real |
| Touch gestures | [ERROR] Simulate | [OK] Touch real |
| Performance | [ERROR] Hardware desktop | [OK] Performance reala telefon |
| CI/CD | [OK] Perfect | [ERROR] Nu se poate (necesita device fizic) |
| Debug interactiv | [WARN] Limitat | [OK] Excelent |
| Cost | [OK] Gratis, instantaneu | [WARN] Timp + configurare |
| Platform | [OK] Orice OS | [WARN] Necesita Windows + WSL |
Recomandare:
- Development zilnic: Playwright emulation (rapid, suficient)
- Final testing: Chrome DevTools MCP pe telefon real (asigura calitate)
- CI/CD: Playwright emulation
De ce WSL ADB nu functioneaza?
Limitare tehnica: WSL2 nu poate accesa dispozitive USB conectate la Windows host.
Explicatie:
- WSL2 ruleaza intr-un lightweight VM (Hyper-V)
- USB passthrough nu este suportat complet in WSL2
- Chiar si cu ADB WiFi, exista probleme de networking intre WSL si Android device
Solutia: Foloseste ADB din Windows PowerShell direct, apoi Windows port proxy pentru a permite WSL (Claude Code) sa acceseze Chrome DevTools prin IP fizic Windows.
Scripturi Disponibile
| Script | Platform | Descriere |
|---|---|---|
| android-test-setup.ps1 | Windows PowerShell | Setup complet: ADB forward, port proxy, firewall |
| android-disconnect.sh | Bash/WSL | Cleanup: sterge port forwarding |
Screenshot-uri: Nu mai este nevoie de script! Claude Code face screenshot-uri prin MCP (chrome-devtools-android) inline, fara salvare fisiere.
Locatie scripturi:
E:\proiecte\roa2web\roa2web\reports-app\frontend\scripts\
Documentatie scripturi: Vedere scripts/README_ANDROID.md
Next Steps
Dupa configurare completa:
- Testeaza manual aplicatia pe telefon (http://localhost:3000)
- Cere Claude Code sa faca screenshot-uri si sa analizeze layout-ul
- Verifica performance pe hardware real
- Identifica probleme care nu apar in emulare desktop
- Optimizeaza pentru experienta mobile reala
- Documenteaza probleme si solutii gasite
Resurse Utile
- Chrome DevTools MCP: https://github.com/ChromeDevTools/chrome-devtools-mcp
- Chrome Remote Debugging: https://developer.chrome.com/docs/devtools/remote-debugging/
- ADB Documentation: https://developer.android.com/tools/adb
- ADB WiFi Debugging: https://developer.android.com/studio/command-line/adb#wireless
- Playwright Mobile Testing: https://playwright.dev/docs/emulation
- Windows Port Proxy: https://docs.microsoft.com/en-us/windows-server/networking/technologies/netsh/netsh-interface-portproxy
Summary
Arhitectura completa:
- Phone (Android 10+): ADB WiFi -> Chrome DevTools Protocol
- Windows Host: ADB forward (9222) + Windows port proxy (9222, 3000, 8001) + Firewall rules
- WSL (Claude Code): MCP client -> http://WINDOWS_IP:9222 -> Chrome on Phone
Componente cheie:
- ADB WiFi pairing and connection (Windows PowerShell)
- ADB forward pentru Chrome DevTools (9222)
- Windows port proxy pentru WSL access
- Firewall rules pentru porturile necesare
- MCP configurat cu IP fizic Windows (NU localhost!)
- Reverse port forwarding pentru acces localhost pe telefon
Workflow zilnic:
- Connect phone WiFi (adb connect)
- Run setup script (android-test-setup.ps1)
- Start app (./start-dev.sh in WSL)
- Test on phone (http://localhost:3000)
- Control via Claude Code (screenshots, testing)
- Cleanup (android-disconnect.sh)
Autor: ROA2WEB Development Team Data: 2025-10-20 Versiune: 2.0 (ADB WiFi + Windows Port Forwarding)