Best Developer Tools Trick

So to start, I am a Ruby person. I love Ruby and also Ruby on Rails. They are my language and framework of choice. However, like all things, over time the framework will evolve as well as the community.

With the evolution of Ruby on Rails over time, we have seen more and more Javascript added into the mix. We have seen Javascript Front End Frameworks introduced and it paved an entirely different route for us. A route that I don't necessarily agree with, but regardless, we're using more Javascript today than we have ever before.

It wasn't until the addition of StimulusJS did I really start to dive deeper into Javascript. I believe that good practices and sticking as close to the Ruby on Rails core as possible will promote healthy and maintainable applications with as few resources as possible.

Regardless of the path that we choose, Javascript is here to stay (for now), so it is important to know about the tools that we have available to us. Much like puts debugging within Ruby, we have console.log() in Javascript. This will get us pretty far with debugging or building out something within Javascript. However, we get into situations where we are out of our window scope in Javascript and things get a bit more difficult.

Here in lies our best Developer Tool Trick, and I've tested this with both Chrome and Firefox. So let's take a very simple Stimulus Controller where we have one target, and when it connects, we will log the target into our console so we can ensure it is registering properly.

import { Controller } from "stimulus"
export default class extends Controller {
  static targets = ["input"]
  initialize() {  }
  connect() {
    console.log(this.inputTarget)
  }
  disconnect() { }
}

So, when we open the Developer Tools, we will see the console with the logged input.

So everything looks like it is working well. On a very simple case like this, we may continue on coding. However, other times, on more complicated issues, we may want to interact with this object. However, this is where things get to be a bit more difficult. Do we try to grab the element on the page and then follow through our code and recreate what we're trying to do in the Stimulus Controller? On a simple example, this will work. However, if you're trying to use another Javascript library like Tribute, Choices-JS, FullCalendar, etc. it can be very difficult since we don't have access to these libraries in our global scope. Instead, we're importing these into our application within the Stimulus Controller.

So if you find yourself in one of these situations, continue to log to the console the object that you would like to interact with. Then RIGHT CLICK on the object in the console and select Store as global variable

This will create a temporary variable of that object which will now allow you to interact with.

This feature has been around for a few years, but was one that I just happen to stumble upon the other day. It was completely changed the way I debug and approach problems within Javascript.

I hope that this serves as a reminder or a new trick in your toolset! Thanks for reading!