Apresentando a barra de ferramentas do desenvolvedor do Discourse

Dev
1

Ao executar a versão mais recente do Discourse core em um ambiente de desenvolvimento, você notará uma nova barra de ferramentas no lado esquerdo da tela:

Ferramentas do Desenvolvedor
Ferramentas do Desenvolvedor804×536 21.7 KB

Isso fornece acesso com um clique a ferramentas de desenvolvedor comumente necessárias. Até agora, temos:

:electric_plug: Depuração de Plugin Outlet

Isso mostra todos os plugin outlets, com dicas mostrando valores em tempo real de todos os @outletArgs disponíveis.

Isso foi inspirado pelo popular componente de tema plugin outlet locations e o plugin antes dele. Mas, ao contrário deles, a integração estreita com o core significa que ele pode estar sempre 100% atualizado com os últimos outlets e argumentos.

:ambulance: Modo de segurança

Ativa e desativa o modo de segurança

:scroll: Localização detalhada

Ativa e desativa o recurso de localização detalhada

Em desenvolvimento, isso está habilitado por padrão e pode ser desabilitado usando o botão ‘X’.

Em produção, ele pode ser habilitado executando enableDevTools() no console do navegador. Você pode até experimentá-lo aqui no Meta! Se enableDevTools() não estiver disponível, provavelmente é porque você está em uma página de erro que não carrega o aplicativo Ember completo.

Esperamos adicionar mais ferramentas nas próximas semanas/meses, então fique atento! Se você tiver algum feedback ou ideias para ferramentas, nos avise abaixo!

49 curtidas
2

Clicar no ícone :electric_plug: para mostrar os outlets faz o Chrome travar, tornando a página/aba sem resposta. Desativei minhas extensões do Chrome, mas ainda trava.

Mais especificamente, ele trava ao clicar no ícone enquanto estiver em um tópico (não apenas no meta).

No Firefox/Edge, funciona, mas há um erro no console:

Múltiplos conectores foram registrados para o outlet discovery-list-area. Usando o primeiro.
Array [ undefined, "discovery-list-area/kanban-board (discourse/theme-351/discourse/connectors/discovery-list-area/kanban-board)" ]
3 curtidas
3

Eu também consigo reproduzir no Meta.

No Firefox, você pode ver que também há um loop infinito de renderização:

A imagem exibe uma mensagem de erro no console JavaScript "Uncaught (in promise) Error: infinite rendering invalidation detected" ao lado de uma lista de números e strings: '7', '29', '_trigger', 'end', 'endor;' que parecem fazer parte de uma linha de código. (Legenda gerada por IA)
A imagem exibe uma mensagem de erro no console JavaScript "Uncaught (in promise) Error: infinite rendering invalidation detected" ao lado de uma lista de números e strings: '7', '29', '_trigger', 'end', 'endor;' que parecem fazer parte de uma linha de código. (Legenda gerada por IA)518×206 2.51 KB

Funciona bem em uma instalação de desenvolvimento local, mesmo com o Kanban ativado. Vejo o mesmo erro, mas não há loop de renderização.

A propósito, obrigado por trazer esta ferramenta, é muito conveniente, adorei!

3 curtidas
4

Huh! Definitivamente funcionou há alguns dias, mas agora vejo o mesmo erro. Vou investigar - obrigado pelos relatos!

6 curtidas
6

Acabei de mesclar este commit que corrigirá a renderização infinita na página do tópico

8 curtidas
8

Como não vejo nenhuma maneira de fazer isso no celular, estou trabalhando em um TC simples para adicionar um botão ao cabeçalho (inspirado no TC de Plugin Outlets).

9

Ao visualizar um ambiente de desenvolvimento em dispositivos móveis, a barra de ferramentas aparecerá à esquerda da tela para que você possa usá-la normalmente.

Em ambientes de produção, você precisará chamar enableDevTools() do console (ou do JavaScript do tema/componente de tema) para ativar a barra de ferramentas. Observe que isso tem um custo de desempenho, portanto, você não deve fazer isso para todos os usuários em um site de produção real.

2 curtidas
10

Sim. Os usuários podem clicar no botão para ativar as ferramentas de desenvolvedor para eles. Não para todos os usuários.

1 curtida
11

Aqui está:

1 curtida
12

Podemos ter um alternador para mobile_view? Às vezes, quero verificar rapidamente essa visualização.
Posso fazer um PR se for o caso!

3 curtidas
13

Por que não a alternância na barra lateral, afinal?

1 curtida
14

Você não tem a opção móvel no modo desktop. Acredito que ela apareça apenas no celular ou tablet.
Além disso, trata-se da conveniência de ter todos os botões no mesmo lugar.

2 curtidas
15

Claro, o modo mobile parece uma boa adição :+1:

3 curtidas
16

Aí está:

2 curtidas
17

Gostaria apenas de agradecer por esta útil ferramenta de desenvolvimento.

Identificar os plugin outlets disponíveis agora é muito fácil, ou localizar as localization strings…

Obrigado! :smiley:

6 curtidas
18

Mas não funciona na página 404?

Visite https://meta.discourse.org/ewfsezfef, pressione F12, ative as ferramentas de desenvolvedor e

image
image270×115 5.77 KB

VM190:1 Uncaught ReferenceError: enableDevTools is not defined
    at <anonymous>:1:1

Eu esperava adicionar algum texto a essa página.

3 curtidas
19

No momento, as páginas 404 não carregam nenhum JavaScript do aplicativo Ember. Existe uma configuração oculta do site bootstrap_error_pages que você pode habilitar para torná-las páginas completas do aplicativo Ember.

Talvez façamos isso como padrão no futuro, mas não é o item de maior prioridade no momento.

2 curtidas
20

Faz sentido. Talvez adicionar isso ao OP? Parece que posso fazer isso.

1 curtida
21

Claro! adicionado:

3 curtidas