Skip to content

Getters and inherited methods missing in DevTools when using new ClassName() pattern #472

Description

@serhumanos

Describe the bug
When using a class instance returned by Alpine.data() (e.g., () => new MyComponent()) instead of a plain object, the DevTools fail to display inherited properties, getters, and methods defined in the class prototype chain. The inspector only shows own enumerable properties of the instance, making it impossible to debug components that rely on inheritance (e.g., extending a base wizard step class).

Device information:
OS: Linux ubuntu based
Browser: Firefox
Extension version: 2,7.4
Alpine.js version: 3.15.12

Code sample

// Base class
class WizardStep {
    get isValid() { return true; }
    submit() { console.log('submitted'); }
}

// Component using inheritance
class MyComponent extends WizardStep {
    init() { this.value = 'test'; }
}

// Registration
Alpine.data('myComponent', () => new MyComponent());

<div x-data="myComponent">
    <!-- DevTools will show 'value' but will NOT show 'isValid' (getter) or 'submit' (method) -->
</div>

Steps to reproduce the behavior:

  1. Create a base class with getters or methods.
  2. Create a child class that extends the base class.
  3. Register the component in Alpine using Alpine.data('name', () => new ChildClass()).
  4. Open Alpine DevTools and inspect the component.
  5. Observe that only properties defined directly on the instance appear; inherited getters and methods are missing.

Expected behavior
The DevTools should traverse the prototype chain and display all enumerable properties, getters, and methods, just as it does when using a plain object or when properties are defined directly on the instance. This is essential for debugging components that use class inheritance patterns.

Additional context
This issue arises because the current backend inspection logic (getAlpineDataInstance and watchComponents) uses Object.entries() or Object.keys() on the instance directly, which does not include non-enumerable properties or items further up the prototype chain. The fix involves iterating through Object.getPrototypeOf() to collect descriptors from the entire chain.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions