CSS Stacking Context inspector in Chrome with OffiDocs

DESCRIÇÃO:

Run the Chrome online web store extension CSS Stacking Context inspector using OffiDocs Chromium online.

Você já tentou usar a propriedade z-index, apenas para descobrir que, não importa o quão alto você a configure, ela não funcionará como esperado? Isso ocorre porque a propriedade z-index depende de um conceito implícito chamado "contextos de empilhamento".

Depois de pesquisar o que são e como funcionam (informações que você pode encontrar no MDN), você pode usar esta extensão devtools para inspecionar esses contextos e solucionar qualquer problema de z-index que possa enfrentar.

Esta extensão adicionará um novo painel que mostrará contextos de empilhamento em uma visualização em árvore e também anexará uma nova barra lateral ao painel de elementos com algumas informações úteis sobre o elemento selecionado.

Para verificar uma documentação detalhada, consulte a página do github: https://github.

com/andreadev-it/stacking-contexts-inspector Se você deseja relatar um problema ou fazer uma solicitação de recurso, use a seção Problema no repositório github mencionado anteriormente.

LOG DE MUDANÇAS: • v.

1.

1.

13 - Moved to manifest v3.

Added z-index to the stacking context panel sidepan as well.

•v.

1.

1.

12 - Corrigido bug com propriedades prefixadas pelo fornecedor não detectadas ao verificar contextos de empilhamento.

•v.

1.

1.

11 - Adicionado valor z-index à seção "Detalhes do contexto" na barra lateral.

•v.

1.

1.

10 - Removido pedido de permissão desnecessário para cumprir a Política de Segurança CWS.

•v.

1.

1.

9 - Inspeção de nodo DOM de contexto implementada dentro de iframes e shadowDOM.

Agora a extensão funciona também em arquivos locais (file:///esquema).

•v.

1.

1.

8 - Adicionado aviso quando a página muda, suporte para shadow DOM e configurações básicas.

•v.

1.

1.

7 - Pequenas correções de estilo.

Agora também está disponível no Firefox devido a algumas pequenas alterações no código.

Código limpo.

•v.

1.

1.

5 - Corrigido bug relacionado a transição de módulos css (unstyled spinner).

•v.

1.

1.

4 - Adicionado tema escuro (anteriormente era inutilizável com o tema escuro ativado).

•v.

1.

1.

3 - Corrigido bug na navegação da página.

•v.

1.

1.

2 - Adicionado suporte para iframes sem o atributo "src" (alguns iframes com "src" podem funcionar, mas não devem ser esperados).

Além disso, o indicador de carregamento também foi introduzido na barra lateral (painel de elementos), e a barra lateral agora tem seu próprio botão "atualizar contextos".

•v.

1.

1.

1 - Corrigido o bug onde os contextos estáticos criados por seus pais tendo um display flex ou grid não eram detectados.

•v.

1.

1.

0 - Agora a extensão funciona em abas que já estavam abertas quando foi instalada.

- O menu de contexto do botão direito foi substituído por botões contextuais, porque não estava funcionando corretamente (pode ser adicionado novamente no futuro).

- Agora a página da árvore de contexto mostrará um indicador de carregamento quando o contexto de empilhamento estiver demorando muito para carregar.

- Do lado do desenvolvedor, todo o código foi movido para preact, como primeiro passo para torná-lo open source.

•v.

1.

0.

1 - Pequenas mudanças de acessibilidade e ajustes visuais.

Informação adicional:

- Oferecido por Andrea Dragotta
- Avaliação média: 3.92 estrelas (gostei)
- Desenvolvedor Este endereço de e-mail está protegido contra spambots. Você deve habilitar o JavaScript para visualizá-lo.

CSS Stacking Context inspector web extension integrated with the OffiDocs Chromium online