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

  • debugger;
  • nif

Chrome Extensions

results matching ""

    No results matching ""