Useful DevTools Features for Testers

Hello everyone! My name is Misha, I work in the position of a manual tester, or Manual QA - as it is convenient for anyone. Due to the fact that manual testing prevails in my work, I often come across the developer's console in the browser (I think the same as 99.9% of web testers). 

There are a huge number of sources on the Internet where you can find information about DevTools, both for developers and testers. Of course, the content of such articles varies greatly depending on its focus. Having studied a large amount of such material and realizing that we (testers) are being deprived of information :), I decided to go into the primary source to study the developer's tools in full. Going through all the items of the huge menu, I wrote out about 20 items for myself that would be interesting (read useful) for testers. I must say right away that in the article I will not tell you how to use this or that tool, since this is described in detail in the articles that will be attached to each of the points. The purpose of my story is rather to isolate from the huge list of DevTools capabilities, exactly thosewhich would be useful for QA specialists. I do not pretend to be objectivity and full disclosure of the topic, but I will try to do it. 

PS: The order of items on the list does not indicate their importance.

1. Emulation android and ios, connect android when debugging.

   
   
   
   
   

   It seems to me that at the moment most of the companies that make products for mobile devices have a fleet of devices required for full testing of their product. However, not everyone considers it necessary to spend money on this. And, the need to test your product on a particular device does not always depend on whether this product is made for mobile phones or not. In this regard, there is a need to check their sites on mobile devices without their physical presence. The downside to this approach is that most of these emulators are commercial.  

   
   
   
   
   

   android, . , .

   
   
   
   
   

2. User-Agent.

   
   
   
   
   

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

   
   
   
   
   

   

3. JS .

   
   
   
   
   

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

   
   
   
   
   

4. CSS .

   
   
   
   
   

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

   
   
   
   
   

   

5. CSS Javascript .

   
   
   
   
   

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

   
   
   
   
   

   

6. debug JavaScript.

   
   
   
   
   

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

   
   
   
   
   

7. Chrome .

   
   
   
   
   

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

   
   
   
   
   

8. .

   
   
   
   
   

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

   
   
   
   
   

   

9. Network.

   
   
   
   
   

   , DevTools . , .

   
   
   
   
   

   

10. .

    
    
    
    
    

    , . , , , .

    
    
    
    
    

11. .

    
    
    
    
    

    , , . , , , , .

    
    
    
    
    

    

12. cookies applications.

    
    
    
    
    

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

    
    
    
    
    

: 

( ), , , , : 

• shortcuts, chrome DevTools; 

  
  
  
  
  

• ; 

  
  
  
  
  

• ; 

  
  
  
  
  

• xhr ; 

  
  
  
  
  

• ; 

  
  
  
  
  

• JavaScript ; 

  
  
  
  
  

• , network.

  
  
  
  
  

Of course, DevTools is not limited to the functionality that I described above. There are very interesting tabs called performance and audit, but I did not load this information yet, as I consider it a topic for a separate article, if in general it will be interesting to read and get acquainted with these tabs in DevTools.

Thank you all for your attention!