Design Language inspector
beta

This extension helps debug common Design Language issues.

  • done Determine page's DL version
  • done Inject latest DL
  • done See an overlay of the grid system
  • done Diagnose common layout issues
  • done Examine vertical-offsets
  • done View page wireframe

Installation

If you are experiencing any installation issue please try installing directly from our source repo.

Chrome

  1. Download the zip file from the link below
  2. Unzip it
  3. Open Chrome to chrome://extensions
  4. Drag and drop the crx file into the extensions window and install
  5. Browse to any page using The Design Language

Firefox

  1. Click the link below
  2. When prompted click Add
  3. Browse to any page using The Design Language

Chrome

  1. Open Chrome to chrome://extensions
  2. Drag and drop extension .crx into the window
  3. Browse to any page using The Design Language

Firefox

  1. In Firefox, open the Firefox browser menu button and click Add-ons.
  2. From the settings cog, chooseInstall Add-on From File and select the extension xpi
  3. Browse to any page using The Design Language

Other options

  • Attach the compiled ./css/*.css files to your dev build, or paste it into dev tools on the fly
  • Change colors, options, and depth in `scss/*.scss`, watch and compile css by running npm run dev
  • Install your custom unpacked extension with Chrome in Developer Mode, or Firefox in Temporary Add-on mode.
  • Compile your own extension using npm run build. (You'll need a Firefox/Chrome account, API access, and a public/private key pair)