magento / M2 Devtools
Licence: other
Helpful in-browser debugging/inspection tools for the Magento 2 Front-End
Stars: ✭ 147
Programming Languages
typescript
32286 projects
Magento 2 DevTools
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.
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
- Clone the repository
- Run
npm install
- Run
npm start
- Navigate to
chrome://extensions
- Enable
Developer mode
- Click
Load unpacked
- Select the
extension
folder in the root of this repository
Notes
- To run a single build, use
npm run build
instead ofnpm 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 theMagento 2
tab in DevTools, then right click +Inspect Element
. This will open a new instance of the DevTools pointed at the React application.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].