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.