Expose DEV-mode warnings in devtools UI (#20463)

Co-authored-by: Brian Vaughn <bvaughn@fb.com>

packages/react-devtools-shared/src/devtools/views/Settings/DebuggingSettings.js

@@ -19,6 +19,8 @@ export default function DebuggingSettings(_: {||}) {
     breakOnConsoleErrors,
     setAppendComponentStack,
     setBreakOnConsoleErrors,
+    setShowInlineWarningsAndErrors,
+    showInlineWarningsAndErrors,
   } = useContext(SettingsContext);
 
   return (
@@ -36,6 +38,19 @@ export default function DebuggingSettings(_: {||}) {
         </label>
       </div>
 
+      <div className={styles.Setting}>
+        <label>
+          <input
+            type="checkbox"
+            checked={showInlineWarningsAndErrors}
+            onChange={({currentTarget}) =>
+              setShowInlineWarningsAndErrors(currentTarget.checked)
+            }
+          />{' '}
+          Show inline warnings and errors.
+        </label>
+      </div>
+
       <div className={styles.Setting}>
         <label>
           <input
@@ -48,6 +63,10 @@ export default function DebuggingSettings(_: {||}) {
           Break on warnings
         </label>
       </div>
+
+      <div className={styles.ConsoleAPIWarning}>
+        These settings require DevTools to override native console APIs.
+      </div>
     </div>
   );
 }