Dev_Tools.md

• Elements

  • can drag html element to new position
  • can delete or add entire html element
  • can add an id
  • click the pin to access hover/active/focus
  • click line number to access css file within chrome tools, make your changes and then right click => save as in the editing space

• Console

  • console.assert(1 == 1)
    • will either continue or throw an error
  • console.assert(Calendar.countEvents() == 3)
  • $(‘#date’)[0] => will find the first element within the date id
  • inspect($(‘#date’)[0])
  • $0 will bring up the element that you clicked on in elements ex: click it, enter console, $0.remove()
  • click on the “pause with exceptions” button: pause sign inside stop sign
    • will stop on any error & can hover over values to see what they are
  • pretty print mode => brackets on bottom left within sources
    • will make a minified file readable
  • click on number next to line to pause on specific line. That line will not run, but you can play
  • dot with semi-circle arrow will run one line at a time

Resources - hold shift and then refresh if everything is cached, or go incognito, or settings(gear) disable caching - response stats is 304 if cached, 200 if normal - watefall color based on file type

Performance - minify (remove whitespace for less characters) - combine, only have to make one request - closure compiler - enter links for each file, compile, download, insert into app (single line in head) - sizing images correctly

Profile - pinpointing functions - collect Javascript CPU profile - figure out memory leaks. - Take Peak snapshot - click record and then change Summary to Comparison