Agar aap web development सीख रहे हैं, तो browser का DevTools (Developer Tools) सबसे useful tools में से एक है।

Website में कोई button काम नहीं कर रहा, CSS apply नहीं हो रही, JavaScript error आ रहा है, API fail हो रही है या page slow है — इन सब situations में DevTools बहुत useful होता है।

Simple words mein:

Browser DevTools browser के अंदर built-in developer tools हैं, जिनकी मदद से आप website को inspect, debug, test और analyze कर सकते हैं।

इस cheat sheet में हम DevTools के important panels को beginner से practical level तक समझेंगे।

Browser DevTools क्या है?#

DevTools = Developer Tools

Chrome, Edge, Firefox और दूसरे modern browsers में developer tools built-in होते हैं।

Chrome में इसे open करने के लिए:

Code

Right Click → Inspect

या:

Code

F12

या Chrome में:

Code

Ctrl + Shift + I

Mac पर:

Code

Cmd + Option + I

DevTools open होने के बाद आपको अलग-अलग panels दिखाई दे सकते हैं:

Code

Elements
Console
Sources
Network
Application
Performance
Memory
Security
Lighthouse

Browser और version के according panels या naming थोड़ी अलग हो सकती है।

DevTools क्यों जरूरी है?#

एक developer के लिए DevTools लगभग daily-use tool है।

इससे आप:

HTML inspect कर सकते हैं
CSS check और temporarily change कर सकते हैं
JavaScript errors देख सकते हैं
Console में JavaScript run कर सकते हैं
Network requests inspect कर सकते हैं
API responses check कर सकते हैं
Cookies और storage देख सकते हैं
JavaScript debugging कर सकते हैं
Page performance analyze कर सकते हैं
Responsive design test कर सकते हैं
Security information inspect कर सकते हैं

एक simple example:

Code

Button काम नहीं कर रहा
       ↓
DevTools Open
       ↓
Console Check
       ↓
Error मिला
       ↓
Network Check
       ↓
API Request Failed
       ↓
Problem Identify

DevTools कैसे Open करें?#

Method 1: Right Click

Website पर right click करें:

Code

Right Click
   ↓
Inspect

Method 2: Keyboard Shortcut

Windows/Linux:

Code

Ctrl + Shift + I

Mac:

Code

Cmd + Option + I

Method 3: F12

कुछ systems और browsers में:

Code

F12

से भी DevTools open किया जा सकता है।

Elements Panel#

Elements panel का use webpage के HTML और CSS को inspect करने के लिए किया जाता है।

Example:

Code

<button class="btn">
  Buy Now
</button>

Elements panel में आप इस HTML को देख सकते हैं।

HTML Inspect करना#

मान लीजिए page पर एक heading है:

Code

<h1>Welcome</h1>

आप Elements panel में उसे select करके देख सकते हैं।

आप check कर सकते हैं:

Code

Tag
Class
ID
Attributes
Nested Elements
Styles

HTML को Temporarily Edit करना#

DevTools में HTML को temporarily modify किया जा सकता है।

Example:

Code

<h1>Welcome</h1>

इसे temporarily:

Code

<h1>Hello World</h1>

कर सकते हैं।

लेकिन ध्यान रखें:

DevTools में किया गया सामान्य live edit आपकी actual source file को permanently modify नहीं करता।

Page reload करने पर changes generally वापस चले जाते हैं।

CSS Inspect करना#

Elements panel में element select करने पर उसके CSS rules दिखाई दे सकते हैं।

Example:

Code

.button {
  color: white;
  background: blue;
  padding: 10px;
}

आप check कर सकते हैं:

Code

Which CSS rule applied?
Which rule overridden?
Which property disabled?
Where CSS came from?

CSS Temporarily Change करना#

Suppose button का background सही नहीं है:

Code

background: red;

आप DevTools में temporarily:

Code

background: green;

करके तुरंत result देख सकते हैं।

यह design debugging के लिए बहुत useful है।

Styles और Computed#

Elements panel में आपको अक्सर Styles और Computed जैसे sections मिलेंगे।

Styles

यह दिखाता है कि कौन-कौन से CSS rules element पर apply हो रहे हैं।

Computed

यह browser द्वारा calculated final CSS values दिखाने में useful है।

Example:

Code

display: flex
width: 200px
height: 50px
margin: 10px
padding: 12px

अगर CSS conflict समझ नहीं आ रहा है, तो Computed section बहुत helpful हो सकता है।

Box Model#

CSS debugging में Box Model बहुत important है।

एक element को broadly ऐसे समझ सकते हैं:

Code

+-----------------------------+
|           Margin            |
|  +-----------------------+  |
|  |        Border         |  |
|  |  +-----------------+  |  |
|  |  |     Padding     |  |  |
|  |  |  +-----------+  |  |  |
|  |  |  |  Content  |  |  |  |
|  |  |  +-----------+  |  |  |
|  |  +-----------------+  |  |
|  +-----------------------+  |
+-----------------------------+

DevTools में box model देखकर आप quickly identify कर सकते हैं:

Code

Margin
Border
Padding
Width
Height

Responsive Design Check करना#

DevTools का Device Toolbar responsive testing के लिए बहुत useful है।

Shortcut:

Code

Ctrl + Shift + M

Mac पर Chrome में:

Code

Cmd + Shift + M

इससे page को mobile/tablet जैसी viewport sizes में test किया जा सकता है।

Responsive Mode में क्या Check करें?#

आप check कर सकते हैं:

Code

Mobile
Tablet
Desktop
Different viewport widths
Orientation

Example:

Code

Desktop
↓
Tablet
↓
Mobile

इससे पता चल सकता है कि layout किसी particular screen size पर टूट रहा है या नहीं।

Console Panel#

Console JavaScript debugging के लिए सबसे important DevTools panels में से एक है।

यहाँ आप:

Errors देख सकते हैं
Warnings देख सकते हैं
Logs देख सकते हैं
JavaScript commands run कर सकते हैं
Objects inspect कर सकते हैं

`console.log()`#

JavaScript में:

Code

console.log("Hello World");

Console में:

Code

Hello World

दिख सकता है।

Debugging के लिए commonly:

Code

console.log(user);

या:

Code

console.log("API Response:", response);

use किया जाता है।

`console.error()`#

Error message दिखाने के लिए:

Code

console.error("Something went wrong");

`console.warn()`#

Warning के लिए:

Code

console.warn("This value is deprecated");

Console में JavaScript Run करना#

आप Console में directly JavaScript execute कर सकते हैं।

Example:

Code

2 + 2

Output:

Code

Example:

Code

document.title

इससे current page का title inspect किया जा सकता है।

DOM Inspect करना#

Console में:

Code

document.body

से body element access कर सकते हैं।

Specific element:

Code

document.querySelector("button")

Class:

Code

document.querySelector(".button")

ID:

Code

document.querySelector("#login")

Multiple Elements#

Code

document.querySelectorAll("button")

यह matching buttons का collection return कर सकता है।

Console Error कैसे पढ़ें?#

मान लीजिए आपको:

Code

Uncaught ReferenceError: userData is not defined

दिखता है।

इसमें important information है:

Code

ReferenceError
userData is not defined

और अक्सर console error के साथ source file और line number भी दिखती है।

Example:

Code

app.js:42

इसका मतलब relevant code app.js में line 42 के आसपास हो सकता है।

Sources Panel

Sources panel JavaScript files और debugging के लिए important है।

यहाँ आप application के loaded source files देख सकते हैं।

Example:

Code

src/
├── app.js
├── utils.js
└── api.js

JavaScript Debugging#

Sources panel में आप:

Code

Breakpoints
Step Over
Step Into
Step Out
Continue
Call Stack
Scope

जैसी debugging सुविधाएँ use कर सकते हैं।

Breakpoint क्या है?#

Breakpoint का मतलब है:

Code execution को किसी specific line पर temporarily pause करना।

Example:

Code

function calculateTotal(price, quantity) {
  const total = price * quantity;
  return total;
}

अगर आप total calculate होने के बाद value check करना चाहते हैं, तो उस line पर breakpoint लगा सकते हैं।

जब code उस line तक पहुँचेगा, execution pause हो सकता है।

Breakpoint क्यों Useful है?#

Suppose:

Code

const total = price * quantity;

लेकिन output गलत आ रहा है।

आप अंदाजा लगाने की जगह breakpoint लगाकर directly inspect कर सकते हैं:

Code

price = ?
quantity = ?
total = ?

इससे debugging faster होती है।

Step Over#

Step Over current line execute करके next line पर जाता है।

यह useful है जब आप function के अंदर जाए बिना execution flow देखना चाहते हैं।

Step Into#

Step Into current code से called function के अंदर जाने के लिए useful है।

Step Out#

अगर आप किसी function के अंदर हैं और उससे बाहर आना चाहते हैं, तो Step Out useful होता है।

Continue#

Paused execution को आगे continue करने के लिए:

Code

Continue

use किया जाता है।

Call Stack#

Call Stack यह समझने में मदद करता है कि current function तक code execution किस path से पहुँचा।

Example:

Code

handleClick()
    ↓
submitForm()
    ↓
validateForm()

अगर error या breakpoint है, तो call stack debugging में बहुत useful हो सकता है।

Network Panel#

Web developers के लिए Network panel सबसे important DevTools features में से एक है।

यह browser और server के बीच होने वाली network activity देखने में मदद करता है।

Example:

Code

Browser
   ↓
HTTP Request
   ↓
Server
   ↓
HTTP Response

Network panel में यह activity दिखाई दे सकती है।

Network Panel कैसे Use करें?#

Code

Open DevTools
    ↓
Network
    ↓
Reload Page

Page reload करने पर requests दिखाई देने लगती हैं।

Network में क्या दिखाई देता है?#

Common request types:

Code

Document
CSS
JS
Img
Font
Fetch/XHR
Media
Other

Browser version और application के अनुसार categories अलग हो सकती हैं।

Network Request के Important Fields#

एक request में आप देख सकते हैं:

Code

Name
Status
Type
Initiator
Size
Time

Example:

Code

/api/products
200
fetch
api.js
12 KB
120 ms

Request URL#

किस endpoint को request गई?

Example:

Code

https://example.com/api/products

Request Method#

Check करें:

Code

GET
POST
PUT
PATCH
DELETE

Status Code#

Example:

Code

इससे request का result समझने में help मिलती है।

Headers#

Network request select करके:

Code

Headers

section में request और response headers देख सकते हैं।

Example:

Code

Content-Type
Authorization
Cache-Control
Cookie
User-Agent

Payload#

POST/PUT/PATCH जैसी requests में भेजा गया data देखने के लिए Payload section useful हो सकता है।

Example:

Code

{
  "name": "Rahul",
  "email": "test@example.com"
}

Response#

Server ने क्या data वापस भेजा?

इसके लिए:

Code

Response

section देखें।

Example:

Code

{
  "success": true,
  "message": "Login successful"
}

Preview#

कुछ responses को browser structured तरीके से Preview में दिखा सकता है।

JSON response को readable format में inspect करना आसान हो सकता है।

Timing#

Network request में कितना time लगा?

Timing section में request के अलग-अलग phases की information दिखाई जा सकती है।

यह slow requests identify करने में useful है।

API Debugging का Practical Flow#

Suppose React application में products load नहीं हो रहे।

पहले:

Code

DevTools
  ↓
Network
  ↓
Fetch/XHR

फिर request देखें:

Code

/api/products

Check करें:

Code

Method
Status
Request URL
Headers
Payload
Response

अगर:

Code

है → endpoint/URL check करें।

अगर:

Code

है → authentication check करें।

अगर:

Code

है → backend/server side problem investigate करें।

Application Panel#

Application panel browser में stored application data inspect करने के लिए useful है।

यहाँ आपको commonly मिल सकते हैं:

Code

Cookies
Local Storage
Session Storage
IndexedDB
Cache Storage
Service Workers

Cookies#

Cookies का use commonly किया जाता है:

Sessions
Authentication
Preferences
Tracking

DevTools में cookies inspect की जा सकती हैं।

आप देख सकते हैं:

Code

Name
Value
Domain
Path
Expires
Secure
HttpOnly
SameSite

Local Storage#

Local Storage browser में data persist करने के लिए commonly use होता है।

Example:

Code

localStorage.setItem("theme", "dark");

Read:

Code

localStorage.getItem("theme");

Delete:

Code

localStorage.removeItem("theme");

सभी local storage data clear करने के लिए:

Code

localStorage.clear();

Session Storage#

Session Storage भी key-value data store करता है।

Example:

Code

sessionStorage.setItem("step", "2");

Read:

Code

sessionStorage.getItem("step");

यह tab/session lifecycle से related behavior रखता है, इसलिए Local Storage से अलग है।

Local Storage vs Session Storage#

Local Storage	Session Storage
Data longer persist कर सकता है	Tab/session lifecycle से जुड़ा होता है
Browser में stored	Current tab/session context
~5MB common browser limit के आसपास हो सकता है, exact limit browser-dependent	Limit browser-dependent
`localStorage`	`sessionStorage`

Exact storage limits browser और implementation पर depend कर सकते हैं।

IndexedDB#

IndexedDB browser में larger structured data store करने के लिए use किया जा सकता है।

यह useful हो सकता है:

Code

Offline Apps
Large Local Data
Complex Objects
Web Applications

DevTools के Application panel से IndexedDB databases inspect की जा सकती हैं।

Cache Storage#

Service Worker based applications में Cache Storage important हो सकता है।

Example:

Code

Service Worker
      ↓
Cache Storage
      ↓
Cached Resources

Progressive Web Apps और offline functionality में इसका use हो सकता है।

Service Workers#

Service Worker browser और web application के बीच background functionality provide कर सकता है।

Common use cases:

Code

Caching
Offline Support
Push Notifications
Background Tasks

DevTools में Application panel के अंदर service worker information inspect की जा सकती है।

Performance Panel#

अगर website slow है, तो Performance panel useful हो सकता है।

यह browser activity को record करके performance analysis में help करता है।

Basic flow:

Code

Performance
    ↓
Record
    ↓
Perform Action
    ↓
Stop
    ↓
Analyze

Performance में क्या Analyze करें?#

आप broadly देख सकते हैं:

Code

Loading
Scripting
Rendering
Painting
Network activity
Long tasks

Exact visualization browser version के अनुसार अलग हो सकती है।

Long Task क्या है?#

अगर JavaScript main thread को लंबे समय तक block करती है, तो page responsiveness प्रभावित हो सकती है।

Example:

Code

Heavy JavaScript
      ↓
Main Thread Busy
      ↓
UI Slow
      ↓
User Interaction Delay

Performance tools से ऐसे issues identify करने में मदद मिल सकती है।

Memory Panel#

Memory problems investigate करने के लिए Memory panel useful हो सकता है।

विशेषकर:

Code

Memory Usage
Heap Snapshots
Detached DOM Nodes

जैसी चीजें investigate की जा सकती हैं।

अगर application का memory usage continuously बढ़ रहा है, तो memory leak investigate करना पड़ सकता है।

Security Panel#

Security-related information inspect करने के लिए DevTools में Security panel useful हो सकता है।

यह HTTPS और certificate-related information देखने में मदद कर सकता है।

Check कर सकते हैं:

Code

HTTPS
Certificate
Connection Security
Mixed Content

Lighthouse#

Lighthouse website auditing के लिए useful tool है।

यह commonly इन areas को analyze करता है:

Code

Performance
Accessibility
Best Practices
SEO

कुछ browser versions में DevTools के अंदर Lighthouse उपलब्ध हो सकता है; tooling availability बदल सकती है।

Lighthouse कब Use करें?#

जब आप check करना चाहते हैं:

Code

Website कितनी fast है?
Accessibility कैसी है?
SEO basics कैसे हैं?
Best practices follow हो रही हैं?

तो Lighthouse useful starting point हो सकता है।

Search और Filter in DevTools#

DevTools में बहुत सारी information आ सकती है।

इसलिए filtering सीखना important है।

Network में:

Code

Fetch/XHR

select करके API requests पर focus कर सकते हैं।

Console में errors/warnings के हिसाब से filtering available हो सकती है।

Sources में file search करके specific code locate कर सकते हैं।

Device Mode#

Responsive testing के लिए device toolbar बहुत useful है।

Example:

Code

Desktop
   ↓
Tablet
   ↓
Mobile

लेकिन ध्यान रखें:

Device emulation real physical device का perfect replacement नहीं है।

Actual devices पर भी testing करना important है।

Inspect Element का Practical Use#

Suppose mobile पर button नीचे चला गया।

आप:

Code

Right Click
→ Inspect

करें।

फिर:

Code

Elements
→ Button
→ Styles
→ Computed
→ Box Model

check करें।

आपको पता चल सकता है:

Code

Margin ज्यादा है
Padding गलत है
Width fixed है
Display गलत है
Position issue है

इस तरह अंदाजा लगाने के बजाय actual browser rendering inspect कर सकते हैं।

Console + Network का Practical Use#

Suppose login button click करने पर कुछ नहीं हो रहा।

Debugging:

Code

Click Login
    ↓
Console
    ↓
JavaScript Error?
    ↓
Network
    ↓
API Request गई?
    ↓
Status Code?
    ↓
Response?

अगर Network में request ही नहीं जा रही:

Code

Frontend / JavaScript problem

हो सकती है।

अगर request जा रही है लेकिन:

Code

मिल रहा है:

Code

Authentication issue

हो सकता है।

अगर:

Code

मिल रहा है:

Code

Backend/server issue

investigate करना चाहिए।

CORS Error#

Frontend developers को अक्सर CORS error देखने को मिलती है।

CORS का मतलब:

Cross-Origin Resource Sharing

Suppose:

Code

Frontend:
https://app.example.com

API:

Code

https://api.example.com

Browser cross-origin request के लिए server की CORS policy check कर सकता है।

Console में CORS-related error दिखाई दे सकती है।

Important point:

CORS generally browser security mechanism है; इसे केवल frontend में random headers जोड़कर fix नहीं किया जाता। Server-side CORS configuration भी सही होना जरूरी है।

Mixed Content#

अगर page HTTPS पर है लेकिन वह insecure HTTP resource load करने की कोशिश करता है, तो browser mixed-content security behavior apply कर सकता है।

Example:

Code

https://example.com
       ↓
http://example.com/image.jpg

ऐसी configuration security और resource loading problems create कर सकती है।

DevTools Console/Security/Network में relevant warnings दिखाई दे सकती हैं।

Console में Useful Commands#

Page Title

Code

document.title

Current URL

Code

location.href

Cookies

Code

document.cookie

ध्यान रखें कि HttpOnly cookies JavaScript से accessible नहीं होतीं।

Find Element

Code

document.querySelector(".button")

Find Multiple Elements

Code

document.querySelectorAll("button")

Local Storage

Code

localStorage

Session Storage

Code

sessionStorage

`$0` क्या है?#

Chrome DevTools में Elements panel से selected element को Console में $0 से reference किया जा सकता है।

Example:

Code

$0

अगर आपने button select किया है, तो $0 उस currently selected element को represent कर सकता है।

यह DOM debugging में काफी useful shortcut है।

Network Request को Copy करना#

Network panel में request पर right click करने पर browser के अनुसार options मिल सकते हैं जैसे:

Code

Copy
Copy URL
Copy as cURL
Copy response

Copy as cURL खास तौर पर useful है क्योंकि आप browser request को terminal से reproduce करने की कोशिश कर सकते हैं।

Example:

Code

curl 'https://example.com/api/products'

Actual copied command में headers, cookies या अन्य request information भी शामिल हो सकती है।

ध्यान रखें: copied request में authentication tokens या cookies हो सकती हैं। इन्हें publicly share न करें।

DevTools में Security का ध्यान रखें#

DevTools powerful है, लेकिन debugging के दौरान sensitive information दिखाई दे सकती है।

Never casually share:

Code

Passwords
API Keys
Access Tokens
Session Cookies
Private Data
Authorization Headers

अगर Network request को screenshot या support ticket में share कर रहे हैं, तो sensitive values redact करें।

Common DevTools Mistakes#

Mistake 1: केवल Console Check करना#

API issue में सिर्फ Console देखना पर्याप्त नहीं होता।

Code

Console
+
Network

दोनों check करें।

Mistake 2: CSS Source File तुरंत बदल देना#

पहले DevTools में temporarily CSS change करके verify करें।

अगर change सही है, तब actual source file modify करें।

Mistake 3: 404 देखकर Backend को दोष देना#

पहले check करें:

Code

Request URL
HTTP Method
Route
Base URL

404 गलत frontend endpoint की वजह से भी हो सकता है।

Mistake 4: Cache को Ignore करना#

अगर code change के बाद old result दिख रहा है, तो browser cache और application caching check करें।

लेकिन blindly cache clear करने से पहले Network/Application behavior समझना बेहतर है।

Mistake 5: Mobile Problem को केवल Desktop से Debug करना#

Responsive/device mode useful है, लेकिन actual mobile device पर भी verify करें।

DevTools Debugging Workflow#

जब कोई website problem आए, तो यह workflow याद रखें:

Code

1. Reproduce Problem
        ↓
2. Console Check
        ↓
3. Elements Check
        ↓
4. Network Check
        ↓
5. Sources / Breakpoint
        ↓
6. Application / Storage
        ↓
7. Performance
        ↓
8. Fix
        ↓
9. Re-test

हर problem में सभी steps की जरूरत नहीं होती।

Problem के according relevant panel चुनें।

Problem → कौन सा DevTools Panel?#

Problem	Panel
HTML inspect करना	Elements
CSS issue	Elements
JavaScript error	Console
JavaScript debugging	Sources
API fail	Network
404 / 500	Network
Request payload	Network
API response	Network
Cookies	Application
Local Storage	Application
IndexedDB	Application
Service Worker	Application
Page slow	Performance
Memory issue	Memory
HTTPS/certificate	Security
SEO/performance audit	Lighthouse

Browser DevTools Quick Reference#

Code

DevTools Open
→ Right Click → Inspect

Elements
→ HTML + CSS

Console
→ JavaScript + Errors + Logs

Sources
→ JavaScript Debugging

Network
→ HTTP Requests + APIs

Application
→ Cookies + Storage + Service Workers

Performance
→ Performance Analysis

Memory
→ Memory Analysis

Security
→ HTTPS + Certificate

Lighthouse
→ Performance + Accessibility + SEO + Best Practices

Important Shortcuts#

Action	Shortcut
Open DevTools	`F12`
Open DevTools	`Ctrl + Shift + I`
Mac: Open DevTools	`Cmd + Option + I`
Device Toolbar	`Ctrl + Shift + M`
Mac: Device Toolbar	`Cmd + Shift + M`

Browser और OS के अनुसार shortcuts अलग हो सकते हैं।

Knowledge Check#

1. DevTools का use किसके लिए किया जाता है?

A. केवल HTML edit करने के लिए
B. Website inspect और debug करने के लिए
C. केवल images edit करने के लिए
D. केवल hosting manage करने के लिए

Answer: B

2. JavaScript errors सबसे पहले कहाँ check करेंगे?

A. Elements
B. Console
C. Application
D. Performance

Answer: B

3. API request inspect करने के लिए कौन सा panel सबसे useful है?

A. Network
B. Elements
C. Memory
D. Security

Answer: A

4. Local Storage कहाँ inspect किया जा सकता है?

A. Sources
B. Application
C. Network
D. Lighthouse

Answer: B

5. CSS temporarily test करने के लिए कौन सा panel use करेंगे?

A. Elements
B. Console
C. Network
D. Memory

Answer: A

6. JavaScript execution को specific line पर रोकने के लिए क्या use करते हैं?

A. Cookie
B. Breakpoint
C. Header
D. Cache

Answer: B

7. Website performance analyze करने के लिए कौन सा panel useful है?

A. Performance
B. Console
C. Elements
D. Application

Answer: A

Practical Exercises#

Exercise 1: Inspect a Website#

किसी website को open करें:

Code

Right Click
→ Inspect
→ Elements

एक heading select करें और देखें:

Code

HTML
Class
Styles
Computed
Box Model

Exercise 2: CSS Change करें#

किसी heading को select करें और DevTools में temporarily:

Code

font-size: 40px;

add करें।

फिर:

Code

color: red;

try करें।

Page reload करके देखें कि temporary changes वापस हो गए।

Exercise 3: Console Practice#

Console में run करें:

Code

document.title

फिर:

Code

location.href

और:

Code

document.querySelector("body")

इनके outputs observe करें।

Exercise 4: Network Request Find करें#

किसी website पर:

Code

DevTools
→ Network
→ Reload

अब एक request select करें और identify करें:

Code

URL
Method
Status
Request Headers
Response Headers
Response
Timing

Exercise 5: Local Storage Check करें#

Console में:

Code

localStorage.setItem("test", "hello")

फिर:

Code

localStorage.getItem("test")

Output:

Code

hello

फिर:

Code

localStorage.removeItem("test")

Exercise 6: Responsive Testing#

Device Toolbar open करें:

Code

Ctrl + Shift + M

और website को अलग-अलग viewport widths पर check करें।

Observe करें:

Code

Navigation
Images
Buttons
Text
Cards
Forms

कहाँ layout टूट रहा है, note करें।

Real-World Developer Workflow#

मान लीजिए production website पर user कहता है:

“Login button काम नहीं कर रहा।”

Developer का workflow:

Code

Login Button
     ↓
Elements
     ↓
Button सही है?
     ↓
Console
     ↓
JavaScript Error?
     ↓
Network
     ↓
Login API गई?
     ↓
Status Code
     ↓
Response
     ↓
Sources
     ↓
Breakpoint
     ↓
Root Cause
     ↓
Fix

यही reason है कि DevTools सिर्फ browser का extra feature नहीं है।

Web developer के लिए DevTools एक daily debugging toolkit है।

DevTools को याद रखने का आसान तरीका#

सबसे पहले इन 5 panels को strong करें:

Code

Elements
Console
Sources
Network
Application

इनका simple meaning:

Code

Elements
→ Page दिख कैसे रही है?

Console
→ JavaScript में क्या हो रहा है?

Sources
→ Code कहाँ और कैसे चल रहा है?

Network
→ Browser और server के बीच क्या हो रहा है?

Application
→ Browser में क्या data/store हो रहा है?

फिर धीरे-धीरे:

Code

Performance
Memory
Security
Lighthouse

सीखें।

Summary#

इस Browser DevTools Cheat Sheet में हमने सीखा:

Browser DevTools क्या है
DevTools क्यों जरूरी है
DevTools कैसे open करें
Elements panel
HTML inspection
CSS debugging
Box Model
Responsive testing
Console
console.log()
JavaScript errors
Sources
Breakpoints
Step Over / Step Into / Step Out
Call Stack
Network
HTTP requests
Headers
Payload
Response
API debugging
Application panel
Cookies
Local Storage
Session Storage
IndexedDB
Cache Storage
Service Workers
Performance
Memory
Security
Lighthouse
CORS
Mixed Content
DevTools shortcuts
Common debugging workflow

सबसे important mental model:

Code

HTML/CSS Problem
      ↓
Elements

JavaScript Problem
      ↓
Console + Sources

API/HTTP Problem
      ↓
Network

Storage/Login/Cache Problem
      ↓
Application

Performance Problem
      ↓
Performance

Browser DevTools Cheat Sheet: Chrome DevTools की Complete Hinglish Guide

Browser DevTools क्या है?#

DevTools क्यों जरूरी है?#

DevTools कैसे Open करें?#

Method 1: Right Click

Method 2: Keyboard Shortcut

Method 3: F12

Elements Panel#

HTML Inspect करना#

HTML को Temporarily Edit करना#

CSS Inspect करना#

CSS Temporarily Change करना#

Styles और Computed#

Styles

Computed

Box Model#

Responsive Design Check करना#

Responsive Mode में क्या Check करें?#

Console Panel#

console.log()#

console.error()#

console.warn()#

Console में JavaScript Run करना#

DOM Inspect करना#

Multiple Elements#

Console Error कैसे पढ़ें?#

Sources Panel

JavaScript Debugging#

Breakpoint क्या है?#

Breakpoint क्यों Useful है?#

Step Over#

Step Into#

Step Out#

Continue#

Call Stack#

Network Panel#

Network Panel कैसे Use करें?#

Network में क्या दिखाई देता है?#

Network Request के Important Fields#

Request URL#

Request Method#

Status Code#

Headers#

Payload#

Response#

Preview#

Timing#

API Debugging का Practical Flow#

Application Panel#

Cookies#

Local Storage#

Session Storage#

Local Storage vs Session Storage#

IndexedDB#

Cache Storage#

Service Workers#

Performance Panel#

Performance में क्या Analyze करें?#

Long Task क्या है?#

Memory Panel#

Security Panel#

Lighthouse#

Lighthouse कब Use करें?#

Search और Filter in DevTools#

Device Mode#

Inspect Element का Practical Use#

Console + Network का Practical Use#

CORS Error#

Mixed Content#

Console में Useful Commands#

Page Title

Current URL

Cookies

Find Element

Find Multiple Elements

Local Storage

Session Storage

$0 क्या है?#

Network Request को Copy करना#

DevTools में Security का ध्यान रखें#

`console.log()`#

`console.error()`#

`console.warn()`#

`$0` क्या है?#