Every developer/designer should be aware of some developer tools and extensions available in the chrome browser.
Accessing the DevTools :
Select the Chrome menu at the top-right of your browser window, then select Tools > Developer Tools or we can use shortcut ctrl+shift+i or press F12 key. We can also open Dev tool by Right-click on any page element and select Inspect Element.
Chrome has 8 main group of tools available :
1. Element panel : In the element tool we can view or edit DOM (HTML) and can edit styles of the corresponding html element.
2. Network panel : Network tool is used to debug page load performance issues. We can check time being taken for loading resources (like css file, image urls, Js file) to identify slow components :
4. Performance / Timeline : Performance/timeline panel gives us overview of where time is spent when loading a page.This panel is used to analyze all the activity in our webpage when it loads. This is the best tool to investigating performance issues in our application.
5. Profile panel : Profile tab shows us memory and cpu consumption. It displays the execution time and memory usage of web application. It includes two profiles:
CSS Selector Profiler records the aggregate time spent matching selectors to elements in the DOM tree.
6. Resources/Application Panel : This panel inspects all the resources that are loaded in the current page. Like : Web SQL databases, Local Storage, Cookies, AppCache, images, font etc.
7. Audit panel : Audit panel is use for checking the common accessibility problems and it generates an API for running these rules in an HTML page. It also provides suggestions and optimization for decreasing page load time.
Useful extensions in chrome :
Awesome screenshot : This extension is very useful. It not only takes screenshot but also allow us to highlight the area and write our comments on image. We can select local image from our machine as well to edit in this plugin. It lets us record out screen interaction as a video as well.
ColorZilla : ColorZilla is very useful extension. We can get color code for any color on the loaded page or from its own color picker. It also allow us to generate the gradient color and use that gradient in our css code.
Window Resize tool : Chrome provides lots of window resize extensions. If we want to test our website for different screen size then we can use this extension.