Chrome DevTools

_ http://www.cnblogs.com/Wayou/p/chrome-console-tips-and-tricks.html

Hotkey

Remember all chrome related hotkeys are trigger with Option+CMD or ALT+CMD:

  • ALT+CMD+arrow: go to left or right tab

  • ALT+CMD+0: go to first tab

  • ALT+CMD+9: go to last tab

  • ALT+CMD+C: inspect element

  • ALT+CMD+i: open dev tools

Elements

  • F2 to edit as HTML, press again to apply the changes.

Network

  • filter the network by using -domain:*.com. See full list of filters by typing -.

  • How to capture network for new popup link? Go to chrome://net-internals/#events

  • See XHRs in console: settings -> console -> check 'Log XMLHttpRequests'.

Console

Command Line API Reference for Chrome

  • $(selector)

    • returns the first element, is alias of docuemnt.querySelector()

  • $$(selector)

    • returns NodeList, is alias of docuemnt.querySelectorAll()

    • NodeList is not array, to convert to array: Array.prototype.slice.call(div_list) or [...div_list]

  • $0 is the selected element

Debug

Console: print and variable

  • dir(object)

  • keys(object)

  • table(data)

      var names = {
      0: { firstName: "John", lastName: "Smith" },
      1: { firstName: "Jane", lastName: "Doe" }
  };
  table(names);

  • store as global variable temp1: right click on an object in the console and press “store as global variable”

Find out events:

  • select element -> Event Listeners: find out existing handler for selected element.

    • for example, with unknown web app, you can find out what's happening after clicking a button.

  • console: monitor(function) outputs when this function is called and what arguments; unmonitor

  • console: monitorEvents(window, "resize")

  • sources -> Event Listener Breakpoints: you can add breakpoints for all kinds of events.

Block

  • Blackbox: on stack, you can also blackbox the whole script.

Node

Chrome Extensions

PreviousKnow Your ToolsNextEditor: VS Code

Last updated