How to debug gdx-teavm?

[KevinGuancheDarias]

Hello, I'm using teavm, it has some bugs, but mostly work, the problem that I'm facing is that Sound interface works properly, but Music doesn't, it can't reproduce audio, it just does nothing, but I have other case, where music just throws an error that hangs my game

Edit: Note that it works in desktop version

I would like to now how to place breakpoints in the teavm implementation, more concretely in the HowlMusic class which is the one having the error

Sample code that produces the error:

@Override
    public void show() {
        stage = new Stage();
        configureTable();
        shapeDrawerHack.load();

        timeInMillis = TimeUtils.millis();

        birdSound = Gdx.audio.newMusic(Gdx.files.internal("music/birds.mp3"));
        birdSound.setLooping(true);
        birdSound.setVolume(settings.getAudio().getDialogueBackgroundVolume());
        birdSound.play();

        dialogueSound = Gdx.audio.newMusic(Gdx.files.internal("dialogue/campaign01.mp3"));
        dialogueSound.setVolume(settings.getAudio().getDialogueVolume());
        dialogueSound.play();

        campaign2 = Gdx.audio.newMusic(Gdx.files.internal("dialogue/campaign02.mp3"));
        campaign2.setVolume(settings.getAudio().getDialogueVolume());
        
        incorrectAnswerSound = Gdx.audio.newSound(Gdx.files.internal("dialogue/incorrect_answer.mp3"));
    }

    @Override
    public void renderInBatch(float delta) {
        sprite.draw(batch);
        if (questionsPhase) {
            var shapeDrawer = shapeDrawerHack.getShapeDrawer();
            var rectangle = PooledRectangle.POOL.obtain();
            shapeDrawer.filledRectangle(
                rectangle.defineRect(50, camera.viewportHeight / 2 - 50, 650, 50),
                Color.BLACK
            );
            FontUtil.writeWithColor(
                game.large,
                Color.GREEN,
                () -> game.large.draw(batch, "I'm getting a LazyInitializationException, why?", 70, camera.viewportHeight / 2 - 10)
            );
            var height = camera.viewportHeight / 2;
            shapeDrawer.filledRectangle(
                rectangle.defineRect(camera.viewportWidth / 2 - 350, height / 2 - 30, 500, 150),
                Color.BLACK
            );
        }
    }

    @Override
    public void render(float delta) {
        if (campaign2.isPlaying()) {
            Color colorText;
            Color colorBackground;
            int colorId = 0x104010ff;
            if (MathUtils.randomBoolean()) {
                colorText = Color.BLACK;
                colorBackground = new Color(colorId);
            } else {
                colorText = new Color(colorId);
                colorBackground = Color.BLACK;
            }
            ScreenUtils.clear(colorBackground);
            batch.begin();
            FontUtil.writeWithColor(
                game.large,
                colorText,
                () -> game.large.draw(batch, "IT'S A VIRUS!!!", 320, camera.viewportHeight / 2 - 10)
            );
            batch.end();
            return;
        }
        var timeSinceStart = TimeUtils.timeSinceMillis(timeInMillis);
        scriptDescriptors.stream()
            .filter(current -> timeSinceStart >= current.getStartTime() && timeSinceStart < current.getEndTime())
            .findFirst()
            .ifPresentOrElse(
                script -> {
                    sprite = new Sprite(script.getTexture());
                    sprite.setSize(Gdx.graphics.getWidth(), Gdx.graphics.getHeight() * 0.63f);
                },
                () -> {
                    questionsPhase = true;
                    sprite = new Sprite(new Texture(Gdx.files.internal("img/campaign/questions_background.jfif")));
                });

        super.render(delta);

        if (timeSinceStart > 500 && (
            Gdx.input.isKeyJustPressed(Input.Keys.SPACE)
                || Gdx.input.isKeyJustPressed(Input.Keys.ESCAPE)
                || Gdx.input.justTouched()
        )) {
            timeInMillis = (long) (Long.MAX_VALUE / 1.3);
            birdSound.stop();
            dialogueSound.stop();
        }

        if (questionsPhase) {
            stage.act();
            stage.draw();
            Gdx.input.setInputProcessor(stage);
        }
    }
private void configureTable() {
        var table = new Table(UI2Skin.INSTANCE.getSkin());
        var buttonStyle = UI2Skin.INSTANCE.getTextButtonStyle();
        table.setFillParent(true);
        table.setWidth(400);
        var answer1 = new TextButton("A", buttonStyle);
        table.add(answer1).pad(10).align(Align.center);
        table.row();
        var answer2 = new TextButton("B", buttonStyle);
        table.add(answer2).pad(0).align(Align.center);
        var answer3 = new TextButton("C", buttonStyle);
        table.row();
        table.add(answer3).pad(0).align(Align.center);
        var answerListener = new TouchDownListener(event -> {
            incorrectAnswerSound.play(settings.getAudio().getDialogueVolume());
            return true;
        });

        answer1.addListener(answerListener);
        answer2.addListener(answerListener);
        answer3.addListener(new TouchDownListener(() -> {
            Gdx.input.setInputProcessor(null);
            TealUtil.JSInvoker.showAlert("foo");
            campaign2.play();
            campaign2.setOnCompletionListener(event -> {
                game.setScreen(new AfterCampaignCinematicsScreen());
            });
        }));

        stage.addActor(table);

Note in the code that neither of the audios play (first two Music just don't fail), also note that incorrectAnswerSound works, not error is displayed until the answer3 touch listener is fired, in which case I get the following error

Uncaught JavaError: Actor: TextButton: C
    at $rt_exception (app.js:965:19)
    at $rt_throw (app.js:954:11)
    at cbgss_Actor_notify (Actor.java:192:1)
    at cbgssu_TextButton.$notify (app.js:29:12)
    at cbgss_Actor_fire (Actor.java:158:1)
    at cbgssu_Label.$fire (app.js:26:12)
    at cbgss_Stage_touchDown (Stage.java:284:1)
    at cbgss_Stage.$touchDown3 (app.js:35:12)
    at cgxgbt_TeaInput_handleMouseEvents (TeaInput.java:161:1)
    at cgxgbt_TeaInput_handleEvent (TeaInput.java:118:1)Caused by: TypeError: Cannot read properties of undefined (reading '0')
    at o.play (<anonymous>:2:9378)
    at cgxgbtwh_HowlMusic_play (HowlMusic.java:22:1)
    at cgxgbtwh_HowlMusic.$play0 (app.js:23:12)
    at cdss_CampaignCinematicScreen_lambda$configureTable$7 (CampaignCinematicScreen.java:203:1)
    at cdss_CampaignCinematicScreen$configureTable$lambda$_9_1_run (CampaignCinematicScreen.java:200:1)
    at cdss_CampaignCinematicScreen$configureTable$lambda$_9_1.$run (app.js:23:12)
    at cdsh_TouchDownListener_touchDown (TouchDownListener.java:28:1)
    at cdsh_TouchDownListener.$touchDown0 (app.js:320022:292)
    at cbgss_InputListener_handle (InputListener.java:64:1)
    at cdsh_TouchDownListener.$handle (app.js:26:12)

Taking a look inside HowlMusic I think the following code is the offending one

@Override
    public void play() {
        if(soundId != -1) {
            soundId = howl.play(soundId); // this is where it crash
        }
        else {
            soundId = howl.play();
        }
    }

Disclaimer: According to chrome dev-tools the music assets are loaded

I have no idea of how to debug this problem, and so maybe find a solution, and create a PR.

Thanks in advance!

[xpenatan]

Hey. Sorry for the delay. Github is very bad at notifying that there was a post here in discussions tab.

Does the issue still persist ?

Can you share a small complete project setup that I can import ? I think I wont be able to get the same error with the code above.

debugging in teavm is using the manual way by going to chrome console, selecting the app.js file and adding breakpoints in javascript.
The backend dont have yet the debugging feature like when using the teavm plugin https://teavm.org/docs/tooling/debugging.html