Search code examples
javascriptmoduledevtools

Is it possible to import variables from ES6 modules directly in Chrome DevTools console for Debugging purpose? (in pure HTML, JS project)

I'm working on a web application utilizing ES6 modules in Chrome by using type="module" in my HTML script tag.

While debugging in Chrome DevTools, I encountered an issue. Initially, I attempted to directly access a variable named emmei for debugging purposes (as we usually do in the console for normal JS files without type="module"), but encountered an error message. Realizing that ES6 modules have their own scope and do not add their variables to the global scope, I explored alternative approaches.

My next attempt was to import the variable first in the Developer console and then access it. So, I executed:

import emmei from './app.js';

in the DevTools console window but encountered another error.

My notion is that if I could somehow find the correct path to where the app.js has been loaded in the Chrome browser, then we can import our variables from this file.

Again I tried with import emmei from './Sources/app.js' but to no success.

QUESTION:

Given that ES6 modules have their own scope and don't add variables to the global scope, I'm now wondering if there's a way to find the correct path to import variables from ES6 modules in Chrome DevTools?

enter image description here

enter image description here

enter image description here

UPDATE

With help from Mr. @Bergi in the comment, we are able to get access to the Module (I believe a constructor) using this syntax in the DevTools console.

await import('./app.js')

We are very close now, Need to somehow be able to get our exported variables from the app.js now.

I tried with .then() [since await (async function returns promise)], but not yet able to get the variable extracted.

Any ideas to share here?

Module extraction image

class Doctor {
  constructor(name, age) {
    this.name = name
    this.age = age
  }

  getDetails() {
    console.log(`My name is :${this.name} & I am ${this.age} years old`)
  }
}

// Surgeon is a Doctor --- is-a relationship (a good candidate for inheritance)
class Surgeon extends Doctor {
  constructor(name, age, profession) {
    super(name, age)
    this.profession = profession
  }

  specialization() {
    console.log(`I am a ${this.profession}`)
  }
}

const emmei = new Surgeon('emmei', 32, 'heart specialist')

export default emmei
  <body>
    <div class="block bcg-black"></div>
    <div class="block">
      <div class="container">
        <img
          src="https://randomuser.me/api/portraits/men/75.jpg"
          alt="random user"
          class="user-img"
        />

        <p class="user-title">My name is</p>
        <p class="user-value">Emmei White</p>

        <div class="values-list">
          <!-- icons goes here -->
          <button
            class="icon active"
            data-label="name"
          >
            <span class="far fa-user"></span>
          </button>

          <button
            class="icon"
            data-label="email"
          >
            <span class="far fa-envelope-open"></span>
          </button>
        </div>

        <button
          class="btn"
          type="button"
        >
          random user
        </button>
      </div>
    </div>
    <script
      type="module"
      src="./app.js"
    ></script>
  </body>

Solution

  • With the help of Mr. @Bergi, we were able to figure our how to access the Module directly in the console for debugging purposes.

    Here are the steps to do this in the console. This is for the default exports:

    const module = await import('./app.js');
const emmei = module.default;
console.log(emmei);

    enter image description here

    And for the named exports we do:

    // Access named exports using destructuring
const { image, url } = module
console.log(image,url)

    enter image description here