From 79a8b3c04920fa8170a388df5fa7367d080d207a Mon Sep 17 00:00:00 2001
From: Matthieu Riegler <kyro38@gmail.com>
Date: Mon, 6 Feb 2023 15:38:59 +0100
Subject: [PATCH] docs: Specify when an app is debuggable by the DevTools.
 (#48970)

DevMode is when the ng debug object is available. `Optimization:true` is responsible for treeshaking everything behind `ngDevMode`.

Fixes #48968

PR Close #48970
---
 aio/content/guide/devtools.md                                 | 2 +-
 devtools/projects/ng-devtools/src/lib/devtools.component.html | 4 ++--
 devtools/projects/ng-devtools/src/lib/devtools.component.scss | 1 +
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/aio/content/guide/devtools.md b/aio/content/guide/devtools.md
index 09ef2a15a00..03f914e1953 100644
--- a/aio/content/guide/devtools.md
+++ b/aio/content/guide/devtools.md
@@ -1,7 +1,7 @@
 # DevTools Overview
 
 Angular DevTools is a browser extension that provides debugging and profiling capabilities for Angular applications.
-Angular DevTools supports Angular v12 and later.
+Angular DevTools supports Angular v12 and later when compiled with the [optimization configuration option](guide/workspace-config#optimization-configuration) disabled (<code>{optimization:false}</code>). 
 
 <div class="video-container">
 
diff --git a/devtools/projects/ng-devtools/src/lib/devtools.component.html b/devtools/projects/ng-devtools/src/lib/devtools.component.html
index 4fa3eadd942..678d0d82458 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools.component.html
+++ b/devtools/projects/ng-devtools/src/lib/devtools.component.html
@@ -11,8 +11,8 @@
       </ng-template>
     </ng-container>
     <ng-template #angularIsInProdMode>
-      <p class="text-message">
-        We detected an application built with production configuration. Angular DevTools only supports builds where <code>optimization</code> is set to <code>false</code>.
+      <p class="text-message" title="A dev build is when the `optimization` flag is set to `true` in the angular.json config file.">
+        We detected an application built with production configuration. Angular DevTools only supports development build.
       </p>
     </ng-template>
   </ng-container>
diff --git a/devtools/projects/ng-devtools/src/lib/devtools.component.scss b/devtools/projects/ng-devtools/src/lib/devtools.component.scss
index e1802d9ac55..d652ad40ceb 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools.component.scss
+++ b/devtools/projects/ng-devtools/src/lib/devtools.component.scss
@@ -66,6 +66,7 @@
   font-size: 1.2em;
   padding: 5px;
   text-align: center;
+  cursor: help;
 
   .info-icon {
     display: inline-block;