Developer tools
9 questions
How to open the developer console?
•F12 or Ctrl+Shift+I (Cmd+Option+I on Mac).
•Right-click → Inspect.
•Console tab for logs and commands.
•Ctrl+Shift+J — directly to console (Chrome).
•Page errors are displayed here.
How to emulate a mobile device?
•Open DevTools (F12).
•Press Ctrl+Shift+M or click the device icon.
•Select a device from the list.
•Or set size manually.
•Emulates touch events and User-Agent.
How to find CSS styles of an element?
•Open DevTools.
•Ctrl+Shift+C — element selection mode.
•Click on the element on the page.
•The Styles tab shows applied styles.
•Computed — computed values.
How to clear cache for a single site?
•DevTools → Application tab (Chrome) or Storage (Firefox).
•Clear storage / Clear site data.
•Or right-click on the refresh button → 'Clear cache and hard reload'.
•Works with DevTools open.
How to simulate a slow connection?
•DevTools → Network tab.
•Dropdown 'No throttling'.
•Choose: Slow 3G, Fast 3G, Offline.
•Or create your own profile.
•Test loading under poor internet conditions.
Developer tools: how to read requests/responses in Network and find errors?
Start with simple: update your browser, clear cache/cookies for the problematic site, and disable extensions one by one.
Developer tools: how to profile performance (Performance/Lighthouse)?
Practice for 'Developer tools': test in incognito mode and in another browser. It's quick to identify whether the problem is in the site or in profiles/extensions.
Developer tools: how to debug JavaScript and set breakpoints?
Answer for 'Developer tools': enable synchronization, but keep 2FA and backup codes. Security is more important than convenience.
Developer tools: how to work with Application/Storage (cookies, localStorage)?
For 'Developer tools': it's useful to set up a password manager and tracker blocker, but avoid installing dozens of extensions at once.