Browser Inspector

SNSee Detailed Info at : https://developer.chrome.com/docs/devtools        
1Web BrowsersChrome          
1.2Browser InspectorF12
Web Element Selector
Toggle Device Toolbar >DiemensionsZoom in %Throtlling (CPU & Network throtlling): Limit Bandwidth at which user device receives data i.e. towards lower end like a user on a slow mobile connection or a device with limited processing power.Rotate
Elements >DOM (Current Document Object Model) & HTML Structure which show all tagsCommd+F – to open search bar for HTML
Right Pane Sub Menus >Styles > CSS:hov > (hover) [Toggle Element State]If you switch focus from the page to DevTools, some overlay elements automatically hide if they are triggered by focus. For example, drop-down lists, menus, or date pickers. The check_box Emulate a focused page option lets you debug such an element as if it is in focus.:hover – do as Like Mouse hover
.cls >To add new CSS Class
Plus IconTo add new Style Rule
Brush Like (Light / Dark Teme) [Toggle Common Rendering Emulation]Change UI Theme
Extreme Right Little Arrow Icon Show Computed Style Side BarAdditionaly Show Computed CSS Style Side Barin current view
Computed >Show Graphical View of Diemensions for selected webelement & its applied CSS attributes
Layout >Shows Grid lines & Flex box lines if present in UI and shows their attributes in number & pixels
Console >displays JavaScript errors, warnings, and other debugging information, which is crucial for identifying issues in the application’s code.
Network >This tab tracks HTTP requests and responses, enabling testers to monitor network activity and identify slow or failing requests.
Sub Menus/Tabs/Functions >Record Activity IconClear Network Tab IconFilter Icon for typing boxPreserve log – keeps the earlier network requests on page loadEmulate a first-time visitor by disabling the browser cacheThrotlling ConditionsSettings Icon >Hide Overview > Hide Graphical panel above showing time vs call status
Long Press Website reload button of browser to see more optionOverview, Capture Screenshots during page load –  under gear iocn etc
API Calls >Name / Status / Resource TypeInitiator – What cause resource to be requested from ServerSize of Resource (Uncompressed & compressed Size) [Toggle thru settings gear > Big request rows] / Time taken to upload or download the resourceR.click on the names column to add or hide other columnsR.click on any Call and Clear Browser cache & cookies and more options
Filter Type or select – (Fetch/XHR) [Means Http API Calls only] >HeadersPayloadPreviewResponse – show source codeTimingCookies
Bottom status bar >Requests / Data Transferred
Waterfall > Sorting >Start Time. The first request that was initiated is at the top.Response Time. The first request that started downloading is at the top.End Time. The first request that finished is at the top.Total Duration. The request with the shortest connection setup and request / response is at the top.Latency. The request that waited the shortest time for a response is at the top.the Waterfall is sorted by total duration. The lighter portion of each bar is time spent waiting. The darker portion is time spent downloading bytes.
Application >Local StorageSession StortageCookiesShared StorageCache StorageFrames
Light House >
Setting IconBrowser Inspector Settings Menu
3 dots Menu > Inspector Position & Customize tools
Close IconClose the Inspector