Elgato_dark/angular
1
0
Fork 0
mirror of https://github.com/angular/angular synced 2026-05-24 09:28:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1
angular/devtools
History
AleksanderBodurri dd3dac9cc9 refactor(devtools): implement iframe support for Angular DevTools' browser code (#53934) 
Modifies the messaging layer of devtools to allow for switching communication between frames on a page. When served as a browser extension.

Design:
- When a page renders, DevTools installs a content script onto it through it's manifest file. The all_frames option is used here to install this script onto every frame in a page.
- When Angular is detected, the content script will install a backend script into it's frame.
- Each content script / backend script pairing is kept track of in the background script. This pairing represents an angular devtools context in a particular frame.
- Angular DevTools is able to ask the background script to list each frame that has been registered on a page.
- Angular Devtools is able to ask the background script to "enable" the connection on a particular frame. This enables the messaging between the content script <-> background script <-> devtools page

Limitations:
- The `inspectedWindow.eval` API is only able to target frames by frameURL. This means some features that integrate with Chrome DevTools like inspect element and open source will not be available when inspecting frames that do not have a unique url on the page.

PR Close #53934
2024-02-14 17:15:25 -08:00
..
cypress refactor(devtools): migrate devtools to prettier formatting (#53945) 2024-01-19 19:09:54 +01:00
docs refactor(devtools): remove support for v11 and older versions of Angular (#45883) 2022-05-05 15:28:42 -07:00
projects refactor(devtools): implement iframe support for Angular DevTools' browser code (#53934) 2024-02-14 17:15:25 -08:00
src refactor(devtools): migrate to standalone (#53998) 2024-01-23 09:53:24 +01:00
tools build(devtools): prevent underscores from being added at build time (#53921) 2024-01-18 10:22:12 +01:00
.gitignore refactor(devtools): prepare codebase for migration to angular/angular repo 2021-11-21 20:23:18 -05:00
BUILD.bazel refactor(devtools): consolidate devtools global styles into 1 file (#49001) 2023-02-14 20:25:23 +01:00
cypress.json refactor(devtools): bring the angular devtools directory into the root bazel workspace 2022-01-26 16:35:31 -05:00
DEVELOPING.md docs(devtools): update development docs (#53948) 2024-01-16 19:17:18 -08:00
packages.bzl refactor(devtools): bring the angular devtools directory into the root bazel workspace 2022-01-26 16:35:31 -05:00
README.md docs(devtools): update development docs (#53948) 2024-01-16 19:17:18 -08:00
styles.scss feat(devtools): Implement initial DI debugging features in devtools (#51719) 2023-10-10 13:10:50 -07:00
tsconfig.json refactor(devtools): Add hydration informations (#53910) 2024-01-30 20:03:14 +00:00
tsconfig.spec.json refactor(devtools): prepare codebase for migration to angular/angular repo 2021-11-21 20:23:18 -05:00
tslint.json build(devtools): disable the "Rebase PR on target branch" circleci job so that the PR that merges the unrelated history of rangle/angular-devtools can be successfully merged into angular/angular 2022-01-26 16:35:30 -05:00

README.md

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, see DEVELOPING.md

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"