New Tech Thursday Topics #8
Reference in New Issue
Block a user
Delete Branch "%!s()"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
UI:
Team:
Week 1 — Browser DevTools Fundamentals (UI + Basics)
Build strong foundations. No coding knowledge required.
A. What Are Browser Developer Tools?
B. Opening DevTools
C. Understanding the DOM
D. Elements Panel Basics
Ctrl + F)E. Editing HTML Live
F. Beginner Exercises
Week 2 — CSS, Styles & Layout Debugging
Learn how browsers render UI and layouts.
A. CSS Basics in DevTools
B. Styles Panel
C. Computed Styles
D. Layout & Box Model Tools
E. Colors, Fonts & Animations
F. Beginner Exercises
Week 3 — JavaScript Debugging (Console + Sources)
Understand how JavaScript runs inside the browser.
A. Console Panel
log,warn,error)$0inspected element referenceB. Advanced Console Usage
C. JavaScript Errors
D. Sources Panel Basics
E. Debugging with Breakpoints
F. Beginner Exercises
Week 4 — Network, APIs & Storage
Critical for backend, API, and performance debugging.
A. Network Panel Fundamentals
B. API & Fetch/XHR Debugging
C. Caching & Performance
D. Application / Storage Panel
E. Security & Cookies
F. Exercises
Week 5 — Performance, Memory & Advanced Tools
Move from developer → expert debugger.
A. Performance Panel
B. Memory Panel
C. Lighthouse & Audits
D. Advanced DevTools Features
E. Security & Advanced Debugging
F. Final Exercises
Please review the above topics and also explore browser dev tools and other DevTools–related topics that are useful for the team. Everyone should submit the topics relevant to your domain and that you’re interested in learning.
@jebin.jebamony
Mobile Development Team will cover these topics
@jebin.jebamony
Testing Team will cover these topics
1. Network Tab (MOST IMPORTANT for Backend)
What it’s used for
Key Features
Request/Response inspection
Headers
Payload
Timing
Preview vs Response
Filter
Replay requests
Backend Use Cases
✅ Debug API failures
✅ Verify request payloads
✅ Debug authentication issues
✅ Measure API response time
2. Console (Backend Debugging Companion)
Key Features
View backend error responses
Inspect console logs from API calls
Run JS to:
Examples
Backend Use Cases
✅ Debug unexpected responses
✅ Inspect API error messages
✅ Test API calls quickly
3. Application Tab (Auth & Storage Debugging)
What it’s used for
Key Features
Cookies
LocalStorage / SessionStorage
IndexedDB
Cache Storage
Backend Use Cases
✅ Debug login/session problems
✅ Verify cookie flags (important for security)
✅ Debug token expiration
4. Security Tab
What it’s used for
Key Features
Backend Use Cases
✅ Verify HTTPS setup
✅ Debug SSL certificate issues
5. ⚡ Performance Tab (API Performance Analysis)
What it’s used for
Key Features
Backend Use Cases
✅ Identify slow APIs
✅ Detect backend bottlenecks
6. 🧪 Lighthouse (Backend-Relevant Metrics)
Even though it’s frontend-focused, backend impacts:
Backend-Related Checks
Backend Use Cases
✅ Validate caching strategies
✅ Improve API response time
7. 🧩 Sources Tab (Advanced Debugging)
Backend-Relevant Uses
Powerful Feature
Overrides
Backend Use Cases
✅ Simulate backend failures
✅ Test frontend behavior for edge cases
8. 🧠 Network Conditions
Key Features
Backend Use Cases
✅ Test API behavior in slow networks
✅ Validate retry & timeout logic
9. 🧪 HAR Export & Import
What it’s used for
Backend Use Cases
✅ Share API logs with team
✅ Reproduce production bugs
10. 🛠️ DevTools Tips for Backend Developers
Must-Know Shortcuts
Pro Tips
✔ Always enable Preserve log
✔ Filter by Fetch/XHR
✔ Inspect TTFB for backend slowness
✔ Validate CORS headers carefully
🧩 How Backend Developers Commonly Use DevTools