New Tech Thursday Topics #8

Open
opened 2026-01-08 12:14:49 +00:00 by jebin.jebamony · 6 comments
Member

UI:

  • Browser Developer Tools
UI: - Browser Developer Tools
ajin.vijayakumar was assigned by jebin.jebamony 2026-01-08 12:14:49 +00:00
ajishini.chandrasekar was assigned by jebin.jebamony 2026-01-08 12:14:49 +00:00
anikuttan.test.admin.account was assigned by jebin.jebamony 2026-01-08 12:14:49 +00:00
anikuttan.vijayakumar was assigned by jebin.jebamony 2026-01-08 12:14:49 +00:00
aravinth.nagarajan was assigned by jebin.jebamony 2026-01-08 12:14:49 +00:00
Arjun.Gopi was assigned by jebin.jebamony 2026-01-08 12:14:49 +00:00
asaph.johnwesley was assigned by jebin.jebamony 2026-01-08 12:14:49 +00:00
ashish.livingston was assigned by jebin.jebamony 2026-01-08 12:14:49 +00:00
dhanush.kannan was assigned by jebin.jebamony 2026-01-08 12:14:49 +00:00
gokul.subramonian was assigned by jebin.jebamony 2026-01-08 12:14:49 +00:00
januson.john was assigned by jebin.jebamony 2026-01-08 12:14:49 +00:00
jaya.lekshmi was assigned by jebin.jebamony 2026-01-08 12:14:49 +00:00
jemima.emmanuel was assigned by jebin.jebamony 2026-01-08 12:14:49 +00:00
jerisha.yesuthangaraja was assigned by jebin.jebamony 2026-01-08 12:14:49 +00:00
leyo.whiteson.rabertsingh was assigned by jebin.jebamony 2026-01-08 12:14:49 +00:00
muralikrishnan.rajamuni was assigned by jebin.jebamony 2026-01-08 12:14:49 +00:00
nikhil.samuel was assigned by jebin.jebamony 2026-01-08 12:14:49 +00:00
rahul.bruce was assigned by jebin.jebamony 2026-01-08 12:14:49 +00:00
renejit.vedamoni was assigned by jebin.jebamony 2026-01-08 12:14:49 +00:00
rishika.kaliappapillai was assigned by jebin.jebamony 2026-01-08 12:14:49 +00:00
solomon.antony was assigned by jebin.jebamony 2026-01-08 12:14:49 +00:00
vipinraj.vijayakamaladas was assigned by jebin.jebamony 2026-01-08 12:14:49 +00:00
mehanth.rajendran was assigned by anikuttan.test.admin.account 2026-01-08 12:39:19 +00:00
Author
Member

Team:

  • UI Development
  • Backend Development
  • Mobile Development
  • Testing
  • UX
Team: - UI Development - Backend Development - Mobile Development - Testing - UX
Author
Member

Week 1 — Browser DevTools Fundamentals (UI + Basics)

Build strong foundations. No coding knowledge required.


A. What Are Browser Developer Tools?

  1. What are Developer Tools?
  2. Why developers use DevTools
  3. DevTools vs browser settings
  4. Supported browsers (Chrome, Edge, Firefox)
  5. DevTools in production vs local environments
  6. DevTools security limitations (same-origin policy)

B. Opening DevTools

  1. Open via right-click → Inspect
  2. Keyboard shortcuts (Windows / Mac)
  3. Open DevTools in new window
  4. Docking positions (bottom, right, undocked)
  5. DevTools panel overview

C. Understanding the DOM

  1. What is the DOM?
  2. HTML → DOM tree
  3. Parent, child, sibling nodes
  4. Live DOM vs source HTML
  5. Dynamic DOM changes

D. Elements Panel Basics

  1. Elements panel overview
  2. Inspecting elements
  3. Hover highlight behavior
  4. Expand / collapse DOM nodes
  5. Search elements (Ctrl + F)
  6. Copy HTML / XPath / Selector

E. Editing HTML Live

  1. Edit text nodes
  2. Add / delete elements
  3. Edit attributes
  4. Drag & reorder elements
  5. Revert changes

F. Beginner Exercises

  1. Inspect a webpage layout
  2. Modify text and images
  3. Change link destinations
  4. Explore DOM tree navigation

Week 2 — CSS, Styles & Layout Debugging

Learn how browsers render UI and layouts.


A. CSS Basics in DevTools

  1. What is CSSOM?
  2. Inline vs internal vs external CSS
  3. Cascade & specificity
  4. Inherited vs non-inherited styles

B. Styles Panel

  1. Styles tab overview
  2. Applied vs overridden styles
  3. Enable / disable CSS rules
  4. Edit CSS values live
  5. Add new CSS rules

C. Computed Styles

  1. Computed tab explanation
  2. Final calculated values
  3. Box model visualization
  4. Margin, border, padding
  5. Content size calculations

D. Layout & Box Model Tools

  1. Box model inspector
  2. Flexbox inspector
  3. Grid inspector
  4. Alignment debugging
  5. Responsive layout issues

E. Colors, Fonts & Animations

  1. Color picker & contrast
  2. Font inspector
  3. Line height & spacing
  4. CSS transitions preview
  5. Animation debugging

F. Beginner Exercises

  1. Fix broken layouts
  2. Debug overlapping elements
  3. Center elements correctly
  4. Modify responsive UI

Week 3 — JavaScript Debugging (Console + Sources)

Understand how JavaScript runs inside the browser.


A. Console Panel

  1. Console overview
  2. Log types (log, warn, error)
  3. Evaluating JavaScript
  4. DOM access via console
  5. $0 inspected element reference

B. Advanced Console Usage

  1. Console filtering
  2. Preserve logs
  3. Console grouping
  4. Console tables
  5. Clear & save logs

C. JavaScript Errors

  1. Syntax errors
  2. Runtime errors
  3. Reference errors
  4. Stack traces
  5. Error sources

D. Sources Panel Basics

  1. Sources overview
  2. File structure understanding
  3. Pretty-print minified files
  4. Navigate source files

E. Debugging with Breakpoints

  1. Line breakpoints
  2. Conditional breakpoints
  3. Step over / into / out
  4. Watch variables
  5. Call stack inspection

F. Beginner Exercises

  1. Debug a broken script
  2. Track variable changes
  3. Fix console errors
  4. Pause execution flow

Week 4 — Network, APIs & Storage

Critical for backend, API, and performance debugging.


A. Network Panel Fundamentals

  1. Network tab overview
  2. Request lifecycle
  3. Status codes (200, 404, 500)
  4. Request methods (GET, POST, PUT)
  5. Headers vs body

B. API & Fetch/XHR Debugging

  1. XHR vs Fetch
  2. Inspect request payloads
  3. Inspect response data
  4. Timing breakdown
  5. Retry & replay requests

C. Caching & Performance

  1. Browser cache
  2. Disable cache
  3. Hard reload vs normal reload
  4. Compression (gzip, br)
  5. CDN basics

D. Application / Storage Panel

  1. Cookies
  2. LocalStorage
  3. SessionStorage
  4. IndexedDB (intro)
  5. Clear site data

E. Security & Cookies

  1. HttpOnly cookies
  2. Secure flag
  3. SameSite policies
  4. CORS basics

F. Exercises

  1. Debug API failures
  2. Modify request headers
  3. Clear corrupted storage
  4. Inspect auth tokens

Week 5 — Performance, Memory & Advanced Tools

Move from developer → expert debugger.


A. Performance Panel

  1. Performance overview
  2. Record performance trace
  3. FPS & rendering
  4. Main thread analysis
  5. JS execution time

B. Memory Panel

  1. Memory overview
  2. Heap snapshots
  3. Memory leaks
  4. Garbage collection
  5. Retained objects

C. Lighthouse & Audits

  1. Lighthouse overview
  2. Performance audits
  3. Accessibility audits
  4. SEO audits
  5. Best practices

D. Advanced DevTools Features

  1. Device emulation
  2. Network throttling
  3. CPU throttling
  4. Sensors & geolocation
  5. Coverage (unused JS/CSS)

E. Security & Advanced Debugging

  1. Content Security Policy (CSP)
  2. Mixed content issues
  3. Source maps
  4. Debugging production issues
  5. DevTools experiments

F. Final Exercises

  1. Full website audit
  2. Performance optimization
  3. Fix memory leaks
  4. Debug production-like issues

# **Week 1 — Browser DevTools Fundamentals (UI + Basics)** *Build strong foundations. No coding knowledge required.* --- ### **A. What Are Browser Developer Tools?** 1. What are Developer Tools? 2. Why developers use DevTools 3. DevTools vs browser settings 4. Supported browsers (Chrome, Edge, Firefox) 5. DevTools in production vs local environments 6. DevTools security limitations (same-origin policy) --- ### **B. Opening DevTools** 7. Open via right-click → Inspect 8. Keyboard shortcuts (Windows / Mac) 9. Open DevTools in new window 10. Docking positions (bottom, right, undocked) 11. DevTools panel overview --- ### **C. Understanding the DOM** 12. What is the DOM? 13. HTML → DOM tree 14. Parent, child, sibling nodes 15. Live DOM vs source HTML 16. Dynamic DOM changes --- ### **D. Elements Panel Basics** 17. Elements panel overview 18. Inspecting elements 19. Hover highlight behavior 20. Expand / collapse DOM nodes 21. Search elements (`Ctrl + F`) 22. Copy HTML / XPath / Selector --- ### **E. Editing HTML Live** 23. Edit text nodes 24. Add / delete elements 25. Edit attributes 26. Drag & reorder elements 27. Revert changes --- ### **F. Beginner Exercises** 28. Inspect a webpage layout 29. Modify text and images 30. Change link destinations 31. Explore DOM tree navigation --- # **Week 2 — CSS, Styles & Layout Debugging** *Learn how browsers render UI and layouts.* --- ### **A. CSS Basics in DevTools** 32. What is CSSOM? 33. Inline vs internal vs external CSS 34. Cascade & specificity 35. Inherited vs non-inherited styles --- ### **B. Styles Panel** 36. Styles tab overview 37. Applied vs overridden styles 38. Enable / disable CSS rules 39. Edit CSS values live 40. Add new CSS rules --- ### **C. Computed Styles** 41. Computed tab explanation 42. Final calculated values 43. Box model visualization 44. Margin, border, padding 45. Content size calculations --- ### **D. Layout & Box Model Tools** 46. Box model inspector 47. Flexbox inspector 48. Grid inspector 49. Alignment debugging 50. Responsive layout issues --- ### **E. Colors, Fonts & Animations** 51. Color picker & contrast 52. Font inspector 53. Line height & spacing 54. CSS transitions preview 55. Animation debugging --- ### **F. Beginner Exercises** 56. Fix broken layouts 57. Debug overlapping elements 58. Center elements correctly 59. Modify responsive UI --- # **Week 3 — JavaScript Debugging (Console + Sources)** *Understand how JavaScript runs inside the browser.* --- ### **A. Console Panel** 60. Console overview 61. Log types (`log`, `warn`, `error`) 62. Evaluating JavaScript 63. DOM access via console 64. `$0` inspected element reference --- ### **B. Advanced Console Usage** 65. Console filtering 66. Preserve logs 67. Console grouping 68. Console tables 69. Clear & save logs --- ### **C. JavaScript Errors** 70. Syntax errors 71. Runtime errors 72. Reference errors 73. Stack traces 74. Error sources --- ### **D. Sources Panel Basics** 75. Sources overview 76. File structure understanding 77. Pretty-print minified files 78. Navigate source files --- ### **E. Debugging with Breakpoints** 79. Line breakpoints 80. Conditional breakpoints 81. Step over / into / out 82. Watch variables 83. Call stack inspection --- ### **F. Beginner Exercises** 84. Debug a broken script 85. Track variable changes 86. Fix console errors 87. Pause execution flow --- # **Week 4 — Network, APIs & Storage** *Critical for backend, API, and performance debugging.* --- ### **A. Network Panel Fundamentals** 88. Network tab overview 89. Request lifecycle 90. Status codes (200, 404, 500) 91. Request methods (GET, POST, PUT) 92. Headers vs body --- ### **B. API & Fetch/XHR Debugging** 93. XHR vs Fetch 94. Inspect request payloads 95. Inspect response data 96. Timing breakdown 97. Retry & replay requests --- ### **C. Caching & Performance** 98. Browser cache 99. Disable cache 100. Hard reload vs normal reload 101. Compression (gzip, br) 102. CDN basics --- ### **D. Application / Storage Panel** 103. Cookies 104. LocalStorage 105. SessionStorage 106. IndexedDB (intro) 107. Clear site data --- ### **E. Security & Cookies** 108. HttpOnly cookies 109. Secure flag 110. SameSite policies 111. CORS basics --- ### **F. Exercises** 112. Debug API failures 113. Modify request headers 114. Clear corrupted storage 115. Inspect auth tokens --- # **Week 5 — Performance, Memory & Advanced Tools** *Move from developer → expert debugger.* --- ### **A. Performance Panel** 116. Performance overview 117. Record performance trace 118. FPS & rendering 119. Main thread analysis 120. JS execution time --- ### **B. Memory Panel** 121. Memory overview 122. Heap snapshots 123. Memory leaks 124. Garbage collection 125. Retained objects --- ### **C. Lighthouse & Audits** 126. Lighthouse overview 127. Performance audits 128. Accessibility audits 129. SEO audits 130. Best practices --- ### **D. Advanced DevTools Features** 131. Device emulation 132. Network throttling 133. CPU throttling 134. Sensors & geolocation 135. Coverage (unused JS/CSS) --- ### **E. Security & Advanced Debugging** 136. Content Security Policy (CSP) 137. Mixed content issues 138. Source maps 139. Debugging production issues 140. DevTools experiments --- ### **F. Final Exercises** 141. Full website audit 142. Performance optimization 143. Fix memory leaks 144. Debug production-like issues ---
Author
Member

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.

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

  1. What Are Browser Developer Tools?
  2. Opening DevTools
  3. Network Panel Fundamentals
  4. API & Fetch/XHR Debugging
  5. Caching
  6. Application / Storage Panel
@jebin.jebamony Mobile Development Team will cover these topics 1. What Are Browser Developer Tools? 2. Opening DevTools 3. Network Panel Fundamentals 4. API & Fetch/XHR Debugging 5. Caching 6. Application / Storage Panel

@jebin.jebamony
Testing Team will cover these topics

  1. What Are Browser Developer Tools?
  2. Opening DevTools
  3. Console Panel
  4. Sources Panel Basics
  5. Network Panel Fundamentals
  6. API & Fetch/XHR Debugging
  7. Caching
  8. Application / Storage Panel
  9. Performance Panel
  10. Lighthouse
@jebin.jebamony Testing Team will cover these topics 1. What Are Browser Developer Tools? 2. Opening DevTools 3. Console Panel 4. Sources Panel Basics 5. Network Panel Fundamentals 6. API & Fetch/XHR Debugging 7. Caching 8. Application / Storage Panel 9. Performance Panel 10. Lighthouse
Member

1. Network Tab (MOST IMPORTANT for Backend)

What it’s used for

  • Debugging API requests & responses
  • Verifying headers, payloads, auth tokens
  • Measuring backend latency

Key Features

  • Request/Response inspection

    • URL, method (GET/POST/etc)
    • Status codes (200, 401, 500)
    • Response body (JSON, text)
  • Headers

    • Authorization headers (JWT, Bearer tokens)
    • Cookies, CORS headers
  • Payload

    • Request body (form-data / JSON)
  • Timing

    • DNS lookup
    • TTFB (Time To First Byte)
    • Backend processing time
  • Preview vs Response

    • Parsed JSON vs raw response
  • Filter

    • XHR / Fetch → see only API calls
  • Replay requests

    • Right click → Replay XHR

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:

    • Call APIs manually
    • Test payloads

Examples

fetch("/api/users")
  .then(res => res.json())
  .then(console.log)

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

  • Inspect cookies, tokens, storage
  • Debug authentication & session issues

Key Features

  • Cookies

    • HttpOnly, Secure, SameSite flags
  • LocalStorage / SessionStorage

    • JWT tokens
  • IndexedDB

  • Cache Storage

    • Service worker cached API responses

Backend Use Cases

Debug login/session problems
Verify cookie flags (important for security)
Debug token expiration


4. Security Tab

What it’s used for

  • TLS/HTTPS inspection
  • Certificate verification

Key Features

  • Certificate chain
  • Mixed content warnings
  • HTTPS configuration

Backend Use Cases

Verify HTTPS setup
Debug SSL certificate issues


5. Performance Tab (API Performance Analysis)

What it’s used for

  • Measure API impact on page load
  • Identify slow backend calls

Key Features

  • Timeline of API requests
  • TTFB & blocking time
  • Waterfall analysis

Backend Use Cases

Identify slow APIs
Detect backend bottlenecks


6. 🧪 Lighthouse (Backend-Relevant Metrics)

Even though it’s frontend-focused, backend impacts:

  • Server response time
  • Time to first byte
  • Caching headers
  • Compression (gzip, brotli)

Backend Use Cases

Validate caching strategies
Improve API response time


7. 🧩 Sources Tab (Advanced Debugging)

Backend-Relevant Uses

  • Inspect minified API clients
  • Debug frontend code calling your backend
  • Override responses using Local Overrides

Powerful Feature

  • Overrides

    • Mock backend responses without touching backend code

Backend Use Cases

Simulate backend failures
Test frontend behavior for edge cases


8. 🧠 Network Conditions

Key Features

  • Throttling (Slow 3G, Offline)
  • Disable cache
  • User-Agent override

Backend Use Cases

Test API behavior in slow networks
Validate retry & timeout logic


9. 🧪 HAR Export & Import

What it’s used for

  • Export complete API traffic

Backend Use Cases

Share API logs with team
Reproduce production bugs


10. 🛠️ DevTools Tips for Backend Developers

Must-Know Shortcuts

  • Ctrl + Shift + I → Open DevTools
  • Ctrl + R (Disable cache ON) → Hard reload
  • Network → Preserve log → Track redirects

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

Task DevTools Feature
Debug API Network
Auth issues Application → Cookies
Performance Network Timing
CORS errors Console + Network
JWT issues Headers + Storage
Slow API Performance + Network

## 1. Network Tab (MOST IMPORTANT for Backend) ### What it’s used for * Debugging **API requests & responses** * Verifying **headers, payloads, auth tokens** * Measuring **backend latency** ### Key Features * **Request/Response inspection** * URL, method (GET/POST/etc) * Status codes (200, 401, 500) * Response body (JSON, text) * **Headers** * Authorization headers (JWT, Bearer tokens) * Cookies, CORS headers * **Payload** * Request body (form-data / JSON) * **Timing** * DNS lookup * TTFB (Time To First Byte) * Backend processing time * **Preview vs Response** * Parsed JSON vs raw response * **Filter** * XHR / Fetch → see only API calls * **Replay requests** * Right click → *Replay XHR* ### 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: * Call APIs manually * Test payloads ### Examples ```js fetch("/api/users") .then(res => res.json()) .then(console.log) ``` ### 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 * Inspect **cookies, tokens, storage** * Debug **authentication & session issues** ### Key Features * **Cookies** * HttpOnly, Secure, SameSite flags * **LocalStorage / SessionStorage** * JWT tokens * **IndexedDB** * **Cache Storage** * Service worker cached API responses ### Backend Use Cases ✅ Debug login/session problems ✅ Verify cookie flags (important for security) ✅ Debug token expiration --- ## 4. Security Tab ### What it’s used for * TLS/HTTPS inspection * Certificate verification ### Key Features * Certificate chain * Mixed content warnings * HTTPS configuration ### Backend Use Cases ✅ Verify HTTPS setup ✅ Debug SSL certificate issues --- ## 5. ⚡ Performance Tab (API Performance Analysis) ### What it’s used for * Measure **API impact on page load** * Identify **slow backend calls** ### Key Features * Timeline of API requests * TTFB & blocking time * Waterfall analysis ### 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 * Server response time * Time to first byte * Caching headers * Compression (gzip, brotli) ### Backend Use Cases ✅ Validate caching strategies ✅ Improve API response time --- ## 7. 🧩 Sources Tab (Advanced Debugging) ### Backend-Relevant Uses * Inspect **minified API clients** * Debug frontend code calling your backend * Override responses using **Local Overrides** ### Powerful Feature * **Overrides** * Mock backend responses without touching backend code ### Backend Use Cases ✅ Simulate backend failures ✅ Test frontend behavior for edge cases --- ## 8. 🧠 Network Conditions ### Key Features * Throttling (Slow 3G, Offline) * Disable cache * User-Agent override ### Backend Use Cases ✅ Test API behavior in slow networks ✅ Validate retry & timeout logic --- ## 9. 🧪 HAR Export & Import ### What it’s used for * Export complete API traffic ### Backend Use Cases ✅ Share API logs with team ✅ Reproduce production bugs --- ## 10. 🛠️ DevTools Tips for Backend Developers ### Must-Know Shortcuts * **Ctrl + Shift + I** → Open DevTools * **Ctrl + R (Disable cache ON)** → Hard reload * **Network → Preserve log** → Track redirects ### 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 | Task | DevTools Feature | | ----------- | --------------------- | | Debug API | Network | | Auth issues | Application → Cookies | | Performance | Network Timing | | CORS errors | Console + Network | | JWT issues | Headers + Storage | | Slow API | Performance + Network | ---
Sign in to join this conversation.