bubble.io - 如何找出我的 Bubble.io 插件有什么问题

Question

我正在尝试为 Bubble.io 构建一个多色进度条插件，并且基本上学习如何在气泡中构建插件。

我目前被卡住了，因为我的插件代码似乎没有执行，我不确定为什么以及在哪里可以找到相关日志来告诉我我的插件是否存在特定问题。

我创建的第一个元素是一个进度条，它有 2 种颜色，因此采用 2 个百分比和 2 种颜色，然后使用背景颜色和 css 线性渐变创建一个进度条来显示当前进度。

一般性质：

田野：

这是我的初始化功能

function (instance, context) {
    console.log("progress-bar initialize script")
    
    
    let defaultCss = {
        height: "52px",
        width: "99%",
        border: "2px solid #000",
        "text-align": "center",
        color: "#fff",
        "font-size": "20px",
    }

    instance.canvas.empty()
    let id = "arj-progress-bar" + Math.round(Math.random() * 1000) + 1
    let element = $('<div id="' + id + '" class="arj-progress-bar"></div>')

    // add element to canvas
    instance.canvas.append(element)
    instance.data.element = element

    // add default css
    Object.keys(defaultCss).map(function (k) {
        element.css(k, defaultCss[k])
    })
}

这是更新功能

function (instance, properties, context) {
    console.log("progress-bar update script")
    // update colors
    let gradient = 0
    let p1 = properties.percentage1
    let p2 = p1 + properties.percentage2
    let p3 = (p1 + properties.percentage2)

    let backgroundCss = 'linear-gradient(to right, '
        + properties.color1
        + ' ' + (p1 - gradient) + '%, '
        + properties.color2
        + ' ' + p1 + '% ' + (p2 - gradient) + '%, ' +
        'white ' +
        '' + p3 + '%)'

    console.log("background", backgroundCss)
    instance.data.element.css(
        'background',
        backgroundCss
    )
}

预览功能：

function(instance, properties) {
    console.log("progress-bar preview", "instance", properties)
    instance.canvas.append("<p> Mutli Color Progress Bar 2 </p>")
}

在气泡应用程序（我正在测试插件的地方）上，我已经加载了插件并且可以看到正在执行的预览功能。

在预览页面（尝试测试我的插件）上，我既看不到我的进度条，也看不到导航器控制台中的控制台日志语句，也没有错误通知，所以不知道如何继续。

我在本地测试了插件代码，这两个函数似乎工作正常，尤其是它们非常简单。

非常感谢任何帮助和指导