coderberry/chrome-cheat-sheet.md

## chrome-cheat-sheet.md

      
    Raw
  

              chrome-cheat-sheet.md
            
          
    Cheat sheet extracted from https://www.youtube.com/watch?v=2zmUSoVMyRU by That JS Dude.

$()

If you pass any of the CSS selectors to $(<identifier>) you get the first element.
> $('a')
  <a class="navbar-brand" href="../../index.html">That Js Dude</a>

$$()

If you pass any of the CSS selectors to $$(<identifier>), you will get all of the selector elements
> $$('a')
  [<a class="navbar-brand" href="../../index.html">That Js Dude</a>,
   <a class="btn btn-success" href="#" id="loginText">sign in</a>,
   <a class="btn btn-success" href="#" id="logoutText">log out</a>]

$_

Returns the last executed expression from the console.
> foo = "bar"
  "bar"
> $_
  "bar"

Preserve log upon navigation

To preserve the log upon navigation, right click in the console and click Preserve Log upon Navigation.


List Event Listeners on Element

If you want to view the events which are tied to an element you can call getEventListeners(<element>) on the element:
> getEventListeners($('input[name=q]'))
  Object {focus: Array[2], blur: Array[2], keydown: Array[1], select: Array[1], mousedown: Array[1]…}

Monitor (Multiple) Events on an Element

You can monitor the events on an element with monitorEvents(<element>, <name(s)>) by passing the element and a name of the event or array of event names:
> monitorEvents($('input[name=q]'), 'click')
  undefined
  ... click on element ...
  click ▶ MouseEvent {dataTransfer: null, toElement: input#gbqfq.gbqfif, fromElement: null, y: 329, x: 265…}
> monitorEvents($('input[name=q]'), ['blur', 'keydown'])
  ...

Unmonitor Events on an Element

To remove all event monitors on an element, use unmonitorEvents(<element>):
> unmonitorEvents($('input[name=q]'))

Make Webpage Editable

You can convert the page to be editable with the contentEditable flag.
> document.body.contentEditable = true

Logging Objects

Use comma:
> console.log('Window', windo
  Window ▶ Window {top: Window, window: Window, location: Location, external: Object, chrome: Object…}
> console.log('Window', window, 'Body', document.body)
  Window ▶ Window {top: Window, window: Window, location: Location, external: Object, chrome: Object…}
  Body ▶ <body data-ember-extension="1" data-twttr-rendered="true" contenteditable="true">…</body>

Start/Stop Timer

You can start and stop a named timer with time(<name>) and timeEnd(<name>):
> console.time('myTime')
  undefined
> console.timeEnd('myTime')
  myTime: 5934.533ms
> console.time('myLoop');
  for (var i=0; i < 100000; i++) {
    2 + 2 * 3;
  }
  console.timeEnd('myLoop');
  myLoop: 60.568ms 

Group Logs in Console

You can group console logs by using the groupCollapsed(<name>) and groupEnd():
> console.groupCollapsed('My Error');
  for (var i=50; i--;) {
    console.error(i);
  }
  console.groupEnd()
  ▶ My Error

Display Array Content as Table

You can display your array content in a table view using table(<array>):
> var myArray = [{a:1, b:2, c:3}, {a:1, b:2, c:3}, {a:1, b:2, c:3}, {a:1, b:2, d:'tttt'}, {a:1, b:2, kkk:'foo'}]
  undefined
> console.table(myArray)


Clear Console

To clear the console, you can use the command clear() or CTRL-L (windows) or ??? (mac)
> clear()

Get Call Stack Trace

To get the trace of the current stack, use trace():
> console.trace()
  ▼ console.trace()
      (anonymous function)
      InjectedScript._evaluateOn
      InjectedScript._evaluateAndWrap
      InjectedScript.evaluate

Log Times Function is Called

You can log the number of times a function is called by using count(<message>):

function foo() {
console.count('fooed');
}
undefined
foo()
fooed: 1
foo()
fooed: 2
foo()
fooed: 3
foo()
fooed: 4


---

#### Start and Stop Profiling by Name

You can start and stop profiling in the console using `profile(<name>)` and `profileEnd(<name>)`:

```javascript
> profile('aaaa')
  Profile 'aaaa' started
> profileEnd('aaaa')
  Profile 'aaaa' finished

Now you can find the profile in the profiles tab with the name aaaa.

View Element Properties

You can view all the properties on an element using dir(<element>):
> dir(document.body)
  ▼ body
    aLink: ""
    accessKey: ""
    attributes: NamedNodeMap
    background: ""
    baseURI: "http://coderberry.me/"
    ...

Inspect Element (in Elements tab)

You can jump to an element in the Elements tab by using inspect(<element>):
> inspect(document.body)
  ▶ <body data-ember-extension="1" data-twttr-rendered="true" contenteditable="true">…</body>

Get Last Inspected Elements in DOM

You can see the last 5 inspected elements in the DOM with $0, $1, $2, $3 and $4:
> inspect($('p')[0])
  <p class="meta">…</p>
> inspect($('h1')[0])
  <h1 class="entry-title">…</h1>
> $0
  <h1 class="entry-title">…</h1>
> $1
  <p class="meta">…</p>