How to "pre-debug" a non-existing object?

[Santiago]

Hello,

Title could sound weird, but idk very well how to express it. I'm working on a proyect that has an inicial player just with an arcade body, and I'm trying to add invisible sprites to adjust the movements with animations cause arcade allows just one body, and those sprites will be being added and destroyed constantly, so, for now I need to debug the body of those invisible sprites while programming, but I can't do it because those ones don't exist in the game at first, I tried some if clauses on render function but couldn't get it.

create: function(){
        this.vShape = new Phaser.Signal;
        this.vShape.add(this.shape);

},

update: function(){

if (this.Q.isDown) {

            this.viking.animations.play('attack');

        } else {

            this.viking.animations.play('idle');
        }
            if (this.vikingo.animations.currentFrame.name == "attack_1") {
            this.vShape.dispatch();
        }
},

shape: function () {

        this.p = game.add.sprite(350, 89, 'attack1');
        this.p.alpha = 0.1;
        this.p.rotation = -113.6;
    },

render: function () {

        game.debug.body(this.vikingo);
        game.debug.spriteBounds(this.p);       
        
    }
};

 Last I tried was creating an undefined variable this.p in create funcion and checking in render function if it was undefined do nothing else if it wasn't (once replaced with shape) execute game.debug.spriteBounds(this.p); but didin't work, it was this way:

create: function () {
       this.p;
},

render: function () {
      if(this.p != undefined)game.debug.spriteBounds(this.p);
}

thanks for helping

[Santiago]

Nobody can help?