console log messages not being shown in browser console

Question

I have this function in my Backbone view for creating a new object through an API in the backend:

// *** called when remote hardware signal triggered
createConference: function () {
    var self = this;
    console.log("ScheduleLocationArea.js - createConference() ")
    const startTime = performance.now();
    this.sysLocation.create().then((response) => {
        self.model.collection.add(response);
    });
    const duration = performance.now() - startTime;
    console.log(`PERFORMANACE CHECK: ScheduleLocationArea.js - the function createConference() took ${duration}ms`);
},

It calling this function:

// called from within createConference
async create() {
    console.log("Location.js - create() ")
    const startTime = performance.now();
    return await this.sync('create', this, {
        url: this.create.url(this.id)
    }, { silent: true });
    const duration = performance.now() - startTime;
    console.log(`PERFORMANACE CHECK: Location.js - the function create() took ${duration}ms`);
},

As you can see, I'm trying to check performance issues.

But for some reason that I cant figure out, it's not finishing the create() function. I never see the PERFORMANACE CHECK for that function.

Here is my console output:

ScheduleLocationArea.js - createConference() 
Location.js:22 Location.js - create() 
ScheduleLocationArea.js:269 PERFORMANACE CHECK: ScheduleLocationArea.js - the function createConference() took 1.7000000476837158ms

The browser writes out all the above console messages really fast.

And even though it says it only took 1.7ms...it actually takes about 3 seconds.

So I can't figure out whats taking so long and why it's not writing out the performance numbers for the create() function.

Is there something I'm doing wrong?

Thanks!

Answer 1

Change your code from:

// called from within createConference
async create() {
    console.log("Location.js - create() ")
    const startTime = performance.now();
    return await this.sync('create', this, {
        url: this.create.url(this.id)
    }, { silent: true });
    const duration = performance.now() - startTime;
    console.log(`PERFORMANACE CHECK: Location.js - the function create() took ${duration}ms`);
},

to

// called from within createConference
async create() {
    console.log("Location.js - create() ")
    const startTime = performance.now();
    const newUrl = await this.sync('create', this, {
        url: this.create.url(this.id)
    }, { silent: true });
    const duration = performance.now() - startTime;
    console.log(`PERFORMANACE CHECK: Location.js - the function create() took ${duration}ms`);
    return newUrl;
},

This will allow your function to show the performance logs before returning the created value.