Presentation of Charles Proxy @Webperf 07/11/2013

1. CHARLES PROXY
Analyse HTTP et modification des requêtes
Arnaud Guéras (@arnaudgueras)
Front End Developer Senior chez Axa

2. CHARLES C’EST QUI ? C’EST QUOI ?

3. PROXY DE DEBUG HTTP
Navigateurs
Charles Proxy
Serveur

4. PROXY DE DEBUG HTTP
Serveur
Navigateurs
Charles Proxy
Proxy
Entreprise

5. CHARLES FAIT QUOI ?
•
Enregistrement de requêtes
•
Local Mapping
•
Analyse de requêtes
•
Remote Mapping
•
Limitation de bande passante
(Throttling)
•
Réécriture automatique (rewrite)
•
Blacklist
•
DNS Spoofing
•
Mirroring
•
Répéter et modifier des requêtes
•
Validation de markup
•
…
•
Breakpoint
•
SSL Proxying
•
Reverse Proxy
•
Port Forwarding
•
Suppression de cache (No cache)
•
Bloquer les cookies

7. L’ANALYSE DE REQUETE

11. AFFICHE DES TABLEAUX SUR LES RESOURCES
CHARGÉES

12. AFFICHE DES GRAPHIQUES EN TIMELINE

13. EN FONCTION DU POIDS DES RESSOURCES

14. EN FONCTION DU TEMPS DE CHARGEMENT

15. EN FONCTION DES TYPES DES RESSOURCES

16. ON PEUT AUSSI ANALYSER UNE RESOURCE
SPECIFIQUE

17. ON PEUT AUSSI ANALYSER UNE RESOURCE
SPECIFIQUE

18. THROTTLING

19. LE THROTTLING PERMET…
• Limiter la bande passante afin de simuler une ligne ADSL, 56K
ou une connexion depuis un téléphone mobile
• De comprendre pourquoi en prod on a parfois des problèmes
d’ordre de chargement dans la page alors qu’on ne l’a pas en
local
• De vérifier comportement du chargement de son site dans les
mêmes conditions que sur une ligne Adsl standard ou autre type
de connexion

20. CHARLES PROXY THROTTLING

21. CHARGEMENT DE CANIUSE.COM
Simulation d’une ligne 64kb/s
Sans Throttling (4,95s)*
Avec Throttling (35,24s)
*Ma ligne ADSL est pourrie
THROTTLING

22. NO CACHING

23. NO CACHING

24. NO CACHING

25. NO CACHING

26. BLOCK COOKIES
*La recette est ici : http://goo.gl/lufbRv

27. BLOCK COOKIES

28. BLOCK COOKIES

29. Sans blocage
Avec blocage
BLOCK COOKIES

30. LOCAL MAPPING
• Fait un lien des ressources du serveur directement sur des fichiers locaux

31. REDIRECTION D’UN FICHIER
Redirection du fichier base.js du site viedemerde.fr

32. REDIRECTION D’UN FICHIER
Redirection du fichier base.js du site viedemerde.fr

33. REDIRECTION D’UN FICHIER
Le mapping est bien fait

34. REDIRECTION D’UN FICHIER
Avant (sans mapping du fichier base.js)
Après (avec mapping)

35. ON PEUT REDIRIGER DES DOSSIERS COMPLETS

36. ON PEUT REDIRIGER DES DOSSIERS COMPLETS

37. ON PEUT REDIRIGER DES DOSSIERS COMPLETS

38. REMOTE MAPPING
• Fait un lien des ressources du serveur vers un autre serveur
http://

39. REDIRECTION D’UN DOSSIER COMPLET
On peut rediriger vers un serveur distant ou un serveur local

40. REWRITE

41. AVEC REWRITE ON PEUT TOUT MODIFIER DANS
UNE REQUETE HTTP
•
Ajouter un header
•
Supprimer un header
•
Modifier un header
•
Changer le host
•
Changer le path
•
Changer l’url de la requête (un peu comme le mapping)
•
Ajouter un query param
•
Supprimer un query param
•
Modifier un query param
•
Modifier le corps (body) de la requête
•
Modifier le corps de la réponse

42. REWRITE

43. REWRITE

44. REWRITE

45. REWRITE

46. REWRITE

47. REWRITE

48. RÉPÉTER ET MODIFIER UNE REQUETE

49. RÉPÉTER ET MODIFIER UNE REQUETE
• Repeat :
Répéter une requête une seule fois
• Repeat Advanced :
Répéter une requête N fois par paquet de X requêtes
• Edit :
Editer une requête avant de l’envoyer

50. REPEAT ADVANCED
• Iteration :10 et Concurrency : 1
Répète la requête 10x mais attends que la requête
précédente soit finie avant d’en envoyer une
nouvelle

51. REPEAT ADVANCED
• Iteration :10 et Concurrency : 2
Répète la requête 10x mais envoie 2 requêtes à
chaque fois, donc 5 paquets de requêtes sont
envoyés.

52. Charles proxy est payant
License
1-4 User Licenses
5+ User Licenses
10+ User Licenses
Site License
Multi-Site License
Pricing
US$50 / license
US$40 / license (20% discount)
US$30 / license (40% discount)
US$400
US$700
http://www.charlesproxy.com
Arnaud Guéras (@arnaudgueras)
arnaudgs@gmail.com