浏览器控制台中未显示控制台日志消息

Question

我的 Backbone 视图中有此功能，用于通过后端的 API 创建新对象：

// *** 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`);
},

它调用这个函数：

// 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`);
},

如您所见，我正在尝试检查性能问题。

但是由于某种我无法弄清楚的原因，它没有完成 create() 函数。我从未见过该功能的 PERFORMANACE CHECK。

这是我的控制台输出：

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

浏览器非常快速地写出上述所有控制台消息。

虽然它说它只花了 1.7 毫秒......但实际上只需要大约 3 秒。

所以我不知道为什么要花这么长时间以及为什么它没有写出 create() 函数的性能数字。

我做错了什么吗？

谢谢！

Answer 1

在您的第一个代码段中调用 console.log 之前，您正在从函数中 returning。 return 语句后的任何代码都不是运行:

// 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 });
    // this following code never runs as screate(0 has returned already
    const duration = performance.now() - startTime;
    console.log(`PERFORMANACE CHECK: Location.js - the function create() took ${duration}ms`);
},

Answer 2

更改您的代码：

// 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`);
},

至

// 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;
},

这将允许您的函数在返回创建的值之前显示性能日志。

浏览器控制台中未显示控制台日志消息

console log messages not being shown in browser console

javascript

backbone.js

ecmascript-6