From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- .../how_to/edit_css_filters/index.html | 32 +++ .../how_to/examinando_eventos_escuta/index.html | 26 ++ .../how_to/examine_and_edit_css/index.html | 216 ++++++++++++++++ .../how_to/examine_grid_layouts/index.html | 34 +++ files/pt-br/tools/page_inspector/how_to/index.html | 13 + .../how_to/open_the_inspector/index.html | 19 ++ .../trabalho_com_anima\303\247oes/index.html" | 175 +++++++++++++ files/pt-br/tools/page_inspector/index.html | 276 +++++++++++++++++++++ 8 files changed, 791 insertions(+) create mode 100644 files/pt-br/tools/page_inspector/how_to/edit_css_filters/index.html create mode 100644 files/pt-br/tools/page_inspector/how_to/examinando_eventos_escuta/index.html create mode 100644 files/pt-br/tools/page_inspector/how_to/examine_and_edit_css/index.html create mode 100644 files/pt-br/tools/page_inspector/how_to/examine_grid_layouts/index.html create mode 100644 files/pt-br/tools/page_inspector/how_to/index.html create mode 100644 files/pt-br/tools/page_inspector/how_to/open_the_inspector/index.html create mode 100644 "files/pt-br/tools/page_inspector/how_to/trabalho_com_anima\303\247oes/index.html" create mode 100644 files/pt-br/tools/page_inspector/index.html (limited to 'files/pt-br/tools/page_inspector') diff --git a/files/pt-br/tools/page_inspector/how_to/edit_css_filters/index.html b/files/pt-br/tools/page_inspector/how_to/edit_css_filters/index.html new file mode 100644 index 0000000000..26eb590aae --- /dev/null +++ b/files/pt-br/tools/page_inspector/how_to/edit_css_filters/index.html @@ -0,0 +1,32 @@ +--- +title: Edit CSS filters +slug: Tools/Page_Inspector/How_to/Edit_CSS_filters +tags: + - CSS + - DevTools + - Ferramentas + - Filtros + - Inspetor de Página +translation_of: Tools/Page_Inspector/How_to/Edit_CSS_filters +--- +
{{ToolsSidebar}}

propriedades do filter nas Rules view tem uma amostra de cinza e branco circular ao lado deles:

+ +

+ +

Clicando na amostra abre um editor de filtro:

+ +

Você pode adicionar, remover e editar os filtros, e arrastá-los para alterar a ordem em que eles são aplicados:

+ +

{{EmbedYouTube("yws01SEPTvg")}}

+ +

Salvar predefinições de filtro

+ +

Do Firefox 42 em diante, você também pode adicionar filtros para uma lista de predefinições:

+ +

Você pode salvar o filtro atual na lista de predefinições:

+ +

{{EmbedYouTube("bHcfLlZE8T8")}}

+ +

Em seguida, você pode aplicar filtros salvos para novos elementos:

+ +

{{EmbedYouTube("PK85L7ztQto")}}

diff --git a/files/pt-br/tools/page_inspector/how_to/examinando_eventos_escuta/index.html b/files/pt-br/tools/page_inspector/how_to/examinando_eventos_escuta/index.html new file mode 100644 index 0000000000..b1c8414a5b --- /dev/null +++ b/files/pt-br/tools/page_inspector/how_to/examinando_eventos_escuta/index.html @@ -0,0 +1,26 @@ +--- +title: Examinando Eventos de Escuta +slug: Tools/Page_Inspector/How_to/Examinando_eventos_escuta +translation_of: Tools/Page_Inspector/How_to/Examine_event_listeners +--- +
{{ToolsSidebar}}

No Firefox 33 você verá um ícone "ev" no HTML Pane, próximo a elementos que tem eventos de escuta como mostra a figura abaixo:

+ +

+ +

Clicando no ícone, então você verá um popup listando todos eventos de escuta para este elemento:

+ +

Cada linha contém:

+ + diff --git a/files/pt-br/tools/page_inspector/how_to/examine_and_edit_css/index.html b/files/pt-br/tools/page_inspector/how_to/examine_and_edit_css/index.html new file mode 100644 index 0000000000..5779b9403f --- /dev/null +++ b/files/pt-br/tools/page_inspector/how_to/examine_and_edit_css/index.html @@ -0,0 +1,216 @@ +--- +title: Examinar e editar CSS +slug: Tools/Page_Inspector/How_to/Examine_and_edit_CSS +tags: + - Barra de Ferramentas + - CSS + - Estilos + - Ferramentas + - Firefox + - Guia(2) + - Inspetor + - Regras de CSS + - Utilidades +translation_of: Tools/Page_Inspector/How_to/Examine_and_edit_CSS +--- +
{{ToolsSidebar}}

Você pode examinar e editar CSS no painel CSS do Inspetor.

+ +

Analisar regras de CSS

+ +

A visualização das listas de todas regras que se aplicam a um elemento selecionado são ordenados das formas mais específica até a menos específica:

+ +

+ +

As regras também podem ser visualizadas pelo estilo de agente-visualizador (estilos que são aplicados pelo navegador), para ativar esta opção, a própria dever ser marcada nas configurações da barra de ferramentas. Note que essa configuração é independente da checkbox "Estilo do Navegador" na aba de visualização de estilos "Computado".

+ +

Do Firefox versão 44 em diante, todas as Regras do CSS são exibidas, including styles that are not supported or that are invalid. This can help you understand why certain styles are not being applied:

+ +

+ +

Regra de exibição

+ +

Cada regra é exibida como uma folha de estilo, com uma lista de seletores seguida de uma lista de declarações propriedade:valor;.

+ +

+ + + +

User-agent styles são exibidos com o fundo diferente, e o link com nome do arquivo e o número da linha contendo o prefixo (user agent):

+ +

+ +

Regras de Filtragem

+ +

Iniciado no Firefox 40, ela é uma caixa que fica no topo da vizualização das regras "Filter Styles":

+ +

Enquanto você digita:

+ + + +

Clique no "X" para fechar a caixa de pesquisa e remover os filtros.

+ +

{{EmbedYouTube("9w8vDIWqnAE")}}

+ +

Pesquisa restrita

+ +
+

Novo no Firefox 43

+
+ +

Por padrão, a caixa de pesquisa destaca todas as declaraçõs que contem qualquer parte do valor digitado. Por exemplo, pesquise por "color" irá destacar uma linha que tenha o valor digitado border-bottom-color e background-color bom como apenas color.:

+ +

+ +

Iniciado no Firefox 43, se você incluir aspas simples na pesquisa , dessa forma: `color`, a pesquisa será restringida a ter somente o que está entre aspas simples:

+ +

+ +

Mostrando pseudo-elementos

+ +

Do Firefox 41, a regra é exibir os seguintes pseudo-elementos, se forem aplicados ao elemento selecionado:

+ +

::after
+ ::backdrop (Novo no Firefox 46)
+ ::before
+ ::first-letter
+ ::first-line
+ ::selection
+ :-moz-color-swatch
+ :-moz-number-spin-box
+ :-moz-number-spin-down
+ :-moz-number-spin-up
+ :-moz-number-text
+ :-moz-number-wrapper
+ :-moz-placeholder
+ :-moz-progress-bar
+ :-moz-range-progress
+ :-moz-range-thumb
+ :-moz-range-track
+ :-moz-selection

+ +

Se o elemento selecionado for um pseudo-elemento aplicado a ele, ele mostrará antes do elemento selecionado porém oculto por um triângulo de divulgação:

+ +

+ +

Clicando no triângulo irá mostrar os elementos:

+ +

+ +

Configuração :hover, :active, :focus

+ +

Do Firefox 41, ele é um novo botão a direita da caixa de filtros:

+ +

Clique no botão para ver três checkboxes, que você pode usar para {{cssxref(":hover")}}, {{cssxref(":active")}} e {{cssxref(":focus")}} pseudo-classes para o elemento selecionado:

+ +

Apesar desse botão ser novo no Firefox 41, o recurso já existia em versões anteriores do Firefox. Poderia - e ainda pode - ser acessado a partir do na janela HTML.

+ +
+

Novo no Firefox 43

+
+ +

Iniciado no Firefox 43, se você definir uma dessas pseudo-classes para um nó, um ponto laranja aparecerá na exibição de marcação ao lado de todos os nós aos quais a pseudo-class foi aplicada:

+ +

+ + + +

No canto superio direito de cada regra, O nome do arquivo fonte e o número da linha é exibida como link: cliquenele para abrir no Style Editor.

+ +

Do Firefox 41 você pode copiar o local do arquivo fonte: Clique com botão direito no link e selecione "Copar localização".

+ +

O Inspetor entende os mapas de origem CSS. Isso significa que se você estiver usando um pré-processador CSS que tenha suporte para mapas de origem e ativado o suporte ao mapa de origem nas configurações do editor de estilo, o link o levará para a fonte original e não para o CSS gerado . Leia mais sobre o suporte ao mapa de origem CSS na documentação do edtiro de estilo.

+ +

Obtendo ajuda para propriedades CSS

+ +

Iniciado no Firefox 40, se você clicar no nome da propriedade na visualização das regras, você pode abrir uma janela mostrando ajuda com aquela propriedade no MDN:

+ +

{{EmbedYouTube("ptVtAEOK7y4")}}

+ +

Perceba que nesse momento, isso não armazena em cache respostas de MDN, por isso requer conectividade de rede.

+ +

Substituir declarações

+ +

Se uma declaração no CSS pode ser substituído por qualquer regra CSS com um peso maior, Então a declaração é mostrada com uma linha através dele.

+ +
+

Novo no Firefox 43

+
+ +

Iniciado no Firefox 43, d eclarações de substituição têm uma lupa ao lado deles . Clique na lupa para filtrar a regra para mostrar apenas as regras que se aplicam ao notação atual que tentam definir a mesma propriedade: isto é, a cascata completa para a propriedade dada.

+ +

Isso torna mais fácil ver qual regra está substituindo a declaração:

+ +

{{EmbedYouTube("i9mDVjJAGwQ")}}

+ +

Examine CSS calculado

+ +

Para ver o calculo compelo to CSS par ao elemento selecionado, altere para a Janela Computed. This shows the calculated value that each CSS property has for the selected element:

+ +

+ +

Clicando na flecha próximo ao nome da propriedade mostra a regra que define esse valor, juntamente com um link para o nome do arquivo fonte e o número da linha:

+ +

+ +

Por padrão, exibe apenas valores expicitamente definidos pela página: para ver todos os valores clique na caixa "Browser styles"

+ +

 

+ +

Digitar na caixa de pesquisa executa uma filtragem automática na lista, portanto, por exemplo, se você quiser apenas ver as configurações relacionadas a fontes, você pode digitar “font” na caixa de pesquisa e somente propriedades com “font” no nome serão listados. Você também pode pesquisar para valores das propriedades: para encontrar a regra responsável por definir a fonte para “Lucida Grande”, digite isso na caixa de pesquisa.

+ +

Editar regras

+ +

Se você clicar na declaração ou em algum seletor na visualização das regras, poderá editar e ver o resultado imediatamente. Para adicionar uma nova declaração para uma regra, clique na última linha da regra(a linha ocupada pela chave de fecho)

+ +

Quando você começar a digitar o nome da propriedade, você verá uma lista de sugestões de auto-preenchimento. Pressione Tab para aceitar a sugestão destacada ou Cima e Baixo para mover entre as sugestões.

+ +

Iniciado no Firefox 48, a escolha padrão é a propriedade mais comum que começa com as letras que você digitou . Por exemplo, aqui nós escrevemos "c" e o padrão escolheu "color":

+ +

+ +

Se você colocar um valor inválido para uma propriedade ao editar, ou uma propriedade desconhecida, um icone de alerta amarelo aparece além da declaração.

+ +

Qualquer mudança é temporária: Atualizando a página voltará ao normal.

+ +

Você pode usar as teclas de seta para aumentar/diminuir regras numéricas durante a edição . O botão Cima transformará "1px" para 2px, e Shift + Cima/Baixo irá acrescentar ou diminuir 10. Alt + Cima/Baixo altera os valores por 0.1, e Shift + Page up/Page down você adiciona ou subtrai 100 do valor.

+ +

Do Firefox 44, a s edições feitas na visualização regras são refletidas no editor de estilo, e vicce-versa.

+ +

Regras adicionais

+ +

Você pode adicionar novas regras na vizualização de regras. Basta clicar com o botão direito para exibirr um menu e selecionar "Add rule". Isso vai adionar uma nova regra cujo o seletor corresponde a seleção atual.

+ +

+ +

Inicio no Firefox 41, Há um botão que permite que você faça a mesma coisa:

+ +

+ +

Copiando regras

+ +

Inciado no Firefox 41, há itens extras no menu de regras que permite copiar regras ou partes de regras para a área de transferência:

+ + + +

+ +

Veja também

+ + diff --git a/files/pt-br/tools/page_inspector/how_to/examine_grid_layouts/index.html b/files/pt-br/tools/page_inspector/how_to/examine_grid_layouts/index.html new file mode 100644 index 0000000000..9feb12e545 --- /dev/null +++ b/files/pt-br/tools/page_inspector/how_to/examine_grid_layouts/index.html @@ -0,0 +1,34 @@ +--- +title: 'CSS Grid Inspector: Examine grid layouts' +slug: Tools/Page_Inspector/How_to/Examine_grid_layouts +tags: + - Ferramentas + - Guía + - Inspetor +translation_of: Tools/Page_Inspector/How_to/Examine_grid_layouts +--- +
{{ToolsSidebar}}

Ícones da grade na visão de Réguas

+ +
Novo no Firefox 52
+ +

Começando na Ferramenta de Desenvolvedores do Firefox 52, você pode soliciar ao inspetor que sobreponha uma representação da grid quando inspecionar layouts com grids.

+ +

Quando um elemento na visão de Régua possui uma declaração display: grid, ele leva um ícone de grade (grid) ao lado dele: . Clique no ícone para apresentar a grade (grid) sobreposta na página, incluindo as linhas da grid e faixas:

+ +

A sobreposição (overlay) continua a ser apresentada quando você seleciona outros elementos, então você pode editar o CSS de outros itens da grid e ver como a grid é afetada.

+ +

{{EmbedYouTube("lzjIe-8WhiQ")}}

+ +

O painel de layout da grid

+ +
Novo no Firefox 56
+ +

Firefox 56 baseia-se nos recursos anteriores de grade, provendo um inteiramente novo painel de layout cheio de opções e informações para grades de depuração. Você pode encontrar todas as informações que precisa sobre isto em Novas adições poderosas para o Inspetor de grades CSS no Firefox Nightly.

+ +

{{EmbedYouTube("dU7xtnzfqxQ")}} 

+ +

See also

+ + diff --git a/files/pt-br/tools/page_inspector/how_to/index.html b/files/pt-br/tools/page_inspector/how_to/index.html new file mode 100644 index 0000000000..2f18038ec9 --- /dev/null +++ b/files/pt-br/tools/page_inspector/how_to/index.html @@ -0,0 +1,13 @@ +--- +title: How to +slug: Tools/Page_Inspector/How_to +tags: + - NeedsTranslation + - TopicStub +translation_of: Tools/Page_Inspector/How_to +--- +
{{ToolsSidebar}}

Links for various HOW TO's can be found here. These links describe in depth the HOW TO techniques.

+ +

{{ ListSubpages () }}

+ +

 

diff --git a/files/pt-br/tools/page_inspector/how_to/open_the_inspector/index.html b/files/pt-br/tools/page_inspector/how_to/open_the_inspector/index.html new file mode 100644 index 0000000000..3f7af895dd --- /dev/null +++ b/files/pt-br/tools/page_inspector/how_to/open_the_inspector/index.html @@ -0,0 +1,19 @@ +--- +title: Open the Inspector +slug: Tools/Page_Inspector/How_to/Open_the_Inspector +tags: + - Ferramentas + - Guía + - Inspetor +translation_of: Tools/Page_Inspector/How_to/Open_the_Inspector +--- +
{{ToolsSidebar}}

Há duas formas principais de abrir o Inspector:

+ + + +

O Inspector aparecerá no final da janela do navegador:

+ +

The all-new Inspector in Firefox 57 DevTools.Para começar a utilizar o Inspector, veja a UI tour.

diff --git "a/files/pt-br/tools/page_inspector/how_to/trabalho_com_anima\303\247oes/index.html" "b/files/pt-br/tools/page_inspector/how_to/trabalho_com_anima\303\247oes/index.html" new file mode 100644 index 0000000000..8d2d788d50 --- /dev/null +++ "b/files/pt-br/tools/page_inspector/how_to/trabalho_com_anima\303\247oes/index.html" @@ -0,0 +1,175 @@ +--- +title: Trabalho Com Animações +slug: Tools/Page_Inspector/How_to/Trabalho_Com_Animaçoes +translation_of: Tools/Page_Inspector/How_to/Work_with_animations +--- +
{{ToolsSidebar}}

This article covers three tools you can use to visualize and edit animations:

+ + + +

Animation inspector

+ +
+

This page describes the Animation inspector as it appears in Firefox 48. Note that the example requires Firefox 47 or higher.

+
+ +

The Page Inspector's Animations view displays animations in the page synchronized along a timeline, with a draggable widget you can use to move to any point in the timeline and see the page at that point.

+ +

It displays animations created using CSS transitions, CSS @keyframes rules, or the Web Animations API. Starting in Firefox 48, it will show animations applied to the ::before and ::after pseudo-elements.

+ +

To see how it works, we'll walk through an example. The box below contains a grayscale icon, representing Firefox Developer Edition. If you click the icon, it enlarges and changes to color, and the name of the browser appears. Click the icon again to reverse the effect.

+ +

{{ EmbedLiveSample('firefox-logo-animation', 500, 200, "", "Tools/Page_Inspector/How_to/Work_with_animations/Animation_inspector_example:_Web_Animations_API") }}

+ +

These animations are made using the Web Animations API.

+ +

Let's use the animation inspector to see what's going on in this example.

+ +
    +
  1. Using Firefox 47 or later, right-click in the box and select "Inspect Element"
    2. +
  2. Make sure the selected element is the <div class="channel">
    3. +
  3. Switch over to the "Animations" tab
    4. +
  4. Play the animation
    5. +
+ +

{{EmbedYouTube("OYkFARSgQB8")}}

+ +

Let's take a closer look at the contents of the animation inspector here:

+ +

+ +

It shows a synchronized timeline for every animation applied to the selected element or its children. The timeline starts at the start of the first animation, ends at the end of the last animation, and is labeled with markers every 250 milliseconds (this depends on the time scale of the animations currently displayed).

+ +

Animation bars

+ +

Each animation or transition is shown as a horizontal bar laid across the timeline. The bar is:

+ + + +

The bar contains a lightning bolt icon if the property was animated using the compositor thread (see more about the cost of animating different CSS properties).

+ +

If the animation used CSS transitions, there is one bar for each property transitioned, and it is labeled with the name of the property being transitioned. If the animation used CSS @keyframes, there is one bar for each animation, labeled with its name.

+ +

If the animation or transition had a delay, this is shown as a cross-hatched portion of the bar. delay and endDelay are both represented.

+ +

If you hover over the bar, a tooltip appears, giving you more detailed information about the animation or transition, including:

+ + + +

+ +

Information about the animated element

+ +

To the left of each bar is a selector for the element that the animation applies to. If you hover over this selector, the element is highlighted in the page. Click the selector to select the element in the inspector.

+ +

{{EmbedYouTube("AvICwiWpYiE")}}

+ +

To the left of the selector is a "target" icon (). Clicking this icon will lock the highlighter on the element.

+ +

Animation details

+ +

If you click one of the bars, you'll see details of all the properties that were changed in the animation. For example, try clicking on the bar for img#icon's animation:

+ +

+ +

This is telling us that two properties were modified: filter and transform. Each dot represents an entry for that property in the set of keyframes used for the animation. Both properties were initialized at 0ms and finalized at 750ms. filter was given a value at 250ms and transform at 500ms. If you hover over a dot, you'll see the value assigned to that property at that point in the timeline:

+ +

+ +

This is essentially a visual representation of the animation's keyframes:

+ +
var iconKeyframeSet = [
+  { transform: 'scale(1)',   filter: 'grayscale(100%)'                },
+  {                          filter: 'grayscale(100%)', offset: 0.333 },
+  { transform: 'scale(1.5)',                            offset: 0.666 },
+  { transform: 'scale(1.5)', filter: 'grayscale(0%)'                  }
+];
+ +

Application to the example

+ +

Applying all this to our example, we can see that:

+ + + +

Further information about animation compositing

+ +

In Firefox 49 and above, the information exposed by the Animation Inspector about animation performance/compositing has been improved. We've created a couple of examples to demonstrate this. If you open up animation-inspector-compositing.html and click the red rectangle, a simple {{cssxref("opacity")}} animation will start. If you look at this in the Animation Inspector in Firefox 49+, you'll see that:

+ + + +

+ +

Let's now look at animation-inspector-compositing-silly.html — this is the same example, except that now once the red rectangle is clicked we animate both the {{cssxref("left")}} and {{cssxref("transform")}} (with a translation) properties at the same time as {{cssxref("opacity")}}. It doesn't make much sense to try to animate a geometric property and a translation at the same time — the two effects won't be synchronized — so the transform property is deliberately not handed over to the compositor to handle. The Animation Inspector will rather helpfully tell you this in Firefox 49+ — look at it now and you'll see that:

+ + + +

+ +

Animation playback

+ +

At the top of the animation inspector:

+ + + +

Finally, if you click inside the bar at the top of the timeline, you get a scrubber that you can drag left and right to move backwards and forwards through the animation, and pinpoint exactly what's happening when:

+ +

{{EmbedYouTube("Xo6rUf0kGyM")}}

+ +

Edit @keyframes

+ +

Any @keyframes rules associated with the currently selected element are displayed in the Rules view and are editable:

+ +

{{EmbedYouTube("mDHtLK88ZW4")}}

+ +

Edit timing functions

+ +

When you create a CSS animation you can specify a timing function: this determines the rate at which the animation progresses. One way to specify the timing function is with a cubic Bézier curve.

+ +

Timing functions defined as cubic Bézier curves get an icon in the Rules view. If you click the icon you get a visual editor for the curve, enabling you to drag P1 and P2, and see the results in the page:

+ +

{{EmbedYouTube("GW5-R2ewaqA")}}

+ +

This feature uses open source code from Lea Verou’s cubic-bezier.com.

+ +

The cubic Bézier editor includes a number of presets, grouped under "Ease-in", "Ease-out", and "Ease-in-out":

+ +

{{EmbedYouTube("Jx-J2Yy0aSg")}}

diff --git a/files/pt-br/tools/page_inspector/index.html b/files/pt-br/tools/page_inspector/index.html new file mode 100644 index 0000000000..9bb012d40d --- /dev/null +++ b/files/pt-br/tools/page_inspector/index.html @@ -0,0 +1,276 @@ +--- +title: Page Inspector +slug: Tools/Page_Inspector +translation_of: Tools/Page_Inspector +--- +
{{ToolsSidebar}}

Utilize o Inspector para analisar e modificar a estrutura e layout de uma página.

+ +

Abrindo o Inspector

+ +

Há várias maneiras de abrir o Inspector:

+ + + +

O Toolbox vai aparecer na parte inferior da janela do seu navegador, com o Inspector ativo.

+ +

Se você abrir o Inspector clicando em "Inspect Element", algum elemento já estará selecionado e o Inspector vai funcionar conforme demonstrado na seção abaixo chamada "Selecionando Elementos".

+ +

Outro caminho é mover o mouse por toda a página: o elemento abaixo do mouse fica em desdwataque e com uma borda pontilhada e são exibidas as informações sobre a sua tag HTML. Ao mesmo tempo, do lado esquedo da janela do Inspector, é exibida sua definição HTML contextualizada. Para quem usa o Firefox 30, serão exibidos também os grid lines do elemento seu modelo de caixa, conforme a imagem a seguir:

+ +

+ +

Após selecionar um elemento, o Inspector funcionará conforme demonstrado na próxima seção "Selecionando Elementos".

+ +

Selecionando elementos

+ +

Quando um elemento é selecionado, seu HTML é destacado do lado esquerdo do Inspector e suas informações de estilo são exibidas no painel de CSS que fica ao lado direito:

+ +

A forma como funciona a seleção de elementos teve mudanças significativas no Firefox 29 e, no Firefox 30 , o Inspector mostra o modelo de caixa de cada elemento da página.

+ +

Antes do Firefox 29

+ +

Quando você seleciona um elemento clicando sobre ele na página, o painel do Inspector fica travado neste elemento. Assim, mesmo se você mover o mouse para outro lugar na página, o Inspector não muda sua exibição para outro elemento. 

+ +

Ao clicar sobre o elemento selecionado, dois botões são exibidos: o do lado esquerdo desbloqueia o Inspector do elemento e permite que você selecione outro elemento na página. O do lado direito mostra um menu popup sobre o elemento.

+ +

+ +

Firefox 29

+ +

No Firefox 29, a borda pontilhada ao redor do elemento e suas anotações são mostradas quando você passa o mouse sobre o elemento na página e não apenas quando o mesmo for selecionado. Além disso, o Inspector não fica travado no elemento selecionado: ele exibe as informações do elemento correspondente ao que o mouse está em cima. Para selecionar um elemento diferente na página, clique no botão "Select element" que aparece na Barra de ferramentas do Toolbox:

+ +

{{EmbedYouTube("zBYEg40ByCM")}}

+ +

A partir do Firefox 30

+ +

Aqui, o comportamento de seleção é o mesmo do Firefox 29, mas o Inspector também mostra o modelo de caixa e as grid lines para o elemento selecionado na página:

+ +

{{EmbedYouTube("y2LcsxE2pR0")}}

+ +

 

+ + + +

Você pode executar algumas tarefas específicas no menu popup. Para ativá-lo, clique no contexto do elemento no painel de HTML:

+ +

+ +

O menu oferece as seguintes opções para você:

+ + + +
Veja outras opções:
+ +
 
+ + + +

+ + + +

+ +

Copiar a URL de imagens

+ +

A partir do Firefox 29, se o elemento selecionado for uma imagem, há também a opção de copiar A URL da imagem.:

+ +

+ +

Editando HTML

+ +


+ Para editar um elemento externamente (outerHTML), selecione no menu popup a opção "Edit As HTML". Uma caixa para edição de HTML será aberta:

+ +

Você pode adicionar qualquer código HTM aqui: alterando tags ou adicionando novas. Para sair, basta clicar fora da caixa e as modificações serão realizadas na página.

+ +

Painel de HTML

+ +

O painel de HTML exibe a página HTML como uma árvore, em que é possível expandir e recolher cada nó. O início e o fim de cada tag para os elementos selecionados ficam em destaque com a cor fundo acizentada.

+ +

Você pode editar o HTML - tags, atributos e conteúdo - diretamente no painel: clique no elemento que você deseja editar, realize as modificações e dê Enter que as mudanças podem já ser vistas na página.

+ +

Barra de ferramentas do painel de HTML

+ +

Na parte de cima do painel, há uma barra de ferramentas dividida em três partes:

+ +
+

A partir do Firefox 29, o botão "Select element" foi movido para a Toolbox.

+
+ + + +

Painel de CSS

+ +

O painel de CSS mostra as informações de estilo relacionadas ao elemento que está sendo inspecionado. Há 4 opções de visualização nesse painel:  "Rules", "Computed", "Fonts", and "Box Model". Você pode chavear entre elas clicando no menu superior:

+ +

+ + + +

Aqui são mostradas todas as regras aplicadas ao elemento selecionado, na ordem da mais específica à menos:

+ +

+ +

Aqui também são listados os pseudo-elements e as regras que eles aplicam.

+ +

Tela da opção Rules

+ +

Essa tela mostra todas as regras como em um folha de estilo, com uma lista de seletores seguida de uma lista de propriedade:valor; declarações.

+ +

Você pode realizar testes com todas as declarações deixando-as desabilitadas. Para isso, basta clicar no checkbox ao lado de cada uma, alterando entre habilitada ou não.

+ + + +

À direita de cada declaração, é exibido o link com o nome do arquivo CSS e o número da linha em que ela se encontra. Se você clicar ali, o arquivo será aberto no Style Editor.

+ +

A partir do Firefox 29, o Inspector entende o mapa do código CSS (CSS source map). Isso significa que se você estiver utilizando um editor CSS em que funcionem os mapas de código e se você habilitar o mapa de código no Style Editor settings, o link levará você até o código original e não ao CSS gerado.

+ +

+ +

Leia mais sobre isso em Style Editor documentation.

+ +

Amostra de cores

+ +
+

A partir do Firefox 27,  você pode ver a amostra da cor próxima ao seu valor:

+
+ +

+ +

Seletor de cor

+ +
+

A partir do Firefox 28, se você clicar na amostra de cor, uma paleta de cores será aberta para você selecionar qual deseja.

+
+ +

+ +

Pré-visualização da imagem de fundo (Imagem background-image preview)

+ +
+

A partir do Firefox 27,  você pode pré-visualizar a imagem especificada utilizando o background-image que funciona ao passar o mouse sobre o link da imagem:

+
+ +

+ +

Visualização transform 

+ +
+

Isto é novo no Firefox 29.

+
+ +

A partir do Firefox 29 , se você passar o mouse sobre a propriedade transform na tela Rules,  você consegue visualizar a transformação que ali ocorre:

+ +

+ +

Editando rules

+ +

Se você clicar em uma declaração para editar sua propriedade ou valor, você visualiza o resultado imediatamente (aqui você também pode adicionar novas declarações, basta clicar no fim de uma já existente e dar Enter). O Inspector reconhece inclusive se você inserir um valor ou propiedade errado ou inexistente: ele coloca um alerta amarelo no local.

+ +

Qualquer mudança que você fizer é temporária: com um reload a página volta com seu estilo original.

+ +

Dica: Você pode usar as setinhas do seu teclado para fazer ajustes nos valores numéricos enquanto edita, como se fosse um ajuste fino.

+ + + +

Nesta opção, o estilo do elemento é organizado pela propriedade. Isso lista todas as propriedades CSS que foram aplicadas ao elemento em ordem alfabética e os valores para cada uma:

+ +

+ +

Clicando na propriedade, você vê a declaração referente àquele valor mais o link para o arquivo de código e número da linha:

+ +

Como padrão, só são mostrados os valores que estão sendo explicitamente usados na página: para ver todos valore, selecione a opção "Browser styles" que fica na parte de baixo do painel. 

+ +

Utilize o campo de busca (search box) para buscar na página as declarações tanto por propriedades quanto por valores. Por exemplo, se você bucar por "font", serão exibidas todas as propriedades que estão na página que contêm a palavra "font" em seu nome.

+ + + +

Aqui são listadas todas as fontes (ou a única) que estão sendo utilizadas pelo elemento selecionado. Mas, veja que são mostradas as fontes usadas no seu sistema, que não necessariamente é a fonte especificada no CSS original:

+ +

+ +

Menu Box model

+ +

Aqui é exibida uma representação gráfica do modelo de caixa (box model) aplicado ao elemento:

+ +

+ + + +

+ +

Usando o Inspector com um Web Console

+ +

Você tamabém pode utilizar um web console ao mesmo tempo em que usa o inspetor de página. Na verdade, você inclusive possui uma feature a mais: o elemento selecionado que está sendo inspecionado pelo inspetor de página pode ser referenciado em JavaScript no Web Console através da utilização da variável $0.

+ +

+ +

Developer API

+ +

O Firefox pode acessar os seguintes objetos a partir do contexto chrome://browser/content/devtools/inspector/inspector.xul:

+ +

window.inspector

+ +

definido em inspector-panel.js. Atributos e funções:

+ + + +

Bindable events using on:

+ +

markuploaded

+ +

Called when the left panel has been refreshed, after page change.

+ +

ready

+ +

Called on first markuploaded.

+ +

pseudoclass

+ +

Called after toggle of a pseudoclass.

+ +

layout-change

+ +

"low-priority change event for things like paint and resize."

+ +

Atalhos de teclado

+ +

{{ Page ("en-pt-BR/docs/tools/Keyboard_shortcuts", "page-inspector") }}

+ +

Global shortcuts

+ +

{{ Page ("pt-BR/docs/tools/Keyboard_shortcuts", "all-toolbox-tools") }}

-- cgit v1.2.3-54-g00ecf