xBREAKxDOWNx

Dev Tool Essentials


💁 Cant see anything? Not a developer?
Do not worry, move on to the next demo on the main site.



If you are a dev; open the JavaScript Console and take a look at developer tools using console.log assist development responses with Vanilla JavaScript


  1. console.log(p) on the (p): ONCLICK the words at the top of the page, this event changes the paragraph tag to make it green. To see what is changing my javascript. Find and inspect it in the DOM breakon attribute modifications, select and pop on a debugger tool on the line of code that is causing the attribute
  2. console.log(hello): gives you the hello response in console
  3. console/Interpolate: Interpolate passes into your log the second value into the first/ 2nd one uses es6 with backticks
  4. console/style: Style the console result with styling in line css to the text, color, size etc using %c
  5. console.warn(): gives a warning to the stack trace of where the warning is based
  6. console.error(): Provides a stack trace to the error
  7. console.info(): gives a i info for the developer to use to help
  8. console.assert() (1 === 2, 'Assertion failed that is wrong')
  9. console.clear(): clears console of all feedback
  10. console.log(p): gives the paragraph elements
  11. console.dir(p): list of all elements in directory children|methods|nodes...
  12. console.group(`${dog.name}`): pulls together all aspects of (dog) group together in a clear group
  13. console.count(alice): tells you how many times the person has iterated over code
  14. console.time(): counts time to fetch data
  15. console.table(): pops an array of objects with same props name\age ...data into a table