Recursos úteis do DevTools para testadores

Olá a todos! Meu nome é Misha, trabalho na posição de testador manual, ou Controle de qualidade manual - pois é conveniente para qualquer pessoa. Devido ao fato de que o teste manual prevalece em meu trabalho, muitas vezes me deparo com o console do desenvolvedor no navegador (acho que o mesmo que 99,9% dos testadores da web). 





Existem muitas fontes na Internet onde você pode encontrar informações sobre DevTools, tanto para desenvolvedores quanto para testadores. Claro, o conteúdo de tais artigos varia muito dependendo de seu foco. Tendo estudado uma grande quantidade desse material e percebendo que nós (testadores) estamos sendo privados de informações :), decidi ir para a fonte primária para estudar as ferramentas do desenvolvedor por completo. Examinando todos os itens do enorme menu, escrevi cerca de 20 itens para mim que seriam interessantes (leia-se úteis) para os testadores. Devo dizer desde já que no artigo não direi como utilizar esta ou aquela ferramenta, visto que isso está descrito detalhadamente nos artigos que serão anexados a cada um dos pontos. O objetivo da minha história é isolar da enorme lista de recursos do DevTools, exatamente aqueleso que seria útil para especialistas em controle de qualidade. Não pretendo ser objetividade e divulgação total do tema, mas vou tentar fazer isso. 





PS: A ordem dos itens na lista não indica sua importância.





  1. Emulação android e ios, conecte o android durante a depuração.





    Parece-me que no momento a maioria das empresas que fazem produtos para dispositivos móveis possui uma frota de dispositivos necessários para o teste completo de seus produtos. No entanto, nem todos consideram necessário gastar dinheiro com isso. E a necessidade de testar seu produto em um determinado dispositivo nem sempre depende se este produto foi feito para telefones celulares ou não. Nesse sentido, há a necessidade de verificar seus sites em dispositivos móveis sem sua presença física. A desvantagem dessa abordagem é que a maioria desses emuladores é comercial.  





    android, . , .





  2. User-Agent.





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





    Substituição de usuário-agente
    User-Agent
  3. JS .





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





  4. CSS .





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





    Exemplo de redimensionamento de caixa de elemento
  5. CSS Javascript .





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





    Relatório de cobertura de código
  6. debug JavaScript.





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





  7. Chrome .





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





  8. .





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





    Selecionando a velocidade de conexão
  9. Network.





    , DevTools . , .





    Lista de colunas possíveis na rede
    Network
  10. .





    , . , , , .





  11. .





    , , . , , , , .





  12. cookies applications.





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





: 





( ), , , , : 





  • shortcuts, chrome DevTools













  • xhr









  • JavaScript





  • , network.





Claro, DevTools não se limita à funcionalidade que descrevi acima. Existem guias muito interessantes chamadas performance e auditoria, mas não carreguei essas informações ainda, pois considero isso um tópico para um artigo separado, se em geral será interessante ler e se familiarizar com essas guias no DevTools.





Obrigado a todos pela atenção!








All Articles