O navegador possui ferramentas de desenvolvedor integradas que você pode usar para depurar HTML, CSS e JavaScript. No entanto, eles não são ótimos para encontrar e corrigir bugs em apps React. Então a equipe do React desenvolveu uma ferramenta chamada "React Developer Tools" (também conhecida como React DevTools) para que você possa inspecionar, depurar e analisar o desempenho de aplicativos React. React DevTools está disponível como uma extensão de navegador para Chrome, Edge e Firefox. Se você estiver no Chrome ou Edge, vá até a Chrome web store, pesquise por "React Developer Tools” e adicione-o ao seu navegador. E se você usar Firefox, acesse a página de Complementos do Firefox, procure a ferramenta e adicione-a ao seu navegador. Se você usa Safari, pode instalar React DevTools pelo npm executando npm install -g react-devtools ou yarn global add react-devtools. Após instalar e ativar o React DevTools, se você abrir um app React no seu navegador e depois abrir as ferramentas de desenvolvedor do navegador, você deverá ver duas abas extras: Components e Profiler. A aba Components exibe cada componente para você em um formato de visualização em árvore. Com ele, você pode: 

• Veja a hierarquia de componentes do app.
• Verifique e modifique props, states e valores de context em tempo real.
• Verifique o código-fonte de cada componente selecionado.
• Registre os dados do componente no console.
• Inspecione os elementos DOM para o componente.

Por outro lado, a aba Profiler ajuda você a gravar e analisar o desempenho dos componentes para que possa identificar re-renderizações desnecessárias, visualizar durações de commit e aspectos que você pode otimizar. Aqui está um aplicativo simples para mostrar como você pode inspecionar componentes e quaisquer props e state que eles tenham. Isso é semelhante ao código que usamos em uma lição anterior sobre prop drilling:

import { useState } from "react";

export default function App() {
  const greeting = "Hello, Prop Drilling!";
  const response = "I'm not here to play!";

  return <Parent greeting={greeting} response={response} />;
}

const Parent = ({ greeting, response }) => {
  return <Child greeting={greeting} response={response} />;
};

const Child = ({ greeting, response }) => {
  return <Grandchild greeting={greeting} response={response} />;
};

const Grandchild = ({ greeting, response }) => {
  const [count, setCount] = useState(0);

  return (
    <>
      <h1>{greeting}</h1>
      <h2>{response}</h2>

      <button onClick={() => setCount(count + 1)}>Increase Count</button>
      <h2>Count: {count}</h2>
      <button onClick={() => setCount(count - 1)}>Decrease Count</button>
    </>
  );
};

Se você olhar na aba Components no React DevTools, você pode ver a visualização em árvore dos componentes. O componente App está no topo, seguido pelos componentes Parent, Child e Grandchild. Se você selecionar qualquer um desses componentes, poderá ver as props e o state neles. Se você selecionar o componente Parent, poderá ver as props greeting e response, que são Hello, Prop Drilling! e I'm not here to play!, respectivamente. Você pode ver as props e atualizar o estado em tempo real e alterá-los se necessário. Por exemplo, você pode selecionar o componente Grandchild e alterar a prop greeting de Hello, Prop Drilling! para Hello, Welcome to Prop Drilling! e ver isso refletido na página imediatamente. Para registrar dados em um componente no console, inspecione os elementos DOM correspondentes e visualize o código-fonte do componente. Os ícones no canto superior direito permitem que você faça isso. Se você selecionar o componente Grandchild e clicar no botão Log the component data to the console, ele registrará as props, state, hooks, nodes e outros dados no console. Um erro comum que você pode encontrar em React é chamado de props mismatch. Por exemplo, suponha que para o componente Child, você passe por engano reply como a prop em vez de response:

const Child = ({ greeting, response }) => {
  return <Grandchild greeting={greeting} reply={response} />;
};

Lembre-se que Grandchild espera uma prop response. Porque o componente recebe uma prop diferente, ele não pode exibir esse texto na página e apenas adiciona um h2 vazio ao DOM. Em vez disso, você verá apenas o elemento h1 com o texto Hello, Prop Drilling!, junto com os outros botões e textos já presentes na página. O elemento vazio h2 ainda está lá, mas como está vazio, você não pode vê-lo sem inspecionar o DOM. Para corrigir isso, você pode inspecionar a progressão da prop do componente Parent até o Child e editar o nome da prop diretamente. Se você for para a aba Components, selecione o componente Child e altere a prop reply para response, você verá o elemento h2 na página com o texto I'm not here to play!.