How to unlock the mystical powers of `debugger` and become a JavaScript ninja 🐱👤
What I am about to share with you is an extremely powerful tool. Once mastered this tool can give you insights and power to control and manipulate data within your JavaSript apps in ways you never dreamed possible….
The days of console logging your events are OVER. Put that old tool away and join me on the journey to become a Master Debugger!
In a recent project of mine that I worked on in Phase 3 (JavaScript) of my Flatiron School Software Engineering Bootcamp, we built a fantasy F1 Draft app that would allow you to build your favorite team of F1 Drivers and compete for the title of F1 Owner Champion.
We decided that with the vast amount of teams, drivers, tracks, and stats that it would be best to integrate a third-party API into our app to create our backend seed data for the app to run.
Needless to say, there were a copious amount of data to sift through and organize, so much so that about 4 hours into our project we were regretting not just creating our own data. We were consistently running into issues where we wanted a particular piece of data to be available inside of an instance of a driver, or on a driver's schedule and it became this laborious process to move data around throughout the app.
Enter Debugger.
When we jumped into learning JavaSript I had just finished two phases prior with Ruby and Rails and when debugging issues we had access to use Pry or ByeBug. These are both fantastic tools for running sections of your code and then causing the code to stop at a particular point in time so that you can see what data you have access to at that moment.
However, when we started JavaScript we jumped right into the Chrome DevTools console for just about everything. We used it to test functions and to print “Hello, World’s” and such but then something crazy happened, we started using the console to see what data we had available at a particular moment in our app….
I was so confused. We had these amazing debugging tools that we used ALL THE TIME in Ruby and Rails but for JavaScript, we primarily used console.log, and maybe once or twice we talked about Debugger.
I needed to know more…I had to know if there was a better way…
How to use the debugger:
Step 1: Place the debugger in your code where you need to troubleshoot or see what data you have access to.
In this case, I wanted to see what data is being passed down into the driver variable to make sure I have what I need to render all of the drivers properly.
Once you place the debugger, make sure that your server is running so that you can actually run the debugger in the Chrome DevTools console.
Step 2: Open up Chrome DevTools by pressing Command+Option+C (Mac) or Control+Shift+C (Windows, Linux, Chrome OS)
Step 3: Refresh the browser and perform whatever action on the page that will trigger the debugger to run.
For my demonstration, the debugger will be triggered as soon as I refresh the page because the debugger is placed within the function that renders the drivers to the page.
For you, the circumstances might be different but you can place the debugger just about anywhere in your code to take a deeper look into what’s happening.
Step 4: Open the Console while still in the debugger and play with the data.
Start by calling the event or variable that holds your data and see what you can access inside of it. For me, it is the driver I am passing into this function but for you, it may an event that you are triggering from a button or another action on the page.
You will notice that once I type the variable name into the console followed by a period it gives me a drop-down menu of all the keys/attributes I have access to. Once I call a particular key I can then target nested data within that key and access just about anything I want!
Step 5: Copy that target's path and place it in your code where you need access to that data.
In the clip above you will notice that I have a few ways that I can grab the path I need to use in my application. The first method is after you have found the path you want in the console and returned the date you want you can simply copy and paste that path into your app.
My favorite way to grab the path is the second example which is to access the data inside of the Sources tab in developer tools, locate the date you need and then right-click and choose “Copy property path” and then past that path right where you need it!
In my opinion, this is a much better option than using a console.log because when you need to actually test and play with the data you are able to do so with a Debugger.
I would encourage you to experiment with this on an event created from a button or another event listener when your building your next app. You will be very surprised at all of the data you have access to on the inside of that event.
Happy debugging! 💻