## Instructions - Use separate profiles or containers: Work, Personal, Shopping, Dev — isolates cookies and logins. - Pair a password manager (1Password/Bitwarden) + 2FA app; never save passwords in browser plaintext. - Audit extensions quarterly: keep under 10, remove shopping/coupon injectors, check permissions for Read all data. - Master tab systems: tab groups, pinned tabs, OneTab/Session Buddy for research, auto-discard for RAM. - Learn DevTools Network tab: throttle to Fast 3G, check waterfall, block 3rd-party trackers inflating load. - Use Performance + Lighthouse tabs to find LCP/CLS issues: record 10s, fix images, fonts, layout shifts. - Harden privacy: uBlock Origin, HTTPS-Only, third-party cookie block, clear site data on close for shopping. - Sync smartly: enable bookmark/password sync only on trusted devices, use passphrase, revoke old devices. - Use keyboard first: Ctrl+T/L/W, Ctrl+Shift+T reopen, Ctrl+Tab MRU, / search, Vimium for mouseless flow. - Separate search engines per profile: work uses Kagi/Google, personal uses DuckDuckGo/Brave Search. - Back up bookmarks + sessions monthly: export HTML, save to cloud, version in Git for dev resources. - Test sites in clean Guest profile to catch extension or cache false positives before reporting bugs. ## Examples - Example 1: Research project: new window + tab group Thesis, 20 tabs, OneTab snapshot daily, export final. - Example 2: Slow site debug: Network > Disable cache, Fast 3G, find 4MB hero image, convert to WebP 200KB. - Example 3: Extension audit: remove 6 coupon extensions, keep uBlock, Bitwarden, Dark Reader, check CPU drop. - Example 4: Work/personal split: Firefox Containers — Banking always in Banking container, Work SSO in Work. ## Workflows - Workflow A — New browser setup: 1. Create profiles 2. Install manager + uBlock 3. Import bookmarks 4. Set search 5. Enable sync. - Workflow B — Perf triage: 1. Lighthouse run 2. Network waterfall 3. Coverage unused JS 4. Fix images/fonts 5. Re-test incognito. - Workflow C — Tab cleanup: 1. Group by task 2. Bookmark all 3. OneTab archive 4. Close to under 10 5. Pin only 3 dailies. - Workflow D — Extension audit: 1. List all 2. Check last update + permissions 3. Remove unused 4. Replace with site settings 5. Restart test. ## Templates - DevTools checklist: ``` [ ] Network: Disable cache ON, Throttle Fast 3G, check Status 4xx/5xx [ ] Waterfall: Largest file <500KB, TTFB <600ms, 3rd-party <30% time [ ] Performance: LCP <2.5s, CLS <0.1, Long tasks highlighted [ ] Application: Cookies 3rd-party flagged, LocalStorage keys sane [ ] Console: Zero red errors, warnings triaged, source maps ON [ ] Lighthouse: Perf >90, A11y 100, Best Practices 100 ``` - Profile map: Work (SSO, Slack, GitHub) | Personal (Bank, Mail) | Shopping (no login saved) | Dev (clean, no extensions). - Extension allowlist: uBlock Origin, Bitwarden, Dark Reader, SponsorBlock, React DevTools (dev profile only). - Session backup: Bookmarks Export bookmarks_2026-10-13.html + Session Buddy JSON to Drive/Backups. ## Tools - Firefox Multi-Account Containers / Chrome Profiles — true cookie isolation without second browser. - uBlock Origin + Privacy Badger — block ads/trackers, measure requests blocked per site. - Bitwarden / 1Password — passkeys, TOTP built-in, emergency access for family. - OneTab / Session Buddy — suspend 100-tab research into restorable lists. - Lighthouse + Web Vitals extension — field LCP/INP overlay while browsing real pages. - Vimium / Tridactyl — keyboard navigation, link hints with F, custom search shortcuts. ## Advanced - Use DevTools Overrides + Workspaces to live-edit CSS/JS and save back to disk for quick fixes. - Profile Chrome with --user-data-dir flags for disposable testing, Selenium, client demos. - Block resource types in Network (Img/Media/Font) to isolate what breaks layout vs speed. - Set enterprise policies (managed bookmarks, force safe search) for kids/family laptops. - Automate checks with Puppeteer + Lighthouse CI to gate deploys on perf budgets. - Compare Chromium vs Firefox vs Safari rendering for flex/grid bugs using BrowserStack snapshots. - Enforce HTTPS-Only + DoH (Cloudflare/Quad9) so ISP and cafe WiFi cannot snoop DNS lookups. - Pin frequently used PWAs (Gmail, Notion) as windowed apps for dock/taskbar launch without tab clutter. - Set download rules: ask where, auto-open PDFs in browser, virus-scan province for work docs. ## Documentation - Chrome DevTools docs — Network, Performance, Coverage panels official walkthroughs. - Firefox Containers guide — color-coded isolation and banking setup patterns. - Web.dev Vitals — LCP/CLS/INP thresholds and fix recipes with images/fonts. - Extension safety — Chrome Web Store + Mozilla permission model and review checklist. - Bitwarden / 1Password help — passkeys migration, emergency kit printout guide.