Fonctionnalités DevTools utiles pour les testeurs

Bonjour à tous! Je m'appelle Misha, je travaille dans la position d'un testeur manuel, ou Manual QA - car cela convient à tout le monde. Étant donné que les tests manuels prévalent dans mon travail, je rencontre souvent la console du développeur dans le navigateur (je pense que 99,9% des testeurs Web). 





Il existe de nombreuses sources sur Internet où vous pouvez trouver des informations sur DevTools, à la fois pour les développeurs et les testeurs. Bien entendu, le contenu de ces articles varie considérablement en fonction de son objectif. Ayant étudié une grande quantité de ce matériel et réalisant que nous (les testeurs) sommes privés d'informations :), j'ai décidé d'aller dans la source principale pour étudier les outils du développeur dans son intégralité. En parcourant tous les éléments de l'immense menu, j'ai écrit environ 20 éléments pour moi-même qui seraient intéressants (lire utiles) pour les testeurs. Je dois dire tout de suite que dans l'article je ne vous dirai pas comment utiliser tel ou tel outil, puisque cela est décrit en détail dans les articles qui seront joints à chacun des points. Le but de mon histoire est plutôt d'isoler de l'énorme liste des capacités de DevTools, exactement cellesce qui serait utile pour les spécialistes de l'assurance qualité. Je ne prétends pas être objectivité et divulgation complète du sujet, mais je vais essayer de le faire. 





PS: L' ordre des éléments sur la liste n'indique pas leur importance.





  1. Émulation Android et iOS, connectez Android lors du débogage.





    Il me semble qu'à l'heure actuelle, la plupart des entreprises qui fabriquent des produits pour appareils mobiles disposent d'une flotte d'appareils nécessaires pour tester complètement leur produit. Cependant, tout le monde ne juge pas nécessaire de dépenser de l'argent pour cela. Et, la nécessité de tester votre produit sur un appareil particulier ne dépend pas toujours du fait que ce produit est conçu pour les téléphones mobiles ou non. À cet égard, il est nécessaire de vérifier leurs sites sur des appareils mobiles sans leur présence physique. L'inconvénient de cette approche est que la plupart de ces émulateurs sont commerciaux.  





    android, . , .





  2. User-Agent.





    DevTools . () . , - , . User-Agent , - . , User-Agent .





    Substitution utilisateur-agent
    User-Agent
  3. JS .





    , . JS, . , , , , , , DevTools .





  4. CSS .





    , - . . , (, , ..), , , “live” .





    Exemple de redimensionnement de la boîte d'élément
  5. CSS Javascript .





    , web-. , “” , , , , , .





    Rapport de couverture de code
  6. debug JavaScript.





    , - , . , , . . , JavaScript, , , . , , , . 3 Chrome. , , , .





  7. Chrome .





    DevTools ( 65 ). , CSS , . , , , , .





  8. .





    DevTools, , . , 90% , , , , , , , . , , .  .





    Sélection de la vitesse de connexion
  9. Network.





    , DevTools . , .





    Liste des colonnes possibles dans le réseau
    Network
  10. .





    , . , , , .





  11. .





    , , . , , , , .





  12. cookies applications.





    Cookies - , , () , , -, . (, , ).





: 





( ), , , , : 





  • shortcuts, chrome DevTools













  • xhr









  • JavaScript





  • , network.





Bien sûr, DevTools ne se limite pas aux fonctionnalités que j'ai décrites ci-dessus. Il existe des onglets très intéressants appelés performance et audit, mais je n'ai pas encore chargé cette information, car je la considère comme un sujet pour un article séparé, si en général il sera intéressant de lire et de se familiariser avec ces onglets dans DevTools.





Merci à tous pour votre attention!








All Articles