From a521571e85fc0e740e7e30c10aca5d1dcbcd8e89 Mon Sep 17 00:00:00 2001 From: AleksanderBodurri Date: Mon, 25 Apr 2022 22:11:17 -0400 Subject: [PATCH] docs(devtools): create documentation on installing Angular DevTools in Safari (#45763) 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 --- devtools/docs/safari.md | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) create mode 100644 devtools/docs/safari.md diff --git a/devtools/docs/safari.md b/devtools/docs/safari.md new file mode 100644 index 00000000000..3912bda2650 --- /dev/null +++ b/devtools/docs/safari.md @@ -0,0 +1,19 @@ +# 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.