Need help with m2-devtools?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

magento
145 Stars 38 Forks Other 28 Commits 26 Opened issues

Description

Helpful in-browser debugging/inspection tools for the Magento 2 Front-End

Services available

!
?

Need anything else?

Contributors list

# 19,882
TypeScr...
Svelte
github-...
Less
22 commits
# 22,536
CSS
editorc...
npm
React
2 commits
# 137,986
PHP
magento
magento...
magento...
2 commits
# 280,735
magento
Sass
magento...
magento...
1 commit
# 671,355
PHP
HTML
1 commit

Magento 2 DevTools

CircleCI

An extension for Google Chrome (and likely Mozilla Firefox) that exposes helpful debugging utilities for Magento 2 front-ends.

Early Release

This is a very new project with little to no documentation, published to solicit feedback from early adopters. The extension is currently only available through manual installation of the development build, and will be published to the Chrome Web Store at a future time.

Documentation

Usage

Whenever you navigate to a page running Magento 2, a new tab should appear in DevTools from this extension.

In-Progress Features

  • RequireJS Optimizer configuration generator (including Magento module for quick install)
  • RequireJS module registry inspector

Possible Future Features

  • uiComponents Explorer/Inspector (think React/Angular DevTools)
  • m2 Front-End best-practices checks

Running Development Build (Google Chrome)

Prerequisites

  • node.js
    >=
    8.x
  • npm
    >=
    6.x

Setup

  1. Clone the repository
  2. Run
    npm install
  3. Run
    npm start
  4. Navigate to
    chrome://extensions
  5. Enable
    Developer mode
  6. Click
    Load unpacked
  7. Select the
    extension
    folder in the root of this repository

Notes

  • To run a single build, use
    npm run build
    instead of
    npm start
  • If you have Chrome DevTools open when you make a change in
    src
    , you'll need to close and re-open DevTools to see the changes
  • If you need to debug the DevTools page (React app in
    src
    ), open the
    Magento 2
    tab in DevTools, then right click +
    Inspect Element
    . This will open a new instance of the DevTools pointed at the React application.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.