Spaces:
Sleeping
Sleeping
File size: 2,629 Bytes
980dc8d |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
---
title: "Browser: DevTools"
original_url: "https://tds.s-anand.net/#/devtools?id=browser-devtools"
downloaded_at: "2025-06-08T23:21:14.785028"
---
[Browser: DevTools](#/devtools?id=browser-devtools)
---------------------------------------------------
[Chrome DevTools](https://developer.chrome.com/docs/devtools/overview/) is the de facto standard for web development and data analysis in the browser.
You’ll use this a lot when debugging and inspecting web pages.
Here are the key features you’ll use most:
1. **Elements Panel**
* Inspect and modify HTML/CSS in real-time
* Copy CSS selectors for web scraping
* Debug layout issues with the Box Model
```
// Copy selector in Console
copy($0); // Copies selector of selected elementCopy to clipboardErrorCopied
```
2. **Console Panel**
* JavaScript REPL environment
* Log and debug data
* Common console methods:
```
console.table(data); // Display data in table format
console.group("Name"); // Group related logs
console.time("Label"); // Measure execution timeCopy to clipboardErrorCopied
```
3. **Network Panel**
* Monitor API requests and responses
* Simulate slow connections
* Right-click on a request and select “Copy as fetch” to get the request.
4. **Essential Keyboard Shortcuts**
* `Ctrl+Shift+I` (Windows) / `Cmd+Opt+I` (Mac): Open DevTools
* `Ctrl+Shift+C`: Select element to inspect
* `Ctrl+L`: Clear console
* `$0`: Reference currently selected element
* `$$('selector')`: Query selector all (returns array)
Videos from Chrome Developers (37 min total):
* [Fun & powerful: Intro to Chrome DevTools](https://youtu.be/t1c5tNPpXjs) (5 min)
* [Different ways to open Chrome DevTools](https://youtu.be/X65TAP8a530) (5 min)
* [Faster DevTools navigation with shortcuts and settings](https://youtu.be/xHusjrb_34A) (3 min)
* [How to log messages in the Console](https://youtu.be/76U0gtuV9AY) (6 min)
* [How to speed up your workflow with Console shortcuts](https://youtu.be/hdRDTj6ObiE) (6 min)
* [HTML vs DOM? Let’s debug them](https://youtu.be/J-02VNxE7lE) (5 min)
* [Caching demystified: Inspect, clear, and disable caches](https://youtu.be/mSMb-aH6sUw) (7 min)
* [Console message logging](https://youtu.be/76U0gtuV9AY) (6 min)
* [Console workflow shortcuts](https://youtu.be/hdRDTj6ObiE) (6 min)
* [HTML vs DOM debugging](https://youtu.be/J-02VNxE7lE) (5 min)
* [Cache inspection and management](https://youtu.be/mSMb-aH6sUw) (7 min)
[Previous
Unicode](#/unicode)
[Next
CSS Selectors](#/css-selectors) |