mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
AleksanderBodurri
a521571e85
With the introduction of many new devtools extensions APIs, it is now possible to install Angular DevTools in Safari. This commit details how to convert an Angular DevTools build to a Safari web extension with Xcode and `xcrun safari-web-extension-converter ` PR Close #45763
20 lines
1.1 KiB
Markdown
20 lines
1.1 KiB
Markdown
# Installing Angular DevTools in Safari (experimental)
|
|
|
|
### Requirements
|
|
|
|
- Xcode 13+
|
|
|
|
To install Angular DevTools in Safari follow the steps:
|
|
|
|
* Open Safari and make sure the checkbox in `Safari -> Preferences -> Advanced -> Show develop menu in menu bar` is checked.
|
|
|
|
* Make sure the flag in `Develop -> Experimental Features -> Web Inspector Extensions` is checked.
|
|
|
|
* Build Angular DevTools with a chrome configuration with `yarn devtools:build:chrome` this will create an Angular DevTools build in `dist/bin/devtools/projects/shell-browser/src/prodapp`.
|
|
|
|
* Run `xcrun safari-web-extension-converter --macos-only dist/bin/devtools/projects/shell-browser/src/prodapp`. This will convert Angular DevTools into a Safari web extension. This command should open Xcode when it completes.
|
|
|
|
* In Xcode, click the build button and wait for the extension to build. Once this is complete, a system prompt should ask you to open Safari and enable the extension. You'll know the extension is enabled because of an Angular icon present in browser toolbar.
|
|
|
|
* Open any Angular application in dev mode and open Safari DevTools, you should see the Angular Tab there.
|