This comprehensive guide explores 100 tips, hacks, and deep-dive explanations for Chrome Developer Tools (DevTools). Whether you are a web developer, designer, or QA engineer, mastering these tools will significantly speed up your workflow.

Part 1: Core Concepts & Architecture

1. The Elements Panel

This is the “Live DOM” viewer. Unlike “View Source,” which shows the code the server sent, the Elements panel shows the state of the page after JavaScript has run and the browser has fixed any HTML errors.

• Styles: Real-time CSS editing.

• Computed: The final values applied after all CSS specificity rules and inheritance are calculated.

• Layout: Dedicated tools for debugging CSS Grid and Flexbox.

2. The Console

A command-line interface for the browser. It logs errors/warnings and allows you to run JavaScript against the current page.

3. The Sources Panel

The file explorer. You can view every script, image, and stylesheet loaded. It includes a powerful Debugger to pause code execution using breakpoints.

4. The Network Panel

The “Traffic Controller.” It tracks every request the browser makes (APIs, images, scripts). Vital for checking load times, status codes (404, 500), and payload data.

5. Performance & Memory

The “Stethoscope.” Performance records the site as you use it to find “jank” (stuttering). Memory tracks “leaks” where the browser forgets to release RAM, causing the site to slow down over time.

Part 2: 100 Tips, Hacks, and Tutorials

Shortcuts & Navigation

1. Quick Open: Press Ctrl + P (Cmd + P) to search for and open any file in the project.

2. Command Menu: Ctrl + Shift + P opens a “Spotlight” search for DevTools features (e.g., “Switch to dark mode”).

3. Inspect Element: Ctrl + Shift + C toggles the “Select Element” mode.

4. Dock Side: Use the three-dot menu to move DevTools to the bottom, left, right, or a separate window.

5. Settings Gear: Press F1 while DevTools is open to enter settings.

Elements Panel Hacks

6. Edit as HTML: Right-click a node and select “Edit as HTML” to rewrite entire blocks of code.

7. Drag and Drop: You can click and drag DOM elements to rearrange the page layout live.

8. Hiding Elements: Press H while an element is selected to toggle visibility: hidden.

9. Force State: Right-click an element > “Force State” > :hover to debug hover effects without using the mouse.

10. Color Picker: Click the color square in the Styles pane to open a GUI for colors, including a contrast ratio checker.

11. Shadow DOM: Enable “Show user agent shadow DOM” in settings to see how <video> or <input> tags are built internally.

12. Scroll into View: Right-click a node in the tree and select “Scroll into view” to find it on the page.

13. DOM Breakpoints: Right-click a tag > “Break on” > “Subtree modifications” to pause JS whenever that element changes.

14. Computed Search: Use the filter in the “Computed” tab to find exactly which CSS file is setting a specific margin.

15. Flexbox Editor: Click the icon next to display: flex to visually toggle align-items and justify-content.

16. Grid Editor: Similar to Flex; click the icon next to display: grid to see line numbers and areas.

17. Badge Settings: Right-click any badge (like “Grid”) to toggle which layout helpers are visible.

18. Copy Selector: Right-click > Copy > Copy Selector to get the exact CSS path for your script.

19. Copy JS Path: Right-click > Copy > Copy JS Path to get document.querySelector(...) for that specific element.

20. Visualize Layout: In the “Layout” tab, check “Show area names” to see your CSS Grid labels on screen.

Console Mastery

21. $0: Type $0 in the console to reference the element currently selected in the Elements panel.

22. $_: Type $_ to get the result of the last expression evaluated.

23. $() and $$(): Short for querySelector and querySelectorAll.

24. console.table(): Pass an array of objects to see it in a beautiful, sortable table.

25. console.group(): Nest logs together to keep the console clean.

26. console.time() / console.timeEnd(): Measure how long a piece of code takes to run.

27. Copy to Clipboard: Use copy(temp1) to copy a console object to your physical clipboard.

28. Live Expressions: Click the “Eye” icon to create a pinned expression that updates in real-time.

29. Store as Global Variable: Right-click a logged object > “Store as global variable” to save it as temp1.

30. Clean Console: Press Ctrl + L or click the “Clear” icon.

31. Preserve Log: Check “Preserve log” to keep console history across page refreshes.

32. Filter by Source: Use the “Default levels” dropdown to hide “Info” or “Warnings.”

33. Object Formatting: Click the “all” dropdown to change how objects are displayed.

34. Design Mode: Type document.designMode = 'on' to make the entire webpage editable like a Word doc.

35. Find Event Listeners: Use getEventListeners($0) to see every function attached to an element.

36. Monitor Events: Type monitorEvents($0) to log every click or scroll event happening to an element in real-time.

37. Stack Trace: console.trace() shows you the path the code took to get to that point.

38. Dir: console.dir($0) shows the JS object properties of a DOM node rather than the HTML tag.

39. Console Assert: console.assert(x === 1, "Fail") only logs if the condition is false.

40. Styles in Console: Use %c (e.g., console.log("%c Alert", "color: red")) to style your logs.

Sources & Debugging

41. Breakpoints: Click a line number to pause execution.

42. Conditional Breakpoints: Right-click a line number to only pause if a variable equals a certain value.

43. Logpoints: Like breakpoints, but they just log a message instead of pausing.

44. Watch Expressions: Add variables to the “Watch” pane to track their values while stepping through code.

45. Call Stack: View the “Call Stack” pane to see which functions called the current function.

46. Local Overrides: Map a local file on your computer to a live website. Change the code and see it persist after refresh.

47. Pretty Print: Click the {} icon at the bottom of a minified file to make it readable.

48. Blackbox Scripts: Right-click a library (like React or jQuery) and “Add script to ignore list” so the debugger doesn’t jump into them.

49. Step Over/Into/Out: Use the navigation arrows to move through code line by line.

50. Snippets: In the “Snippets” sub-tab, save JS scripts you use often (like a script to scrape images) and run them on any site.

51. Search All Files: Ctrl + Shift + F searches for text inside every loaded file.

52. XHR Breakpoints: Pause the browser whenever a specific API URL is called.

53. Event Listener Breakpoints: Pause as soon as a user clicks anything.

54. Jump to Line: Ctrl + G inside a file to go to a specific line.

55. Format on Save: Enable in settings to auto-indent code you edit in DevTools.

Network Performance

56. Throttling: Use the “No throttling” dropdown to simulate 3G speeds.

57. Disable Cache: Check this box to ensure you are downloading fresh files while DevTools is open.

58. Request Blocking: Right-click a file > “Block request URL” to see how the site looks if a specific script fails.

59. Search Network: Ctrl + F inside the network tab to find which request contains a specific piece of text.

60. HAR Export: Click the “Download” arrow to save a log of the network activity to send to a teammate.

61. Waterfall View: Hover over the “Waterfall” bars to see exactly how long “DNS Lookup” vs “Initial Connection” took.

62. Resend Request: Right-click a request > “Replay XHR” to trigger the API call again.

63. Copy as Fetch: Right-click > Copy > Copy as fetch to get the code to recreate that request in your own script.

64. Capture Screenshots: In the Performance tab, check “Screenshots” to see a filmstrip of how the page loaded.

65. Filter by Type: Click “Fetch/XHR” to only see API calls.

66. Large Request Rows: Toggle this to see more detail (like size vs. transferred size) in the list.

67. Identify Initiator: Hover over the “Initiator” column to see exactly which line of JS triggered the request.

68. WebSocket Inspection: Click a WS request to see the live frames of data moving back and forth.

69. Preview Tab: Use the “Preview” tab on an image request to see the image without leaving DevTools.

70. Response Headers: Check the “Headers” tab to see if your server is sending the correct Cache-Control or CORS headers.

Visual & Mobile Testing

71. Device Toolbar: Ctrl + Shift + M to simulate iPhones, Pixels, or tablets.

72. Throttling (CPU): In the Performance tab, throttle your CPU (e.g., 6x slowdown) to see how lower-end phones handle your site.

73. Sensors: Use the “Sensors” drawer (Cmd+Shift+P > Show Sensors) to fake Geolocation or Orientation.

74. Media Queries: Click the bars above the device simulator to see your CSS breakpoints visually.

75. Full Size Screenshot: In Device Mode, click the three dots and select “Capture full size screenshot.”

76. Inspect Hover: Use the “Inspect” tool while holding Shift to inspect elements that only appear on hover.

77. Animations: Open the “Animations” drawer to slow down, replay, and tweak CSS keyframes.

78. Rendering Tab: Turn on “Paint flashing” to see what parts of the page the browser is re-drawing.

79. Layout Shift: In the Rendering tab, check “Layout Shift Regions” to find unstable elements (CLS).

80. Vision Deficiency: Simulate Color Blindness or Blurred Vision in the Rendering tab.

Audits & Security

81. Lighthouse: Run a full report on Performance, SEO, and Accessibility.

82. Security Tab: Check if the site’s SSL certificate is valid and if there is “Mixed Content” (loading HTTP on HTTPS).

83. Application Tab: View and delete Cookies, LocalStorage, and IndexedDB data.

84. Service Workers: Debug PWA features and force-update service workers here.

85. Manifest: Check if your web app manifest is configured correctly for “Add to Home Screen.”

86. Clear Site Data: One-click button in Application > Storage to wipe everything (cookies, cache, DB).

Memory & Heavy Lifting

87. Heap Snapshot: Take a snapshot of every JS object in memory to find “Memory Leaks.”

88. Allocation Instrumentation: Watch memory grow in real-time as you perform actions.

89. Allocation Sampling: A lower-overhead way to find memory bottlenecks.

90. Identify Detached DOM Nodes: Find elements that were removed from the page but are still stuck in memory.

Advanced Hacks

91. Workspaces: Link your local source code folder to DevTools. Saving in DevTools saves the file to your hard drive.

92. Remote Debugging: Connect your physical Android phone to your computer and debug the mobile Chrome browser on your desktop.

93. Experimental Features: Go to Settings > Experiments to try upcoming tools (like “Recorder”).

94. The “Recorder” Panel: Record a user flow (click, type, submit) and export it as a Puppeteer script for automated testing.

95. Changes Tab: Use “Show Changes” (Command Menu) to see a “Git-diff” of all the CSS edits you’ve made since opening DevTools.

96. CSS Overview: A summary of all colors, fonts, and unused declarations on the page.

97. Layers Panel: See a 3D view of how the browser is stacking elements (Z-index debugging).

98. Web Vitals: Enable the “Live Metrics” overlay in the Performance tab.

99. Protocol Monitor: See the raw JSON-RPC messages between DevTools and the browser engine.

100. Customizing Theme: DevTools supports custom themes and color schemes via the settings menu.

This article is written by time.i.ng/, providing insights into web development and digital optimization.