From 4070049d8a84364dadcbd5e40db1ea12255b06cb Mon Sep 17 00:00:00 2001 From: 4javier <4javiereg4@gmail.com> Date: Fri, 13 May 2022 12:48:42 +0200 Subject: [PATCH] docs(devtools): add firefox extension references (#45985) add a link to recent deployed firefox extension and use less specific terminology PR Close #45985 --- aio/content/guide/devtools.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/aio/content/guide/devtools.md b/aio/content/guide/devtools.md index 5cee53dd8d8..92adb7999ce 100644 --- a/aio/content/guide/devtools.md +++ b/aio/content/guide/devtools.md @@ -9,9 +9,9 @@ Angular DevTools supports Angular v12 and later. -You can find Angular DevTools in the [Chrome Web Store](https://chrome.google.com/webstore/detail/angular-developer-tools/ienfalfjdbdpebioblfackkekamfmbnh). +You can find Angular DevTools in the [Chrome Web Store](https://chrome.google.com/webstore/detail/angular-developer-tools/ienfalfjdbdpebioblfackkekamfmbnh) and in [Firefox Addons](https://addons.mozilla.org/en-GB/firefox/addon/angular-devtools/). -After installing Angular DevTools, find the extension under the Angular tab in Chrome DevTools. +After installing Angular DevTools, find the extension under the Angular tab in your browser DevTools.
@@ -92,7 +92,7 @@ To navigate to the previous search match, press `Shift + Enter`. ### Navigate to the host node To go to the host element of a particular component or directive, find it in the component explorer and double-click it. -Chrome DevTools opens the Elements tab and selects the associated DOM node. +Browsers' DevTools opens the Elements tab in Chrome or the Inspector one in Firefox, and selects the associated DOM node. ### Navigate to source @@ -107,7 +107,7 @@ After you select a particular component, click the icon at the top-right of the ### Update property value -Like Chrome DevTools, the properties view lets you edit the value of an input, output, or another property. +Like browsers' DevTools, the properties view lets you edit the value of an input, output, or another property. Right-click on the property value. If edit functionality is available for this value type, you'll see a text input. Type the new value and press `Enter`. @@ -131,9 +131,9 @@ Type `$ng0` to get a reference to the instance of the currently selected compone ### Select a directive or component -Similar to Chrome DevTools, you can inspect the page to select a particular component or directive. -Click the ***Inspect element*** icon at the top left corner within Devtools and hover over a DOM element on the page. -Angular DevTools recognizes the associated directives and/or components and lets you select the corresponding element in the Component tree. +Similar to browsers' DevTools, you can inspect the page to select a particular component or directive. +Click the ***Inspect element*** icon at the top left corner within Angular DevTools and hover over a DOM element on the page. +The extension recognizes the associated directives and/or components and lets you select the corresponding element in the Component tree.