How to debug the source of a modal plugin written in ES6?

I am trying to edit/understand the source of a modal plugin written in ES6 , link HERE.

<div aria-hidden="true" class="modal micromodal-slide" id="modal-1">
    <div class="modal__overlay" data-micromodal-close="" tabindex="-1">
        <div aria-labelledby="modal-1-title" class="modal__container" role="dialog">
            <header class="modal__header">
                <h2 class="modal__title" id="modal-1-title">Micromodal</h2>
                <button aria-label="Close modal" class="modal__close" data-micromodal-close=""></button>
            </header>


            <main class="modal__content" id="modal-1-content">
                <p>Try hitting the <code>tab</code> key and notice how the focus stays within the modal itself. Also, <code>esc</code> to close modal.</p>
            </main>


            <footer class="modal__footer">
                <button class="modal__btn modal__btn-primary">Continue</button> <button aria-label="Close this dialog window" class="modal__btn" data-micromodal-close="">Close</button>
            </footer>
        </div>
    </div>
</div> 

// Button that triggers the modal
<a data-micromodal-trigger="modal-1" href="#">Toggle</a>

// I am importing the source code for the plugin here 
<script type="module" src="src/index.js"></script>

// File where i initialize the plugin
<script type="module" src="src/main.js"></script>

I initialize the plugin like so:

JS file (main.js)

import MicroModal from './index.js';

MicroModal.init();

Now if i want to debug the source code of the plugin , i directly edit the index.js inside the /src folder , is this the right way to do it or should i use some build version with source maps to debug this plugin ?

EDIT::- This is not a general question on how to debug a ES6 plugin , please take into consideration this plugin uses yarn, webpack, rollupjs and the question is how to debug this plugin in tandem with these tools.

from How to debug the source of a modal plugin written in ES6?