Front-end Pro Tips#2


Welcome to another front end pro tip! In the last tip, we’ve checked out styling our console.log() statements, which helps us to identify a single log statement among multiple log statements. Today’s tip is also about console.

Whether we’re using a framework like React or Vue, or just OG vanilla JS, we will have many methods in many Javascript files that call one another. An example would be a composed component, that has child components, which also have child components, and a function call in one may be propagating to the parent, which might be triggering some API and so on. When we’re debugging to figure out which function calls what, it is desperately needed to check out the stack trace.

What is Stack trace?

To put it simply, stack trace is a list of function calls at a certain point in time during the execution of a program. we can view the stack trace on the developer console of your browser and check it out, and we should definitely have it in our toolbelt.

In complex applications, it may be necessary to track the stack trace of a particular function in order to understand these function calls. While checking the whole stack trace is helpful, an easier way would be to check out the print out the stack trace to your console of a certain function.

Pro Tip #2

We can call console.trace() inside a function to print out the stack trace to the developer console.

I was working on a Vue application and we have an SPA called Dashboard, which has many components that talk to APIs and each other.

I started working on the dashboard, and there was previously written code left by my colleagues and I needed to understand the flow. I have a function called getFavoriteProperties and I suspect this function is triggered by the parent, but I am not sure how anything works.

I added

getFavoriteProperties() {
      console.trace()
      this.properties = [];
	...

I wanted to know who is calling this method which is under a Vue file named SavedProperties.vue , so I added the console.trace() statement. When I run this page. This is what I get

ProTip2SS1

We can see that the method is called by this components mounted() lifecycle hook. Now that I know that I can start further debugging!

Oh but that was easy, we can trace that easily you may say. What if this component was a child component of another component. I have a SavedSearches.vue file which has a getUrl() method.

    getUrl(savedSearch) {

      console.trace()
      let vm = this;
      let city = savedSearch.url.split("/")[3].split("-")[2];
		...

This gives me the following stack trace.

ProTip2SS2

Aha! Now I have a lot of information. getUrl() is called by feed, which is called because of a Vuex action SET_USER which is called by an authenticateUser because of a call in the mounted() hook on Dashboard! Now I have a clear understanding of the call stack and I can take a look at these steps when I’m trying to either fix or implement something.

console.trace() is supported in modern browsers, check out this post by Umar Hansa if you’d like to check it out further. It’s not as obscure as styling your logs, but it may be something you didn’t know you have, do try it out!


Cihan Koseoglu

Learn/Think/Implement is a blog about web technologies, mostly on the front-end. Written or curated by