Console Usage Tutorial


  1. Launch in browser and load developer tools (usually 'F12 will do it')
  2. Notice console logs
  3. Type 'a' in the console and press enter, the value will show
  4. Type 'window.baz' to see the value in baz
  5. This also works if you just type 'baz'
  6. Try changing values or enter formulas into the console and press enter to see the results
  7. Type a jQuery object e.g. '$('a')' to see results or try '$('#li_style')'
  8. Type a class object like '$('#li_style').html'
  9. Type 'document.querySelectorAll('a')' then try 'document.querySelectorAll('li').length'
    - Don't forget to click the dropdown button on the console output to see the class details
  10. You can also try things like 'document.querySelectorAll('li')[0]'
  11. Try 'document.body.contentEditable=true' to make the page content editable
  12. To get lots of information 'console.log('window', window, 'body', document.body)'
  13. Events can be checked by 'getEventListeners($('#frm_reset'))'


Sample Form

Enter text: