DebuggingSettings() — react Function Reference

Architecture documentation for the DebuggingSettings() function in DebuggingSettings.js from the react codebase.

Function javascript BabelCompiler Validation

Entity Profile

BabelCompiler→ Validation→ DebuggingSettings() — react Function Reference

Dependency Diagram

graph TD
  65c09e16_b09a_f3c2_ebe5_ad2089ddc6ea["DebuggingSettings()"]
  eee1b576_c90e_a448_c010_79c8672c6ac5["DebuggingSettings.js"]
  65c09e16_b09a_f3c2_ebe5_ad2089ddc6ea -->|defined in| eee1b576_c90e_a448_c010_79c8672c6ac5
  style 65c09e16_b09a_f3c2_ebe5_ad2089ddc6ea fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-shared/src/devtools/views/Settings/DebuggingSettings.js lines 23–168

export default function DebuggingSettings({
  hookSettings,
  store,
}: Props): React.Node {
  const usedHookSettings = use(hookSettings);

  const [appendComponentStack, setAppendComponentStack] = useState(
    usedHookSettings.appendComponentStack,
  );
  const [breakOnConsoleErrors, setBreakOnConsoleErrors] = useState(
    usedHookSettings.breakOnConsoleErrors,
  );
  const [hideConsoleLogsInStrictMode, setHideConsoleLogsInStrictMode] =
    useState(usedHookSettings.hideConsoleLogsInStrictMode);
  const [showInlineWarningsAndErrors, setShowInlineWarningsAndErrors] =
    useState(usedHookSettings.showInlineWarningsAndErrors);
  const [
    disableSecondConsoleLogDimmingInStrictMode,
    setDisableSecondConsoleLogDimmingInStrictMode,
  ] = useState(usedHookSettings.disableSecondConsoleLogDimmingInStrictMode);

  useEffect(() => {
    store.setShouldShowWarningsAndErrors(showInlineWarningsAndErrors);
  }, [showInlineWarningsAndErrors]);

  useEffect(() => {
    store.updateHookSettings({
      appendComponentStack,
      breakOnConsoleErrors,
      showInlineWarningsAndErrors,
      hideConsoleLogsInStrictMode,
      disableSecondConsoleLogDimmingInStrictMode,
    });
  }, [
    store,
    appendComponentStack,
    breakOnConsoleErrors,
    showInlineWarningsAndErrors,
    hideConsoleLogsInStrictMode,
    disableSecondConsoleLogDimmingInStrictMode,
  ]);

  return (
    <div className={styles.SettingList}>
      <div className={styles.SettingWrapper}>
        <label className={styles.SettingRow}>
          <input
            type="checkbox"
            checked={appendComponentStack}
            onChange={({currentTarget}) =>
              setAppendComponentStack(currentTarget.checked)
            }
            className={styles.SettingRowCheckbox}
          />
          Append component stacks to console warnings and errors
        </label>
      </div>

      <div className={styles.SettingWrapper}>
        <label className={styles.SettingRow}>
          <input
            type="checkbox"
            checked={showInlineWarningsAndErrors}
            onChange={({currentTarget}) =>
              setShowInlineWarningsAndErrors(currentTarget.checked)
            }
            className={styles.SettingRowCheckbox}
          />
          Show inline warnings and errors
        </label>
      </div>

      <div className={styles.SettingWrapper}>
        <label className={styles.SettingRow}>
          <input
            type="checkbox"
            checked={breakOnConsoleErrors}
            onChange={({currentTarget}) =>
              setBreakOnConsoleErrors(currentTarget.checked)
            }
            className={styles.SettingRowCheckbox}