Custom Modeler plugin, debugging

Developers Modeler
1

Hi all, I created my first Camunda Modeler Plugin starting by official menu-plugin-example.

Unfortunately I don’t know electron very well. I would like to understand what is the way to debug my sorce code.

I opened (F12) developer tool but my source file not showed

I inserted a simple console.log() in the click event but it is not printed into console.

Is there a step by step guide / tutorial for beginner developers?

Please help me

2

Hi @luk3tt0 ,

Welcome to the community and congrats on your first plugin! Unfortunately, there really isn’t much documentation on this, and no tutorials that I’m aware of for debugging. That being said, I’ve just spent some time learning this myself, so maybe I can help out.

This is how I got to the sources for my plugin to do step-by-step debugging:

Screen Shot 2021-12-10 at 8.59.16 AM

If you’re not seeing your plugin here, you may not actually be loading it correctly. Can you share your index.js file so we can see how it’s being loaded?

Best Regards,
dg

3

started from menu-plugin…

'use strict';

module.exports = {
    name: 'MGDLab Plugin Example',
    menu: './menu/menu.js',
    script: './client/client.bundle.js'
};

menu.js

'use strict';

module.exports = function(electronApp, menuState) {
    return [{
        label: 'Hello World',
        enabled: function() {
            return true;
        },
        action: function() {

            const { dialog } = require('electron')

            const options = {
                type: 'question',
                buttons: ['Cancel', 'Yes, please', 'No, thanks'],
                defaultId: 2,
                title: 'Question',
                message: 'Do you want to do this?',
                detail: 'It does not really matter',
                checkboxLabel: 'Remember my answer',
                checkboxChecked: true,
            };

            dialog.showMessageBox(null, options, (response, checkboxChecked) => {
                console.log(response);
                console.log(checkboxChecked);
            });

        }
    }];
};
4

Sorry, I should have been more specific. There’s also an index.js file in the src directory that should look something like:

import { registerBpmnJSPlugin, registerBpmnJSModdleExtension, registerClientExtension } from 'camunda-modeler-plugin-helpers';
import ModelPlugin from './ModelPlugin';
import props from './bpmn-js-extension/props.json';
registerBpmnJSModdleExtension(props); // if you're extending the moddle with specific extensions
registerBpmnJSPlugin(ModelPlugin); // if you're adding to the Modeler itself.
5

My target Is Hello world plugin

1 add a menu item DONE
2 catch click event DONE
3 print message into developer tool console ???
4 debug with developer tool (brackpoints, Watch…)

After this I can improve my plugin

Thanks

6

Hi @luk3tt0,

some time ago I tried out this example plugin: GitHub - camunda/camunda-modeler-plugin-example: Plugin example for the Camunda Modeler. Use this as a starting point for creating your own plugins.

It writes some output on the console and I found the output in my modeler console: camunda-modeler-plugin-example/ExampleExtensionService.js at master · camunda/camunda-modeler-plugin-example · GitHub

Hope this helps, Ingo