Files
AleksanderBodurri c7eddc24da refactor(devtools): consolidate devtools global styles into 1 file (#49001)
Previously the DevTools demo app and browser app had duplicated styles in their respective styles.scss files.

This commit creates a global styles.scss that is imported with sass @use into the demo and browser app styles.scss files. This will prevent any issues where css changes to one are missed in the other. Also reduces duplication of material css theme definitions by consolidating it inone place. The respective styles.scss files for the demo app and browser app continue to exist incase those need environment specific css. For example the browser app requires that height: 100% is set on a document in order to render properly in a browsers devtools tab.

PR Close #49001
2023-02-14 20:25:23 +01:00
..

Angular DevTools

Angular DevTools is a browser DevTools extension for debugging and profiling Angular applications.

Installing and Running locally

To setup your local development environment for Angular DevTools, perform the following steps:

git clone git://github.com/angular/angular
cd angular
yarn
yarn run devtools:devserver

Publish Angular DevTools

To publish Angular DevTools to Firefox or Chrome stores:

  1. Update the version of the corresponding manifest file. Currently, Angular DevTools uses different versioning compared to the rest of the packages within the monorepo.
  • manifest.chrome.json for Chrome
  • manifest.firefox.json for Firefox
  1. Build the extension:
  • yarn devtools:build:chrome for Chrome
  • yarn devtools:build:firefox for Firefox
  1. Find the extension production assets in dist/bin/devtools/projects/shell-browser/src/prodapp relative to the root of the Angular monorepo
  2. Zip the files in the directory
  3. Upload them to the corresponding store

Firefox

  1. Go to the Firefox Addons page
  2. For email enter devrel@angular.io
  3. Find the password on Valentine
  4. Setup Google Authenticator with the 2FA QR code. You can find the QR code on Valentine

Chrome Web Store

  1. Go to the extension page
  2. Make sure your email is part of the Google Group we use for publishing the extension
  3. Navigate to "Developer Dashboard"
  4. Enter your account credentials
  5. You should be able to change the publisher to "Angular"