Funciones útiles de DevTools para probadores

¡Hola a todos! Mi nombre es Misha, trabajo en el puesto de probador manual o control de calidad manual, ya que es conveniente para cualquiera. Debido al hecho de que las pruebas manuales prevalecen en mi trabajo, a menudo me encuentro con la consola del desarrollador en el navegador (creo que lo mismo que el 99,9% de los probadores web). 





Hay muchas fuentes en Internet donde puede encontrar información sobre DevTools, tanto para desarrolladores como para probadores. Por supuesto, el contenido de dichos artículos varía mucho según su enfoque. Habiendo estudiado una gran cantidad de dicho material y dándome cuenta de que nosotros (los probadores) se nos está privando de información :), decidí ir a la fuente principal para estudiar las herramientas del desarrollador en su totalidad. Revisando todos los elementos del enorme menú, escribí unos 20 elementos para mí que serían interesantes (leídos útiles) para los probadores. Debo decir de inmediato que en el artículo no te diré cómo usar esta o aquella herramienta, ya que esto se describe en detalle en los artículos que se adjuntarán a cada uno de los puntos. El propósito de mi historia es más bien aislar de la enorme lista de capacidades de DevTools, exactamente esaslo que sería útil para los especialistas en control de calidad. No pretendo ser objetividad y divulgación total del tema, pero intentaré hacerlo. 





PD: El orden de los elementos de la lista no indica su importancia.





  1. Emulación de Android e iOS, conecte Android al depurar.





    Me parece que, en este momento, la mayoría de las empresas que fabrican productos para dispositivos móviles tienen una flota de dispositivos necesarios para la prueba completa de su producto. Sin embargo, no todo el mundo considera necesario gastar dinero en esto. Y la necesidad de probar su producto en un dispositivo en particular no siempre depende de si este producto está hecho para teléfonos móviles o no. En este sentido, existe la necesidad de verificar sus sitios en dispositivos móviles sin su presencia física. La desventaja de este enfoque es que la mayoría de estos emuladores son comerciales.  





    android, . , .





  2. User-Agent.





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





    Sustitución de usuario-agente
    User-Agent
  3. JS .





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





  4. CSS .





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





    Ejemplo de cuadro de elemento de cambio de tamaño
  5. CSS Javascript .





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





    Informe de cobertura de código
  6. debug JavaScript.





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





  7. Chrome .





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





  8. .





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





    Seleccionar la velocidad de conexión
  9. Network.





    , DevTools . , .





    Lista de posibles columnas en la red
    Network
  10. .





    , . , , , .





  11. .





    , , . , , , , .





  12. cookies applications.





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





: 





( ), , , , : 





  • shortcuts, chrome DevTools













  • xhr









  • JavaScript





  • , network.





Por supuesto, DevTools no se limita a la funcionalidad que describí anteriormente. Hay pestañas muy interesantes llamadas rendimiento y auditoría, pero todavía no cargué esta información, ya que lo considero un tema para un artículo separado, si en general será interesante leer y familiarizarme con estas pestañas en DevTools.





¡Gracias a todos por su atención!








All Articles