Debug Like a Lion With Chrome’s DevTools

Tips and tricks for using Chrome’s DevTools more effectively

You can open Chrome’s DevTools with CMD + option + J.

Note: This tricks only works in the Chrome console.

---

1. $_

If you type $_ in the console, it will print the last evaluated expression in the console.

Example:

6 + 6 // 12
$_ // 12

We can also perform an operation on $_:

$_ * 5 // 60
$_ // 60

The $_ will contain the value of what the expression returns. If the expression returns $_ it is undefined.

// try in your console

var a = {} // undefined
$_ // undefined

// Similarly
function a () {} ;

$_ undefined

$_ can be any value (number/object/anything).

window
Window {parent: Window, postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, …}

$_
Window {parent: Window, postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, …}

---

2. monitor(function)

When we call the monitor function with any function reference, then whenever the function is called, the function name with arguments passed will be printed in the console.

Use unmonitor(function) to stop monitoring.

---

3. copy(Object)

Copies the object as a String to the clipboard.

var a = {
  name : 10
}

copy(a);

---

4. clear() — Clears Console

Clears the browser console.

We can also clear the console history by right-clicking in the console. There we will have two options, one to clear console and another to clear console history.

---

5. $0 — $4 — Selected Element History

This will have the reference to the last five selected DOM elements from the elements tab of the developer tool. If none of the elements are selected then it returns undefined.

• $0 → returns the last selected element.
• $1 → returns the second-last selected one, and so on.

---

6. $(selector, [startNode])

We can use $(selector ) instead of debugging using document.querySelector in the console.

$(‘img’) -- will return the first img tag.

The startNode specifies an element or Node from which to search for elements. The default value of this parameter is document.

---

7. $$(selector, [startNode])

This is an alternative for document.querySelectorAll in the console

$$(‘img’) → will return all image elements

---

8. debug(function) — Automatic Debug Mode

If we want to automatically stop the debugger at a specific function, then we pass the function name to the debug function.

function test() {
  console.log("testing");
}

debug(test)

Use undebug to stop automatic debug mode.

---

9. inspect(function/DOM)

This will take either the DOM element or a function based on the argument passed.

Passing a function name.

function test() {
  console.log("testing");
}
inspect(test); // take you to function definition

Passing a DOM element.

inspect(document.body)

---

10. keys(object)

This will print the keys of the object passed. Alternative to Object.keys.

var a = {
  one : 1,
  two : 2
}

keys(a)
// (2) ["one", "two"]

---

11. values(object)

This will print the keys of the object passed. Alternative to Object.value.

var a = {
  one : 1,
  two : 2
}

values(a)

// (2) [1,2]

---

12. monitorEvents(element, [eventNames])

When one of the specified events occurs on the specified object, the Event object is logged to the console. You can specify a single event to monitor or an array of events:

monitorEvents(btn, 'click');

Whenever a button is clicked, the event object will be printed in the console.

monitorEvents(input, ['keypress', 'input', 'keydown'])

You can also specify one of the available event “types”, strings that map to predefined sets of events. The table below lists the available event types and their associated event mappings:

monitorEvents(input, "key");

Use unmonitorEvents to stop monitoring.

---

13. getEventListeners(element)

Returns events registered to a specific DOM element.

---

14. table(data) — Print As Table

Prints the object in table format.