Here is what I know and regularly use when it comes to browser developer tools
- Option + Shift + I (Mac), Ctr + Shift + I (Win) - to open developer tools.
- I prefer to see browser developer tools docked at the bottom of the page (customizable)
- Cmd + Shift + M (or click on the icon with mobile device) - toggle device toolbar. I often use this feature when I want to see how a page will look on mobile devices.
- Elements / Sources tab - shows DOM tree of elements. You can also access it by right-clicking on the web page > Inspect. This tool can be helpful when you need selector / XPath of the element.
- Console tab - (1) shows logged messages and errors. Oftentimes, error messages can tell you that there is something not working although, you do not see any issues on the frontend. Also, I often attach screenshots with error messages to my bug reports. This can immediately tell what the problem is related to; (2) allows running JavaScript. Running JavaScript from console can be a useful testing tool. I shared my example in Day 24
- Network tab - shows network activity.
- I use it to view the response codes, methods, paths, timing.
- If you click on the request in “Name” column you can see request url, method, status code, response and request headers.
- Payload, response are very helpful for API testing, because you can view what data is sent and received, copy/paste it in another tools like Postman.
- You can filter your requests using the filter.
- Throttling dropdown can be used to simulate slow network and see how application behaves in this case.
New things I learned:
- you can auto-open DevTools on every new tab
- Sources tab - I do not use it often but I know it can be used to create JS snippets, view files, set breakpoints to pause the code, step through the code
- Long-press on “Reload” opens menu with 3 options: normal, hard reload and empty cache with hard reload
- Clear storage and site data for a single page in Google Chrome: Developer Tools > Application > Storage > Clear site: local and session storage, indexedDB, web SQL, cookies. cache storage
- Network tab allows searching network headers and responses (click “search” icon in the top left corner)