# 30 Days of API Testing - Day 29: Browser developer tools have lots of API testing features, explore them and share your findings **URL:** \ **Category:** 30 Days of Testing\ **Tags:** 30-days-of-testing, api-testing\ **Created:** [22 November 2018 08:17 UTC](https://club.ministryoftesting.com/t/30-days-of-api-testing-day-29-browser-developer-tools-have-lots-of-api-testing-features-explore-them-and-share-your-findings/20370 "2018-11-22T08:17:52Z")\ **Posts on this page:** 1\ **Showing post:** 11
**Author:** ![m.zn](https://sea2.discourse-cdn.com/flex020/user_avatar/club.ministryoftesting.com/m.zn/32/8715_2.png) [@m.zn](https://club.ministryoftesting.com/u/m.zn)\ **Post date:** [18 April 2022 04:49 UTC](https://club.ministryoftesting.com/t/30-days-of-api-testing-day-29-browser-developer-tools-have-lots-of-api-testing-features-explore-them-and-share-your-findings/20370/11 "2022-04-18T04:49:22Z")
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](https://club.ministryoftesting.com/t/30-days-of-api-testing-day-24-share-the-best-api-bug-you-ve-found/20365/15) - 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. ![Ministry of Testing - switch to mobile MoT 2022-04-18 13-38](https://us1.discourse-cdn.com/flex020/uploads/ministryoftesting/original/2X/9/96b905e6603557ecebbccb0abdc449bf7799a74a.jpeg) ![Ministry of Testing console errors MoT 2022-04-18 13-41](https://us1.discourse-cdn.com/flex020/uploads/ministryoftesting/original/2X/1/19c1cc4d107d3460893120a56d903dd8021ff898.jpeg) ![Screen Shot 2022-04-18 at 2.47.29 pm](https://us1.discourse-cdn.com/flex020/uploads/ministryoftesting/original/2X/7/7426c9c5d97be2c038d2b39d9ae3181ce0aaa0c5.jpeg) New things I learned: - you can [auto-open DevTools on every new tab](https://developer.chrome.com/docs/devtools/open/#auto) - 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](https://developer.chrome.com/docs/devtools/javascript/#event-breakpoint), 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) --- _[View the full topic](https://club.ministryoftesting.com/t/30-days-of-api-testing-day-29-browser-developer-tools-have-lots-of-api-testing-features-explore-them-and-share-your-findings/20370)._