Skip to content
Helpful in-browser debugging/inspection tools for the Magento 2 Front-End
TypeScript CSS PHP JavaScript HTML
Branch: master
Clone or download
DrewML Improvements to m2 store detection (#52)
## This PR is a:

- [ ] New feature
- [ ] Enhancement/Optimization
- [ ] Refactor
- [X] Bugfix
- [ ] Test for existing code
- [ ] Documentation

## Summary

When this pull request is merged, it will make the extension work for stores with signed static files disabled and the RequireJS static head block moved to the body.

## Additional information
Latest commit 81ca5dc Dec 22, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci Add config for CircleCI Nov 30, 2018
.github Fix PULL_REQUEST template checkboxes (#10) Dec 3, 2018
Magento_BundleConfig Add php/xml files to scripts/licenseHeaderCheck.js (#50) Dec 21, 2018
docs Add more clarity in post-bundling instructions (#29) Dec 10, 2018
extension Improvements to m2 store detection (#52) Dec 23, 2018
scripts Add php/xml files to scripts/licenseHeaderCheck.js (#50) Dec 21, 2018
src Force white background for dark themes (#41) Dec 11, 2018
.babelrc
.editorconfig Initial Commit Nov 30, 2018
.gitignore Initial Commit Nov 30, 2018
.prettierignore Add Magento_BundleConfig to .prettierignore (#23) Dec 5, 2018
LICENSE Initial Commit Nov 30, 2018
LICENSE_AFL Initial Commit Nov 30, 2018
README.md Add note about early release to README.md (#15) Dec 4, 2018
composer.json Add composer.json (#38) Dec 12, 2018
jest.config.js Extracted page scraping loop from react component to separate module,… Dec 4, 2018
package-lock.json UI Updates, Docs, bug fixes (#25) Dec 7, 2018
package.json UI Updates, Docs, bug fixes (#25) Dec 7, 2018
prettier.config.js Initial Commit Nov 30, 2018
screenshot.png Updates to docs (#3) Nov 30, 2018
tsconfig.json Initial Commit Nov 30, 2018
webpack.config.js UI Updates, Docs, bug fixes (#25) Dec 7, 2018

README.md

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.
You can’t perform that action at this time.