JavaScript30 - 9 14 Must Know Dev Tools Tricks

Howdy y'all and welcome back to another day working on Wes Bos's JavaScript30! Today's challenge was anything but a challenge. Today was just a look at several (probably...14) different dev tool tricks. Unlike his array cardio, this didn't have us really do anything but just watch along as he showed us different ways of interacting with the console. I was actually kind of excited to see this as I almost lost my mind a few weeks ago when I saw him use console.table() in a previous video. I don't know why it wasn't obvious to me that there are many different ways to interact with the console but I was absolutely stunned at the time.

Before even working with different console commands the first thing Wes showed was how to break down a JavaScript function on different actions (subtree modifications, attribute modifications or node removal) and then show the line of code that will be affecting the change in the page. This seems like a pretty cool way to break down different aspects of websites to see exactly how they use JavaScript for interactivity. You can see how they coded specific changes and pause the change before it happens. Well...at least that was my takeaway from that.

    // Regular
    console.log('hello')

    // Interpolated
    console.log('hello I am a %s string', 'poopy')

    // Styled
    console.log('%c I am some great text', 'font-size:50px; background:red; text-shadow: 10px 10px 0 blue')

    // warning!
    console.warn('OH NOOOOOO')

    // Error :|
    console.error('Shit!')

    // Info
    console.info('Crocodiles eat 3-4 people per year')

The next part covered different actions and commands you can use in the console. I'm not entirely sure when you would need to use any of these...but it doesn't mean it isn't interesting. For example: I didn't know you could style the text within the console itself...it's a bit unnecessary but I do think it looks cool. Same thing with the calling of the warning/error/info messages. Yeah it's pretty interesting to do it. But why you would want to do that I can't see why (apart from possibly making a text based game in the console).

Then we went over how to test if the a part of the document contained a specific class with console.assert(). This can also be used to test if something is true of false within the document. If it is wrong it can/will display your own error message. Then we quickly covered how to clear the console with console.clear() which helps clean things up. It could also be useful if you have several different console commands throughout your document and want to clean it up at the very end. This could stop you from having to go through the entire thing and take out, or comment out, each and every console command up to that point.

    // Testing
    const p = document.querySelector('p');

    console.assert (p.classList.contains('ouch'), 'That is Wrong!')

    // clearing
    // console.clear()

    // Viewing DOM Elements
    console.log(p)
    console.dir(p)

    // Grouping together
    dogs.forEach(dog => {
      console.groupCollapsed(`${dog.name}`)
      console.log(`This is ${dog.name}`);
      console.log(`${dog.name} is ${dog.age} years old`)
      console.log(`${dog.name} is ${dog.age *7} dog years old`)
      console.groupEnd(`${dog.name}`)
    })

    // counting
    console.count('Craig')
    console.count('Craig')
    console.count('Billy')
    console.count('Craig')
    console.count('Craig')
    console.count('Craig')
    console.count('Billy')
    console.count('Billy')
    console.count('Craig')

    // timing
    console.time('fetching data');
    fetch('https://api.github.com')
      .then(data => data.json())
      .then(data => {
        console.timeEnd('fetching data');
        console.log(data)
      })

Moving on we also covered console.dir() which can allow you to view the dom elements of a specific thing. There are so many parts of this that I do not recognize or understand, but I imagine that will come in time. The console.group() command I do think has more uses for me at this time. Just the fact that you can take information have have it stored by object or array and their information seems very helpful. Sometimes the raw code for arrays or objects within arrays can be overwhelming but this will automatically organize the information. It's pretty cool actually.

The final two parts of the lesson were with console.count() and console.time() which also seem like specific use cases that I don't think I will need. The counting function is kind of cool being that you can see how many times a specific word/phrase is referenced. It wasn't entirely clear if that was solely being referenced within the console or for the entire document but it seems like it is just within the console. console.time() seems outdated. I say this because there are many different ways to see how quickly you are getting data from another source. Be it from loading a different element from a specific website or going to a website itself. There are many ways to see how quickly things load in but I guess it makes sense to be able to do that in the console as well.

I guess that basically covers today's lesson. It wasn't very exciting but it was informative. I might use some of these commands moving forward but at the moment I am just happy to see other ways of using the console because I have been curious since I first saw him use console.table() so nonchalantly that I still think about it now. Well...that's it for today! Please come back again soon to see: JavaScript 30 - 10 Hold Shift to Check Multiple Checkboxes!