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

Question

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 an ES6 plugin, please take into consideration this plugin uses yarn, web pack, rollupjs, and the question is how to debug this plugin in tandem with these tools.

EDIT 2::- I ran into this same issue again and this time , i am trying to debug a plugin called Glide.js.

Ofcourse i can use the plugin like so::

<div class="glide">
    <div data-glide-el="track" class="glide__track">
        <ul class="glide__slides">
        <li class="glide__slide">
            <img src="img/1.jpg" alt="">
            <span>Slide 1</span>
        </li>
        <li class="glide__slide">
            <img src="img/2.jpg" alt="">
            <span>Slide 2</span>
        </li>
        <li class="glide__slide">
            <img src="img/1.jpg" alt="">
            <span>Slide 3</span>
        </li>
        </ul>
    </div>
</div>

JS code to initialize :

import Glide from '../dist/glide.esm.js';

new Glide('.glide').mount();

My slider works , but what i'd really like to do is debug the code in the src/ folder , how do i go about doing this ?

Answer 1

regardless of the build step, you are always going to be importing a script in the head of an HTML document, this script is the one that the browser is running, and this is the source of truth, debugging this script is no different than debugging any other script.

When developers started to bundle and minify their js files, it became really hard to debug these js files, this is why browsers shipped a feature called source maps, source maps enable you to debug a script as if it was standalone even though it could have been minifed, combined, and transpiled along the way.

Whether or not sourcemaps are included for a certain script will depend on the setup/build. Usually you want these in development, but you don't want them in production.

for example, here is webpack configuration for the sourcemaps https://webpack.js.org/configuration/devtool/#devtool

---

Edit to expand upon the previous answer

I'm going to explain in details here how to debug the glide package, using source-maps, and also how to develop using local packages because it seems from the comments that you also want to know this. of-course here glide is just an example since you wanted to know for this package specifically, but this approach can be used for any other package.

Developing using local packages will enable you to debug code without having to go to index.js file in the dist folder in your node modules.

Using source maps will enable you to see the files as they are originally, line to line.

• Fork the glide package and clone it to your pc, and install dependencies
• Here you can use any example that uses glide, but i set up an example, Fork/clone the following repo https://github.com/sanehab/parcel-glide, and install dependencies
• Now Let's say you want to do some changes in the glide package, and you want to test them before publishing/ or doing a pull request, without developing against the local version this can be a really time consuming.
• Now in order to use the local package there are a lot of ways, for now we are using the simplest way which is to install a package using the absolute path (I'm assuming here that you use a new npm version that is compatible with installing packages using absolute paths). Go to the package.json file in the parcel-glide and change

"@glidejs/glide": "sanehab/glide"

To

"@glidejs/glide": "absolute path for glide package on your system"

Then run npm/yarn install

Now run npm star (in parcel-glide package), you will see the example running, any changes now you do for the glide package should be seen here directly (after you do npm run build in glide package or use watch if you want)

Add a console statement to index.js in glide package to make sure everything is working (and then build using npm run build). - now if you go to the example, and you see the sources, you will find that we have one huge glide js file, and that we have no access in the sources folder for all the files in glide package, for example the ones that are in src/components. In order to have this access we need to add source-maps

Now in glide package go to build/build.js and change

import banner from './banner'
import babel from 'rollup-plugin-babel'

export default {
  output: {
    name: 'Glide',
    banner
  },
  plugins: [
    babel({
      plugins: [
        'external-helpers',
        'transform-object-assign'
      ]
    })
  ]
}

To 

import banner from './banner'
import babel from 'rollup-plugin-babel'

export default {
  output: {
    name: 'Glide',
    banner,
    sourcemap: "inline"
  },
  plugins: [
    babel({
      plugins: [
        'external-helpers',
        'transform-object-assign'
      ]
    })
  ]
}

Run npm run build and now you can access all the files in the sources panel in dev tools, including the individual files of glide package.

There are different types of source maps, inline are the most accurate however they are slowest, different options affect the build/rebuild speed, You want to choose what suits you the best.

Again this is a sum up of what i have also written in my first edit, from the browser point of view it always see js files, if you want to see how a minified, combined, trans-piled, or what so ever a file was before it is processed you need to enable source maps, how you enable them will depend upon the used tool for doing the processing (the build step). It is often easy and you just have to add a property specifying what source maps you want or if you want at all.

Answer 2

Just as you would with any other piece of github hosted code you want to contribute to:

1. Clone the repository at https://github.com/ghosh/micromodal
2. Examine package.json or the documentation for building instructions.

Go ahead and investigate and contribute!

It's even described in detail in the readme:

Development setup

• Clone Github repo $ git clone https://github.com/ghosh/micromodal.git
• Install yarn package manager (Read installation guide)
• Run yarn install in the root folder to install all dependencies
• Run yarn dev to start a dev server. This serves the example directory and live reloads when any files are changed
• [Optional] Run yarn build to build the files for distribution. This is run automatically as a pre-commit hook as well.
• Send us pull request and chill

https://github.com/ghosh/micromodal#development-setup