Office.js outlook add-in issue

Question

I'm trying to get the Body in Outlook and then update/set it with categories. My issue is this - when I debug it - it works fine. But when I don't debug from function to function - it gets all the way to the last function and just stops - updateBody(). What's really strang is if I remove the breakpoints on each function and just set a breakpoint on last function - never gets hit, but console will write out "Starting update body". All the console.logs are writing out data as expected. Not sure what is going on. Appreciate any help! Thanks.

"use strict";
var item;
var response;
var tags;
var updatedBody;

Office.initialize = function () {
    $(document).ready(function () {
        // The document is ready
        item = Office.context.mailbox.item;
        debugger;
        getBodyType();

    });
}

function getBodyType() {
    item.body.getTypeAsync(
        function (resultBody) {
            if (resultBody.status == Office.AsyncResultStatus.Failed) {
                write(resultBody.error.message);
            } else {
                response = resultBody;
                console.log('Successfully got BodyType');
                console.log(response.value);
                getCategories();

            }
        });

}

function getCategories() {
    tags = "";
    // Successfully got the type of item body.
    // Set data of the appropriate type in body.
    item.categories.getAsync(function (asyncResult) {
        if (asyncResult.status === Office.AsyncResultStatus.Failed) {
            console.log("Action failed with error: " + asyncResult.error.message);
        } else {
            var categories = asyncResult.value;
            console.log("Categories:");
            categories.forEach(function (item) {
                var tag = item.displayName;
                tags += '#' + tag.replace(/\s/g, "") + ' ';
            });
            console.log('Successfully got tags');
            console.log(tags);
            getBody();

        }
    });
}

function getBody() {
    var body = "";
    updatedBody = "";
    console.log("Starting get body");
    if (response.value == Office.MailboxEnums.BodyType.Html) {
        item.body.getAsync(
            Office.CoercionType.Html,
            { asyncContext: "This is passed to the callback" },
            function (result) {
                //Replace all the # tags and update again. 
                body = result.value.replaceAll(/#(\w)+/g, "").trimEnd();

                var domParser = new DOMParser();
                var parsedHtml = domParser.parseFromString(body, "text/html");

                $("body", parsedHtml).append("<div>" + tags + "</div>");
                var changedString = (new XMLSerializer()).serializeToString(parsedHtml);
                if (changedString != "") {
                    updatedBody = changedString;
                }
                console.log(updatedBody);
                updateBody();
            });
    }
}

function updateBody() {
    console.log("Starting update body");
    item.body.setAsync(
        updatedBody,
        { coercionType: Office.CoercionType.Html },
        function (result2) {
            console.log("Body updated");
        });
}

1. Image - With breakpoints on each function - works as expected
2. Image - Without breakpoints - gets to updateBody() function. But the string updatedBody isn't logged. It somehow skips over that even though it's called before updateBody() on getBody()
3. Image - Same code run via Script Lab - works just fine as well.