Devtools

Chrome updates

https://developers.google.com/web/updates/2018/03/nic65

Developer tools allows you to 

https://developers.google.com/web/tools/chrome-devtools/console/console-reference?utm_source=dcc&utm_medium=redirect&utm_campaign=2016q3

• Live edit html & stylesheets
• Debug javascript
• Optimize with profiler

1. Elements

   Dig into the elements panel, learn how to make changes to the DOM and update styles.

   
   

   

   
   
2. 

   
   

   
   

   
   

   
   

   
   

   
   

   
   

   
   

   
   

   
   

   
   

   
   

   Sources

   New workflows to speed up your development time.

   
   

   Make changes to the file in source tab ,ctrl+s  ,right click on it open local modification 

   can revert 

   can apply different versions

   
   

   

   
   

   
   

   
   

   
   

3. 
   Console

   Review the DevTools console and learn how to examine exceptions and use timesaving shortcuts.

   
   

   https://developers.google.com/web/tools/chrome-devtools/console/console-reference?utm_source=dcc&utm_medium=redirect&utm_campaign=2016q3

   
   

   bling

   

   
   

   

   
   

   
   

   
   

   
   

4. Debugging

   Great workflows for debugging problems in your JavaScript.

5. 
   Network

   1)Speed up your network interactions using the network tab and the page speed extension.

   
   

   2)Place css above js

   3) remove  404  requests

   4) use png 

   5)scale down images to be of right size

   
   

   

   
   

   
   

   
   

   

   
   

6. 
   Profiles

   Get familar with your applications rendering performance and learn how to use CPU profiling to identity performance problems.

7. 
   Memory

   Learn how to find and identify memory leaks in your application.

   
   

   
   

   
   

   LightHouse

   
   

   https://developers.google.com/web/tools/lighthouse/