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

@@ -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">
 

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>

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;