Scribd
Upload
0 views

Console Guide

The document discusses the powerful features of the Console tool in Inspect Element, which helps developers debug, test, and manipulate web pages. It outlines various tasks that can be performed using the Console, such as modifying HTML/CSS, accessing elements, running JavaScript code, debugging network requests, and managing cookies. Additionally, it emphasizes the importance of using the Console responsibly for testing and learning purposes only.

Uploaded by

Dr Shiv Kumar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0 views

Console Guide

The document discusses the powerful features of the Console tool in Inspect Element, which helps developers debug, test, and manipulate web pages. It outlines various tasks that can be performed using the Console, such as modifying HTML/CSS, accessing elements, running JavaScript code, debugging network requests, and managing cookies. Additionally, it emphasizes the importance of using the Console responsibly for testing and learning purposes only.

Uploaded by

Dr Shiv Kumar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

Inspect Element mein Console ek powerful tool hai jo

developers ko web pages ko debug karne, test karne, aur


manipulate karne mein madad karta hai. Console ka use karke
aap kuch interesting cheezein kar sakte hain. Niche kuch
common aur useful tasks bataye gaye hain jo aap Console se
kar sakte hain:

1. Web Page ka HTML aur CSS Modify Karna


 Aap kisi bhi element ka HTML ya CSS inspect element se
change kar sakte hain aur Console ka use karke JavaScript
se bhi modify kar sakte hain.
 Example:
javascript
Copy
document.querySelector('h1').innerText = 'Hello, World!';
Isse page ka pehla <h1> element ka text change ho jayega.

2. Elements ko Hide/Show Karna


 Aap kisi bhi element ko hide ya show kar sakte hain.
 Example:
javascript
Copy
document.querySelector('.class-name').style.display = 'none';
// Hide
document.querySelector('.class-name').style.display = 'block';
// Show

3. Page ke Elements ko Access Karna


 Aap kisi bhi element ko select kar sakte hain aur uske
properties ko access kar sakte hain.
 Example:
javascript
Copy
let element = document.querySelector('#element-id');
console.log(element.innerHTML); // Element ka inner HTML
dekhein
console.log(element.style); // Element ka CSS style dekhein

4. JavaScript Code Run Karna


 Aap Console mein koi bhi JavaScript code run kar sakte hain.
 Example:
javascript
Copy
alert('Hello, Console!');
5. Network Requests Debug Karna
 Aap fetch ya XMLHttpRequest ka use karke network
requests bhej sakte hain aur unke responses ko check kar
sakte hain.
 Example:
javascript
Copy
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data));

6. Cookies Access aur Modify Karna


 Aap document.cookie ka use karke cookies ko access aur
modify kar sakte hain.
 Example:
javascript
Copy
console.log(document.cookie); // Cookies dekhein
document.cookie = "username=JohnDoe"; // New cookie set
karein

7. Page ka Title Change Karna


 Aap page ka title dynamically change kar sakte hain.
 Example:
javascript
Copy
document.title = 'New Page Title';

8. Event Listeners Add Karna


 Aap kisi bhi element par event listeners add kar sakte hain.
 Example:
javascript
Copy
document.querySelector('button').addEventListener('click', ()
=> {
alert('Button Clicked!');
});

9. Page ka URL Change Karna


 Aap window.location ka use karke page ka URL change kar
sakte hain.
 Example:
javascript
Copy
window.location.href = 'https://www.google.com';
10. Console mein Logs, Warnings, aur Errors Show
Karna
 Aap console.log(), console.warn(), aur console.error() ka use
karke messages print kar sakte hain.
 Example:
javascript
Copy
console.log('This is a log message');
console.warn('This is a warning message');
console.error('This is an error message');

11. Timers Set Karna


 Aap setTimeout aur setInterval ka use karke timers set kar
sakte hain.
 Example:
javascript
Copy
setTimeout(() => {
console.log('This will run after 5 seconds');
}, 5000);

12. Local Storage aur Session Storage Access Karna


 Aap localStorage aur sessionStorage ka use karke data store
aur retrieve kar sakte hain.
 Example:
javascript
Copy
localStorage.setItem('name', 'John'); // Data store karein
console.log(localStorage.getItem('name')); // Data retrieve
karein

13. Page ka Reload Karna


 Aap page ko reload kar sakte hain.
 Example:
javascript
Copy
location.reload();

14. Form Data Submit Karna


 Aap JavaScript ka use karke form data submit kar sakte hain.
 Example:
javascript
Copy
document.querySelector('form').submit();
15. Debugging Karna
 Aap debugger statement ka use karke code ko pause kar
sakte hain aur step-by-step debug kar sakte hain.
 Example:
javascript
Copy
debugger;
console.log('Debugging started');

16. Page ke Resources ko Monitor Karna


 Aap performance object ka use karke page ke performance
metrics ko monitor kar sakte hain.
 Example:
javascript
Copy
console.log(performance.now()); // Page load time dekhein

17. Dynamic Content Add Karna


 Aap page par dynamically naye elements add kar sakte
hain.
 Example:
javascript
Copy
let newElement = document.createElement('div');
newElement.innerText = 'This is a new element';
document.body.appendChild(newElement);

18. Page ka Full Screenshot Lena


 Aap Console ka use karke pure page ka screenshot le sakte
hain.
 Example:
javascript
Copy
window.scrollTo(0, 0);
html2canvas(document.body).then(canvas => {
document.body.appendChild(canvas);
});
(Note: html2canvas library ka use karna hoga.)

19. Page ke Resources ko Block Karna


 Aap debugger ya network throttling ka use karke specific
resources ko block kar sakte hain.
 Example:
javascript
Copy
// Network tab mein jayein aur specific requests ko block
karein

20. Custom Scripts Run Karna


 Aap Console mein koi bhi custom JavaScript code run kar
sakte hain.
 Example:
javascript
Copy
for (let i = 0; i < 10; i++) {
console.log(`Iteration: ${i}`);
}

Console ek bahut hi powerful tool hai, lekin dhyan rakhein ki


iska use sirf testing aur learning ke liye karein. Kisi bhi live
website par changes karne se pehle backup lena ya local
environment mein test karna accha rahega. 😊

You might also like