{"componentChunkName":"component---src-templates-blog-js","path":"/blog/2019/08/15/new-react-devtools.html","result":{"data":{"markdownRemark":{"html":"<p>Nós estamos animados em anunciar uma nova versão do React Developer Tools, disponível hoje para Chrome, Firefox e (Chromium) Edge!</p>\n<h2 id=\"whats-changed\"><a href=\"#whats-changed\" aria-hidden class=\"anchor\"><svg aria-hidden=\"true\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>O que mudou? </h2>\n<p>Muito mudou na versão 4!\nResumidamente, esta nova versão deve oferecer ganhos significantes de performance e uma experiência de navegação melhorada.\nEla também oferece suporte completo para React Hooks, incluindo a possibilidade de inspecionar objetos aninhados.</p>\n<p>\n  <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/9552e88d7605ef4e547af89096a9225d/cd138/devtools-v4-screenshot.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n  \n  <span\n    class=\"gatsby-resp-image-wrapper\"\n    style=\"position: relative; display: block;  max-width: 840px; margin-left: auto; margin-right: auto;\"\n  >\n    <span\n      class=\"gatsby-resp-image-background-image\"\n      style=\"padding-bottom: 46.19047619047619%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAYAAAAywQxIAAAACXBIWXMAABYlAAAWJQFJUiTwAAABlElEQVQoz22SSU/DMBCF+0vYpGa3szhpFpqmSRegQFlEe0ZAEeIKBw5Q4Jc/xm5aQsXhaTz2+NObsVvc7cCyAzhOAMZDMCZg09p1I5iWB91wYZgeDIpyX4gMupdC5x1oVgDbSxCmJUTSh+OnaGmLJbSnb+w+fGKPdPD4pbT7sMTO3Qfp/TfK89s3iN4xbDeGZgsYLFJQi3IF1IczsPkT+PwZ/Owe48UrJosX7JfX0EYzaHTebqq8ghcXCqg7oZIEt8ktJ/cts1PCLk7B+udg3QnyyQ2KY4L5XRii949yBHGfgKmCSIdrqGy7ZfkZ+GAKd3QJXp7BFF06DKDVRU2tL7LgEFEyQNobwYtW9RK+apmKGM1EAllxAqOejbpct7RprY7SlR/1CDikvAOdxQq6AdoJtZ1WsKhIp2LN9BuOwj+zWkeLZ/CCHF6YwsmmWw67R+DVFM7hmDRSUt+iAWhGg4UQcYm8OoEb0h7lbUvU30ZaTSo1R17RwxQTuMMLGDRb+c/07bYJKh9ExBXCLKe9aPPKjIA/TNYlV65TlpIAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n    >\n      <img\n        class=\"gatsby-resp-image-image\"\n        style=\"width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;\"\n        alt=\"Screenshot da DevTools versão 4\"\n        title=\"\"\n        src=\"/static/9552e88d7605ef4e547af89096a9225d/1e088/devtools-v4-screenshot.png\"\n        srcset=\"/static/9552e88d7605ef4e547af89096a9225d/65ed1/devtools-v4-screenshot.png 210w,\n/static/9552e88d7605ef4e547af89096a9225d/d10fb/devtools-v4-screenshot.png 420w,\n/static/9552e88d7605ef4e547af89096a9225d/1e088/devtools-v4-screenshot.png 840w,\n/static/9552e88d7605ef4e547af89096a9225d/cd138/devtools-v4-screenshot.png 1220w\"\n        sizes=\"(max-width: 840px) 100vw, 840px\"\n      />\n    </span>\n  </span>\n  \n  </a>\n    </p>\n<p><a href=\"https://react-devtools-tutorial.now.sh/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Visite o tutorial interativo</a> para testar a nova versão ou <a href=\"https://github.com/facebook/react/blob/master/packages/react-devtools/CHANGELOG.md#400-august-15-2019\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">veja o changelog</a> para vídeos de demonstração e mais detalhes.</p>\n<h2 id=\"which-versions-of-react-are-supported\"><a href=\"#which-versions-of-react-are-supported\" aria-hidden class=\"anchor\"><svg aria-hidden=\"true\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Quais versões do React são suportadas? </h2>\n<p><strong><code class=\"gatsby-code-text\">react-dom</code></strong></p>\n<ul>\n<li><code class=\"gatsby-code-text\">0</code>-<code class=\"gatsby-code-text\">14.x</code>: Não suportada</li>\n<li><code class=\"gatsby-code-text\">15.x</code>: Suportada (exceto para a nova funcionalidade de filtro de componentes)</li>\n<li><code class=\"gatsby-code-text\">16.x</code>: Suportada</li>\n</ul>\n<p><strong><code class=\"gatsby-code-text\">react-native</code></strong></p>\n<ul>\n<li><code class=\"gatsby-code-text\">0</code>-<code class=\"gatsby-code-text\">0.61.x</code>: Não suportada</li>\n<li><code class=\"gatsby-code-text\">0.62</code>: Suportada</li>\n</ul>\n<h2 id=\"how-do-i-get-the-new-devtools\"><a href=\"#how-do-i-get-the-new-devtools\" aria-hidden class=\"anchor\"><svg aria-hidden=\"true\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Como eu consigo o novo DevTools? </h2>\n<p>O React DevTools está disponível como uma extensão para <a href=\"https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Chrome</a> e <a href=\"https://addons.mozilla.org/en-US/firefox/addon/react-devtools/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Firefox</a>.\nSe você já instalou a extensão, ela deve atualizar automaticamente nas próximas horas.</p>\n<p>Se você usa a versão independente (por exemplo, no React Native ou Safari), você pode instalar a nova versão <a href=\"https://www.npmjs.com/package/react-devtools\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">a partir do NPM</a>:</p>\n<div class=\"gatsby-highlight\" data-language=\"shell\"><pre class=\"gatsby-code-shell\"><code class=\"gatsby-code-shell\"><span class=\"token function\">npm</span> <span class=\"token function\">install</span> -g react-devtools@^4</code></pre></div>\n<h2 id=\"where-did-all-of-the-dom-elements-go\"><a href=\"#where-did-all-of-the-dom-elements-go\" aria-hidden class=\"anchor\"><svg aria-hidden=\"true\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Para onde foram todos os elementos do DOM? </h2>\n<p>O novo DevTools provê uma maneira de filtrar os componentes da árvore para facilitar a navegação de hierarquias profundamente aninhadas.\nHost nodes (por exemplo, HTML <code class=\"gatsby-code-text\">&lt;div&gt;</code>, React Native <code class=\"gatsby-code-text\">&lt;View&gt;</code>) são <em>escondidos por padrão</em>, mas este filtro pode ser desabilitado:</p>\n<p><img src=\"/758ea5ee734afdda4cd0f6b43c74fbb4/devtools-component-filters.gif\" alt=\"Filtros de component do DevTools\"></p>\n<h2 id=\"how-do-i-get-the-old-version-back\"><a href=\"#how-do-i-get-the-old-version-back\" aria-hidden class=\"anchor\"><svg aria-hidden=\"true\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Como eu volto para a versão antiga? </h2>\n<p>Se você está trabalhando com React Native na versão 60 (ou anterior), você pode instalar a versão anterior do DevTools a partir do NPM:</p>\n<div class=\"gatsby-highlight\" data-language=\"shell\"><pre class=\"gatsby-code-shell\"><code class=\"gatsby-code-shell\"><span class=\"token function\">npm</span> <span class=\"token function\">install</span> --dev react-devtools@^3</code></pre></div>\n<p>Para versões anteriores do React DOM (v0.14 ou anterior) você precisará fazer o build da extensão a partir do código fonte:</p>\n<div class=\"gatsby-highlight\" data-language=\"shell\"><pre class=\"gatsby-code-shell\"><code class=\"gatsby-code-shell\"><span class=\"token comment\"># Faça checkout do código da extensão</span>\n<span class=\"token function\">git</span> clone https://github.com/facebook/react-devtools\n\n<span class=\"token builtin class-name\">cd</span> react-devtools\n\n<span class=\"token comment\"># Faça checkout do branch da versão anterior</span>\n<span class=\"token function\">git</span> checkout v3\n\n<span class=\"token comment\"># Instale as dependências e faça o build da extensão descompactada</span>\n<span class=\"token function\">yarn</span> <span class=\"token function\">install</span>\n<span class=\"token function\">yarn</span> build:extension\n\n<span class=\"token comment\"># Siga as instruções da tela para finalizar a instalação</span></code></pre></div>\n<h2 id=\"thank-you\"><a href=\"#thank-you\" aria-hidden class=\"anchor\"><svg aria-hidden=\"true\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Muito obrigado! </h2>\n<p>Nós gostaríamos de agradecer quem testou a versão antecipada do DevTools versão 4.\nSeus feedbacks ajudaram a melhorar significativamente a versão inicial.</p>\n<p>Nós ainda temos muitas funcionalidades excitantes planejadas e feedbacks são muito bem-vindos!\nSinta-se a vontada para abrir uma <a href=\"https://github.com/facebook/react/issues/new?labels=Component:%20Developer%20Tools\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">issue no GitHub</a> ou marcar <a href=\"https://twitter.com/reactjs\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">@reactjs no Twitter</a>.</p>","excerpt":"Nós estamos animados em anunciar uma nova versão do React Developer Tools, disponível hoje para Chrome, Firefox e (Chromium) Edge! O que mudou?  Muito mudou na versão 4!\nResumidamente, esta nova versão deve oferecer ganhos significantes de performance e uma experiência de navegação melhorada.\nEla também oferece suporte completo para React Hooks, incluindo a possibilidade de inspecionar objetos aninhados.  Visite o tutorial interativo para testar a nova versão ou veja o changelog para vídeos de…","frontmatter":{"title":"Apresentando o novo React DevTools","next":null,"prev":null,"author":[{"frontmatter":{"name":"Brian Vaughn","url":"https://github.com/bvaughn"}}]},"fields":{"date":"15 de agosto de 2019","path":"content/blog/2019-08-15-new-react-devtools.md","slug":"/blog/2019/08/15/new-react-devtools.html"}},"allMarkdownRemark":{"edges":[{"node":{"frontmatter":{"title":"React v17.0"},"fields":{"slug":"/blog/2020/10/20/react-v17.html"}}},{"node":{"frontmatter":{"title":"Apresentando o novo JSX Transform"},"fields":{"slug":"/blog/2020/09/22/introducing-the-new-jsx-transform.html"}}},{"node":{"frontmatter":{"title":"React v17.0 Candidato à lançamento: Sem novas funcionalidades"},"fields":{"slug":"/blog/2020/08/10/react-v17-rc.html"}}},{"node":{"frontmatter":{"title":"React v16.13.0"},"fields":{"slug":"/blog/2020/02/26/react-v16.13.0.html"}}},{"node":{"frontmatter":{"title":"Construindo Ótimas Experiências de Usuário com Modo Concorrente e Suspense"},"fields":{"slug":"/blog/2019/11/06/building-great-user-experiences-with-concurrent-mode-and-suspense.html"}}},{"node":{"frontmatter":{"title":"Preparando para o Futuro com as Prereleases React"},"fields":{"slug":"/blog/2019/10/22/react-release-channels.html"}}},{"node":{"frontmatter":{"title":"Apresentando o novo React DevTools"},"fields":{"slug":"/blog/2019/08/15/new-react-devtools.html"}}},{"node":{"frontmatter":{"title":"React v16.9.0 e a atualização do Roadmap"},"fields":{"slug":"/blog/2019/08/08/react-v16.9.0.html"}}},{"node":{"frontmatter":{"title":"O React já esta traduzido? ¡Sí! Sim! はい！"},"fields":{"slug":"/blog/2019/02/23/is-react-translated-yet.html"}}},{"node":{"frontmatter":{"title":"React v16.8: O React com Hooks"},"fields":{"slug":"/blog/2019/02/06/react-v16.8.0.html"}}}]}},"pageContext":{"slug":"/blog/2019/08/15/new-react-devtools.html"}},"staticQueryHashes":[]}