Scribd
Upload
28 views2 pages

Chrome DevTools Debugging Guide

The document lists 20 essential commands for debugging in Chrome Developer Tools, providing shortcuts and functionalities for inspecting elements, debugging JavaScript, and managing code execution. Key commands include opening the Developer Tools, navigating files, controlling script execution, and monitoring events. Additional features like async stack traces and blackboxing scripts enhance the debugging experience by streamlining the process and improving clarity.

Uploaded by

johntaichiqigong
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
28 views2 pages

Chrome DevTools Debugging Guide

The document lists 20 essential commands for debugging in Chrome Developer Tools, providing shortcuts and functionalities for inspecting elements, debugging JavaScript, and managing code execution. Key commands include opening the Developer Tools, navigating files, controlling script execution, and monitoring events. Additional features like async stack traces and blackboxing scripts enhance the debugging experience by streamlining the process and improving clarity.

Uploaded by

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

**20 Essential Commands for Debugging in Chrome Developer Tools**

1. **Ctrl+Shift+I (or F12):**


Opens the Chrome Developer Tools. This is your starting point for inspecting
elements, debugging JavaScript, and more.

2. **Ctrl+Shift+J:**
Opens the Console panel directly, where you can view logs, errors, and run
JavaScript commands interactively.

3. **Ctrl+P (in Sources panel):**


Opens the file search within the Sources panel. Quickly locate and open files by
typing part of the filename.

4. **Ctrl+Shift+F:**
Performs a global search across all files in the project. Use this to find
specific code snippets or variable names.

5. **F8:**
Resumes script execution after hitting a breakpoint, allowing you to continue
running your code.

6. **F10:**
Steps over the current function call during debugging, useful when you want to
skip function internals.

7. **F11:**
Steps into the next function call, so you can debug inside a function call.

8. **Shift+F11:**
Steps out of the current function, returning you to the calling function
context.

9. **Ctrl+Shift+M (Toggle Device Mode):**


Switches to mobile device emulation mode to test responsiveness and mobile-
specific behavior.

10. **Debugger Statement:**


Insert `debugger;` in your code. When execution reaches this line, the debugger
will pause, letting you inspect variables and the call stack.

11. **XHR/Fetch Breakpoints:**


In the Sources panel, under Breakpoints > XHR/Fetch Breakpoints, add
breakpoints for network requests to pause execution when AJAX calls occur.

12. **Event Listener Breakpoints:**


In the Sources panel under the Event Listener Breakpoints section, check
specific events (like click, load) to pause when those events fire.

13. **monitorEvents(element):**
In the Console, type `monitorEvents($0)` (with an element selected in the
Elements panel) to log events fired on that element.

14. **unmonitorEvents(element):**
To stop monitoring events on an element, run `unmonitorEvents($0)` in the
Console.

15. **$0, $1, …:**


Use `$0` to reference the currently selected element in the Elements panel.
`$1`, `$2`, etc., reference previously selected elements.

16. **copy(object):**
In the Console, use `copy(variable)` to copy a variable’s content to the
clipboard for further inspection or debugging.

17. **console.table(data):**
Logs tabular data in a table format. Great for visualizing arrays or objects.

18. **console.trace():**
Outputs the call stack at the point where it’s called, which helps track the
function execution flow.

19. **Async Stack Traces:**


Enable async stack traces in DevTools (Settings > Preferences > Enable async
stack traces) to see the origin of asynchronous calls.

20. **Blackboxing Scripts:**


In the Sources panel, right-click a script (e.g., third-party libraries) and
select “Blackbox Script” to exclude it from debugging, making your call stack
clearer.

You might also like