I have the following script in my VueJs2 Store Config, and I suspect that the if statement below is causing extra load, even if not triggered, but I’m unsure:
if(response.status === 204) {
addToastMessage(I18n.t('library.withdrawal.errors.already_noted'), 'is-info');
createDiv();
const btn = document.createElement("button");
addBtnAttributes(btn);
btn.addEventListener("click", function()
{
commit('changeBookLoading', true);
fetchNextTicket(response);
commit('changeBookLoading', false);
});
}
Being new to testing in JS in general, I would like to hear suggestions as to the best methods of benchmarking and debugging this further, any tips appreciated.
Full function:
function loadBook(commit, dispatch, method, id=null) {
commit('changeBookLoading', true);
dispatch(method, id)
.then((response) => {
if(response.status === 204) {
addToastMessage(I18n.t('library.withdrawal.errors.already_noted'), 'is-info');
createDiv();
const btn = document.createElement("button");
addBtnAttributes(btn);
btn.addEventListener("click", function()
{
commit('changeBookLoading', true);
fetchNextTicket(response);
commit('changeBookLoading', false);
});
}
const bookId = response.data[0].localBook.id;
if (bookId !== locationBookId()) {
history.pushState({}, `Book ${bookId}`, `/lib/book/${bookId}`);
}
commit('changeCurrentBookId', ticketId);
commit('changeBookEi', null);
commit('changeCurrentBook', null);
})
.catch((err) => {
// show some global error
})
.finally(() => commit('changeLibraryLoading', false));
}
Advertisement
Answer
You can measure time of the execution of any block of code with:
console.time('some measure');
......
......
console.timeEnd('some measure');
And you will got console output like: some measure: 0.0126953125 ms You just need to put you code between time and timeEnd calls.