Olá. Eu tenho o mesmo problema. Talvez esta informação seja útil:
1) Quando eu abro algumas das "páginas" (seja P1 ) do meu SPA, então abro o DevTools, não consigo ver as guias "Componentes" e "Perfilador".
2) Eu fecho DevTools
3) Então eu mudo para a outra "página" do SPA (que seja P2 )
4) Abra DevTools enquanto estou em P2
5) Agora vejo as guias "Componentes" e "Perfilador"
6) Sem fechar DevTools, volto para P1 , as duas guias da extensão RDT ainda estão aqui, lucro :)

@ Roman-Popov Você pode reproduzir isso de forma confiável? Faz diferença o que são p1 e p2? (Se algo sobre os aplicativos parece significativo, você pode compartilhá-los de alguma forma para que eu possa reproduzi-los?)

Também qual navegador + sistema operacional

@ Roman-Popov @bengry (ou qualquer outra pessoa que veja isso e possa reproduzir) Se você puder reproduzir, estaria disposto a tentar uma nova versão do DevTools (que eu poderia compartilhar aqui) para ver se o problema ainda ocorre?

Eu poderia tentar fazer uma construção com # 18860 desabilitado (Esse é o único commit no conjunto de mudanças 4.6-> 4.7 que parece mesmo remotamente suspeito.)

@bvaughn Sobre p1 e p2. Sim, parece que há diferença entre eles. P2, onde RDT não é mostrado por padrão, contém muito mais elementos dom. E aqui está mais um detalhe - a aba Redux-devtools se comporta exatamente como as abas RDT.

E a página https://reactjs.org/ (problema mencionado por @bengry) - eu também vi isso. Mas verifiquei novamente agora e não vejo problemas. As guias são mostradas, está tudo bem.

Provavelmente, no meu caso, há algum problema de memória no meu projeto ou algo parecido. Porque se eu remover listas longas do P2, as guias do devtools aparecem.

Chrome v83.0.4103.61
Chrome Canary v85.0.4157.0
Win 10 Pro 1903

@ Roman-Popov Obrigado pela informação adicionada!

Alguma chance de você compartilhar o repro (ou acesso a ele) comigo para que eu possa ver o que está acontecendo?

Alternativamente, você estaria disposto a instalar uma compilação de devtools única se eu anexar uma aqui? (Só para ver se você ainda consegue reproduzir com ele)

Encontrei o mesmo problema em nosso SPA. Consegui fazer com que as guias Componentes e Perfilador apareçam nas Ferramentas de Desenvolvimento do Chrome quando inspecionei nosso aplicativo na "visualização" móvel (que altera a renderização inicial dos componentes). Eu atualizei e mudei de volta para área de trabalho / "visão" responsiva (ferramentas de desenvolvimento abertas o tempo todo) as guias permaneceram visíveis.

Para o nosso SPA, a maior diferença entre a página de destino móvel e desktop é que no desktop renderizamos uma gaveta aberta com uma lista virtualizada reativa. Esta gaveta não é aberta ou processada imediatamente no celular. Não tenho certeza se essa informação ajuda, sei que é apenas uma migalha de pão. Vou atualizar se encontrar mais alguma coisa.

Ficaria feliz em tentar uma construção personalizada para ver se resolve o problema.

Porque se eu remover listas longas do P2, as guias do devtools aparecem.

Sim! Virtualizado do React. Eu uso isso também para listas longas que mencionei na minha mensagem anterior.
overscanRowCount={600} está definido para lista embrulhada. É grande o suficiente, mas há apenas marcadores de posição muito leves com alguns elementos dom (para manter a pesquisa do navegador na lista pressionando ctrl + f). Se eu fizer downgrade de overscanRowCount para + -50, o problema com guias ausentes será resolvido.

Interessante. Então, parece que o problema tem a ver com o tamanho da árvore, ou talvez o número de filhos em um único pai ... @ Roman-Popov você poderia por acaso reproduzir isso em um Code Sandbox ou algo assim? (Já que não consigo olhar para P2 diretamente, presumo?)

Em outras notícias, entretanto- overscanRowCount={600} parece ... muito inesperadamente alto. Eu não teria aconselhado que esse valor fosse superior a um número de um único dígito. RV e RW existem para evitar gerar e trabalhar em listas longas. 600 significa que está renderizando as linhas da janela de visualização, além de até 1.200 linhas extras.

O reactjs.org também usa react-virtualized ? Porque o problema foi reproduzido para mim lá também (na verdade, esse problema foi aberto com isso como exemplo). Nós o usamos em nosso aplicativo, mas com uma contagem de overscan menor, e ainda aconteceu lá.

O reactjs.org também usa react-virtualized ? Porque o problema foi reproduzido para mim lá também

Funcionando bem para mim em reactjs.org.

Em nosso próprio aplicativo, não usamos a virtualização de reação, mas podemos reproduzir o problema.

editar: Estou tendo o mesmo problema em um novo aplicativo react criado por create-react-app.

Acho que isso pode estar relacionado com o Chrome 83, comecei a ter esse problema após atualizar para o 83 e posso reproduzi-lo no Chrome Canary 85.

Um colega que usa o Chromium 81 não tem problemas ao usar o mesmo aplicativo.

@bvaughn

overscanRowCount = {600} parece ... muito inesperadamente alto.
....
RV e RW existem para evitar gerar e trabalhar em listas longas

Verdadeiro: eu sei sobre desempenho. Isso não era bom, mas uma solução rápida. Mais tarde, faço algum tipo de pesquisa personalizada, é claro :)
Sobre o código-fonte para mostrar meu aplicativo e tentar reproduzir - desculpe, acho que não posso fazer isso, NDA e assim por diante, você sabe. Mas posso tentar fazer algum pequeno projeto CRA com listas de react-virtualized , páginas pesadas, etc. E compartilhar esse repositório se eu pegar esse bug novamente. Vou tentar encontrar algum tempo para esta investigação)

Acho que isso pode estar relacionado com o Chrome 83, comecei a ter esse problema após atualizar para o 83 e posso reproduzi-lo no Chrome Canary 85.

Um colega que usa o Chromium 81 não tem problemas ao usar o mesmo aplicativo.

Esta informação seria muito útil para ser confirmada. @ianvieira quão confiável você pode reproduzir este problema? Se for muito confiável, você poderia tentar uma versão mais antiga do Chromium e ver se ela não é mais reproduzida?

Se sim, me avise e entrarei em contato com a equipe do Chrome.

Só para tentar uma coisa extra, se mais alguém puder reproduzir esse problema de maneira bastante confiável, você experimentaria esta construção de extensão e me avisaria se ela ajudar?

ReactDevTools.zip

Eu realmente não espero que aconteça, mas gostaria de descartar as alterações recentes do WebPack.

Para instalar a extensão acima:

1. Baixe e descompacte em algum lugar
2. Abra chrome://extensions/ em seu navegador
3. Clique no botão de alternância para desativar a extensão React DevTools
4. Clique no botão "Carregar Descompactado"
5. Selecione a pasta de extensão descompactada da etapa 1

@bvaughn Achei que poderia reproduzi-lo de forma consistente, mas depois de https://reactjs.org (que exibia as guias corretamente) e voltar ao meu aplicativo com o console aberto, agora está funcionando de forma consistente.

No Chrome Canary, ainda consigo reproduzi-lo de forma consistente no meu aplicativo com vários nós. Vou tentar a versão que você enviou.

Percebi que isso parece matar todas as minhas outras guias de console adicionadas à extensão também. Redux, etc.

Percebi que isso parece matar todas as minhas outras guias de console adicionadas à extensão também. Redux, etc.

Estou começando a suspeitar que isso tem algo a ver com o Chrome.

Já ouvi relatos de outras pessoas dizendo que o Relay DevTools está travando, o que faz com que o React DevTools pare. Agora estou vendo você dizer que isso afeta Redux DevTools também.

Não há nada que o React (ou Relay) deva fazer que afete um ao outro ou a extensão Redux.

Percebi que isso parece matar todas as minhas outras guias de console adicionadas à extensão também. Redux, etc.

Eu percebi o mesmo. Acabei de experimentar no Chrome Canary, tive o mesmo comportamento, depois de acessar https://reactjs.org as guias React aparecem, junto com outras:

Eu tentei antes com https: // localhost : 3000 (sem sucesso ao abrir e fechar Dev Tools) e com https://farfetch.com. As guias reapareceram com https://reactjs.org e depois de fechar as ferramentas de desenvolvimento entre Farfetch e React e atualizar a página.

A propósito, eu estava usando a versão que você enviou a @bvaughn.

Por algum motivo, só consigo ver as guias em https://reactjs.org no Canary. Localhost ainda fica sem ele (não apenas os reagentes, mas todos eles). Suspeito que tenho a guia estável porque abri o localhost depois que os documentos do React com as ferramentas Dev foram abertos.

Tentei fazer o mesmo, mas não consigo colocá-lo no localhost de forma consistente no Chrome Canary.

EDIT: Depois de fechar a guia do navegador, acessei os documentos do React no stable, as guias sumiram novamente. Realmente parece ser um problema do Chrome

Este problema não é determinístico. Às vezes funciona, às vezes não. Não acho que devemos interpretar muito em um único sucesso .

O Chrome v83 foi lançado um dia após o React DevTools v4.7.

Esta é a versão anterior do React DevTools (4.6) se alguém quiser experimentá-la para ver se algo muda:
ReactDevTools-4.6.zip

Parece cada vez mais um problema do Chrome, pelo que estou ouvindo.

Nem a versão experimental nem a 4.6 estão funcionando para mim (apenas a solução alternativa mencionada acima). Também tenho a sensação de que este é um problema do Chrome, pois o bug ocorreu após a atualização do Canary alguns dias atrás e persiste desde então, mas a extensão funciona corretamente no Stable.

Também pode ser importante notar que reactjs.org sempre teve problemas ocasionais com a guia de extensão não aparecendo. Não sei por que, mas uma falha ocasional não é uma coisa nova . O que parece ser novo é a frequência dessa falha, e o fato de que está acontecendo para outros sites, e o fato de que parece estar acontecendo também para outras extensões. (É por isso que acho que é um problema do Chrome / Chromium)

Não tenho ideia de como a extensão funciona e também não consigo criar um caso de teste reduzido. Mas talvez isso ajude você de alguma forma:

Em reactjs.org onde a extensão funciona, o objeto window tem __REACT_DEVTOOLS_COMPONENT_FILTERS__ , __REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ e __REACT_DEVTOOLS_GLOBAL_HOOK__ .

Este último se parece com isto:

No aplicativo em que a extensão não funciona, apenas __REACT_DEVTOOLS_GLOBAL_HOOK__ existe e se parece com isto:

Existe uma maneira de conectar a extensão ( main.js ?), Talvez até mesmo anexar um depurador, para encontrar um erro potencial? (Eu tentei background.js mas este não parece ser o lugar correto para olhar.)

@bvaughn também acho que isso pode ser um bug do Chromium (observe o Chromium, e não o Chrome, já que obtenho exatamente o mesmo comportamento de bug no Edge). Opera funciona muito bem para mim com o RDT mais recente, então eu acho que eles não atualizaram para o Chromium 83 ainda (embora eu não esteja perto de um computador para verificar agora).

Abri o bug aqui, pois ele parece ser retransmitido para o RDT (eu também não sabia que outros como Relay e Redux DT não funcionavam), então pode ser com alguma integração entre os dois. Talvez uma API de extensão que esteja causando o problema e tenha sido alterada no Chromium 83.

Você entrou em contato com a equipe do Chromium / Chrome sobre isso, conforme mencionou anteriormente?

Concordo neste ponto que parece provável ser um bug do Chromium (que foi lançado com as atualizações recentes do Chrome 83 e Edge 83).

Eu fiz ping em um dos dev rels no Twitter, mas ainda não tive uma resposta.

Existe uma maneira de conectar a extensão (main.js?), Talvez até mesmo anexar um depurador, para encontrar um erro potencial? (Eu tentei background.js, mas este não parece ser o lugar correto para olhar.)

@maxbeier Existem algumas maneiras de depurar extensões. Algumas extensões injetam código na página que você está visualizando (como faz o React DevTools), caso em que você pode apenas depurá-lo usando o fluxo de trabalho normal.

Você também pode querer depurar a própria IU da extensão, o que pode ser feito desanexando / desencaixando o painel DevTools e abrindo uma segunda janela DevTools para inspecionar a primeira, assim (estou usando ⌘ + J ):

Você também pode abrir a extensão (chrome: // extensions /? Id = aogeonfmjfclepddhjhilmncnhooehhl) e escolha "Detalhes" e "Inspecionar visualizações".

A propósito, este parece ser um problema do Chromium que também está afetando o Vue e o Redux DevTools.

Se você tiver uma conta de bug CR, considere marcar este problema:
https://bugs.chromium.org/p/chromium/issues/detail?id=1085215

Não tenho certeza se esta é a resposta que você está procurando, mas no Urql Devtools tentamos deixar de usar chrome.devtools.inspectedWindow.eval em favor do handshaking devido a imprevisibilidades como essa.

O problema de avaliar uma janela inspecionada é que você pode acabar com condições de corrida ou uma dependência da votação, como é o caso dos devtools de reação.

const loadCheckInterval = setInterval(function() {
  createPanelIfReactLoaded();
}, 1000);

Não consegui reproduzir o bug, mas não ficaria surpreso se o Chrome estivesse fazendo algo estranho com chamadas de intervalo em extensões. Não é divertido, mas o handshaking pode tornar as coisas um pouco mais diretas, eu sei que mensagens são algo que os documentos do Chrome encorajam em vez de avaliações de janelas por razões de segurança.

Essa é uma sugestão interessante, @andyrichardson. Obrigado!

Também estamos enfrentando o mesmo problema para ChroPath
Eu não consegui uma solução permanente ainda, mas aqui está a solução -

1. Altere o tema do Chrome DevTools apenas quando for necessário.
2. Agora abra devtools, você encontrará a guia de extensão em DevTools.
3. Você pode alterar novamente o tema que deseja manter e isso resolverá o seu problema.

Obrigado, @sanjayautonomiq , este trabalho para mim

Isso vem acontecendo comigo há mais de um ano no cromo. normalmente, ao recarregar a página, os componentes e a guia do profiler reaparecem. só queria salientar que não é apenas o lançamento mais recente, está acontecendo desde a v16, desde que me lembro

Isso vem acontecendo comigo há mais de um ano no cromo. normalmente, ao recarregar a página, os componentes e a guia do profiler reaparecem. só queria salientar que não é apenas o lançamento mais recente, está acontecendo desde a v16, desde que me lembro

Acho que pode ser algo do seu lado, já que pessoalmente não vi isso no AFAIR do ano passado - e como mencionado, isso não acontece no último Opera no momento em que escrevo isto (Opera 68, Chromium 81), e para mim atualizar a página não ajuda. A solução alternativa sugerida por @sanjayautonomiq , entretanto.
Mesmo que esse bug já exista por pelo menos um ano, algo nas últimas semanas o tornou pior (novas versões do Chromium e / ou novas versões RDT) - como fica evidente por todas as reações neste problema.

Mesmo que esse bug já exista por pelo menos um ano, algo nas últimas semanas o tornou pior (novas versões do Chromium e / ou novas versões RDT) - como fica evidente por todas as reações neste problema.

Certamente verdade. Eu fiz ping no bug CR novamente. Essa regressão é bastante perturbadora.

Para sua informação, acabei de sinalizar http://crbug.com/1085215 como uma duplicata de http://crbug.com/1093731. Uma correção para o último problema foi enviada há cerca de 8 dias. Teste novamente em Canário e, se o problema não for resolvido, elimine a duplicação 1085215.

De fato, parece que a correção Canary resolve esse problema (ou pelo menos torna MUITO mais difícil de reproduzir). Vou deixar esse problema em aberto até que a correção seja lançada para o Chrome estável, já que estamos recebendo muitos relatórios duplicados sobre isso.

Também estamos enfrentando o mesmo problema para ChroPath
Eu não consegui uma solução permanente ainda, mas aqui está a solução -

1. Altere o tema do Chrome DevTools apenas quando for necessário.
2. Agora abra devtools, você encontrará a guia de extensão em DevTools.
3. Você pode alterar novamente o tema que deseja manter e isso resolverá o seu problema.

Funcionou como um encanto para mim, obrigado! Estava prestes a bater minha cabeça contra a parede.

Isto é tão estranho.

Tenho que mudar o tema devTools para corrigir esse problema.

Obrigado, @sanjayautonomiq

Mas isso é um bug.

Mas isso é um bug.

Sim.

Especificamente, é um bug do Chrome (bug CR 1085215 ), conforme mencionado na descrição do problema: smile: Nada que possamos fazer (aqui) para corrigi-lo.

Isso parece estar resolvido agora para mim no Chrome estável, então vou encerrar este problema.

Isso parece estar resolvido agora para mim no Chrome estável, então vou encerrar este problema.

Ainda reproduz para mim no Chrome 83.0.4103.116.

Concordo que isso não tem solução no lado do RDT, mas pode valer a pena manter esse problema aberto até que seja corrigido no Chrome.

Mesmo problema aqui Versão 83.0.4103.116 (versão oficial) (64 bits)

Vou gritar e dizer que também é um problema para mim (versão 83.0.4103.116).

Ei pessoal. Provavelmente não vale a pena adicionar mais comentários "+1" aqui, pois este é um bug do Chromium. Não há nada que eu possa fazer sobre isso no lado da extensão para que funcione. Os votos "+1" seriam mais bem gastos no próprio bug do Chromium: sorria: para que o Google saiba que está afetando muitas pessoas.

Dito isso, o bug CR foi marcado como corrigido e agendado para escolha aleatória no v84 do Chrome de acordo com este comentário, portanto, deve ser resolvido em breve para todos, esperançosamente.

Enquanto isso, bloquearei esse problema apenas para evitar o envio de notificações por spam a todos os que já comentaram acima.