Debugiing Lit Element

Question

I wanted to debug lit decorators in chrom inspect. I am using webpack plugin. I have followed steps https://lit.dev/docs/tools/development/#development-and-production-builds and enabled the dev mode. Still I am getting minimized file version in chrom inspect, source code is not hitting. Please help on this.

`

import {LitElement, html} from 'lit';
import {customElement, property, queryAssignedNodes} from 'lit/decorators.js';



@customElement("my-element")
class MyElement extends LitElement {
  
  @queryAssignedNodes({slot: 'list'})
  listItems!: Array<HTMLElement>;

  @property({type: String})
  name = 'World';

  @property({ type: Number })
  count = 0;

  @property({attribute: false})
  article = {
    title: 'My Nifty Article',
    text: 'Some witty text.',
  };

  headerTemplate() {
    console.log(this.renderRoot);
    let shadowRoot = this.renderRoot;
    console.log(shadowRoot.querySelector('slot[name="list"]'));
    return html`<header>${this.article.title}</header>`;
  }

  articleTemplate() {
    return html`<article>${this.article.text}</article>`;
  }

  footerTemplate() {
    return html`<footer>Your footer here.</footer>`;
  }

  _onClick() {
    this.count++; 
    const nodes = [...this.listItems];
    console.log(nodes);
  }

  foo() {
    return html` <h1>Hello, ${this.name}!</h1>
    <button id = "1" onclick="${this._onClick}">
      Click Count: ${this.count}
    </button>
    <slot name="list"></slot>`;
  }

  render() {
    return html`
      ${this.headerTemplate()}
      ${this.articleTemplate()}
      ${this.footerTemplate()}
      ${this.foo()}
    `;
  }
}

`

Note: I am trying to debug @queryAssignedNodes decorator.

I am getting minimized file version in chrom inspect, source code is not hitting.