Menu Explicação das ferramentas de desenvolvedor do IE8

Este artigo explicou brevemente os vários menus de ferramentas de desenvolvedor. Eu acredito que todos podem usar facilmente essa ferramenta poderosa.

Explicação detalhada do uso de ferramentas de desenvolvedor IE8 (explicação detalhada dos menus em todos os níveis)

A versão oficial do IE8 foi lançada. Este artigo não fará nenhum comentário de maneira muito absurda e, em seguida, concluirá que o Chrome tem a capacidade de executar o JavaScript, 15 vezes o do IE8, que o IE8 tem 2,456 vezes o do Safari e o que o IE8 tem 1,235 vezes maior que o Firefox. Com quem me preocupo é melhor do que quem? Tudo o que sei é: quando o Windows 7 for lançado, a participação de mercado do navegador IE8 tornará os desenvolvedores de front-end não conseguirem dizer: não se preocupe com o IE8, poucas pessoas o estão usando. Portanto, este artigo explicará muito pragmaticamente. O IE8 pode ser a única ferramenta de desenvolvedor que faz os desenvolvedores se sentirem amigáveis. Ao mesmo tempo, estenderemos algumas informações e conhecimentos relevantes. Então, por favor, abandone seu preconceito contra o IE8 e continue assistindo pacientemente.

O IE8 ainda não foi instalado?

Se você é um desenvolvedor de front-end, instale isso. Porque a versão oficial foi lançada. Ao contrário da versão beta anterior, temos que prestar atenção a ela seriamente desta vez. Vá e faça o download e instale um, o seguinte é o endereço de download-

IE8 Lista de download de versão chinesa

Windows XP

Windows Vista

Windows Server 2003

Windows Server 2008

Windows XP 64 bits

Windows Vista de 64 bits

Windows Server 2003 64 bits

Windows Server 2008 64 bits

IE8 Lista de download de versão em inglês

Windows XP

Windows XP 64 bits

Windows Vista

Windows Vista 64 bits

Windows Server 2003

Windows Server 2003 64 bits

Windows Server 2008

Windows Server 2008 64 bits

Oh, talvez você se preocupe que o IE6 ou o IE7 no seu sistema tenha terminado. Sim, de fato, isso é possível. No entanto, você pode tentar a seguinte ferramenta. Ele permite que você coexiste com várias versões de IE - soluções para coexistência de múltiplas versões do IE - IETESTER

SuperPreview (com download)

Embora essa coisa tenha mudado seu nome da moda, não é uma coisa nova. Seu antecessor era iEDevToolbar. No entanto, costumava ser apenas um plug-in para o IE. No IE8, o navegador integrou automaticamente isso, que não apenas mudou o nome de um pouco rústico, mas também tem muito aprimoramento das funções.

As ferramentas de desenvolvedor também podem ser chamadas no menu Ferramentas do IE8 ou clique diretamente na tecla de atalho F12.

Antes de apresentá -lo, vamos falar sobre o que essa coisa pode fazer? Se você apenas usar um navegador para navegar no site, sem se preocupar com a forma como a página é feita. Então eu acho que você pode deixar esta página.

No geral, as ferramentas de desenvolvedor são ferramentas projetadas para desenvolvedores de front-end para desenvolver páginas. Forneça uma série de gadgets para permitir que você encontre facilmente bugs de página, incluindo código HTML, código CSS e código JavaScript. Ao mesmo tempo, ele também fornece algumas pequenas ferramentas que são bastante inúteis, mas ainda podem bater no cheiro, como colheita de cores, régua de tela, etc.

Ok, vimos e sabemos o que pode fazer. Então vamos apresentá-lo um a um de acordo com a ordem do menu-

Este artigo explicou brevemente os vários menus de ferramentas de desenvolvedor. Eu acredito que todos podem usar facilmente essa ferramenta poderosa.

【Revogar tudo】

Todas as operações realizadas nas ferramentas do desenvolvedor foram canceladas e a página e as estruturas DOM são atualizadas.

【Fonte de tentativa personalizada do Internet Explorer】

【Tentando fonte】 Que porra de substantivo. De uma maneira simples, é: qual editor usar para visualizar o arquivo de origem da web. Por exemplo: estou usando o editplus.

【desistir】

Para não insultar seu QI, não vou dizer muito sobre isso. Bem, o F12 é uma chave de atalho de paridade, vamos mencionar isso.

【Encontre】 Menu

Clique para selecionar elemento

A chave de atalho Ctrl B tem o mesmo efeito que clicar no botão ICO do mouse na figura. A função mais usada. É também um interruptor de paridade. Ao abrir, ao clicar em um elemento na página com o mouse, o elemento modificado será selecionado e a estrutura DOM, o estilo CSS e outras informações do elemento modificado serão listadas.

Por exemplo, a imagem acima. A área à esquerda mostra as informações DOM para este elemento hiperlink. Seus elementos pais, filhos e irmãos podem ser vistos claramente.

A área à direita mostra as informações do estilo do elemento. O estilo que é rastreado pela linha significa que o estilo não funciona mais porque a prioridade não é alta o suficiente. Durante a depuração, o gancho anterior pode ser preso. Quando ligado, significa que esse estilo é forçado a ser excluído. Além disso, as propriedades de cada estilo podem ser modificadas imediatamente após clicar com o mouse. Isso verá instantaneamente o efeito da página modificado, que é muito conveniente.

Amigos que usaram o Firefox do Firebug devem estar familiarizados com isso. A única diferença é: o Firebug organiza estilos com menor prioridade abaixo, tudo isso.

A função das visualizações de [estilo de rastreamento] e [estilo] são iguais e são usadas para visualizar as informações de estilo do elemento selecionado. A única diferença é: mudou seu método de visualização. A visão específica de seu hábito depende de suas próprias preferências.

Este artigo explicou brevemente os vários menus de ferramentas de desenvolvedor. Eu acredito que todos podem usar facilmente essa ferramenta poderosa.

[Layout] A exibição pode exibir informações de modelo em caixa de elementos selecionados. Embora possa exibir mais informações do que o Firebug, eu ainda prefiro o caminho no Firebug para expressá -las diretamente na página com blocos de cores.

[Propriedades] A visualização pode visualizar as informações de atributo do elemento selecionado. É muito gratificante: você pode adicionar ou excluir algumas propriedades imediatamente para depurar rapidamente a página.

Oh, certo. Deve -se notar que, se você modificar o estilo ou os atributos do elemento selecionado na ferramenta de desenvolvedor, eles são apenas depuração temporária e não estarão modificando seu código -fonte da página da web.

【Desativar】 menu

【Script】

Javascript ou scripts VBScript na página são proibidos. Por que desativá -lo? Para testar a robustez da página. Alguns clientes que têm requisitos altos para o design da página perguntarão: se o cliente desativar o script, esta página ainda pode ser usada? Bem, sim, essa função é usada para testar as necessidades pervertidas desses clientes.

【Bloqueador de janelas pop-up】

Filtre para janela pop -up. Usado para testar qual pode fazer com que o navegador ou o software de segurança filtrem minha janela pop -up.

【CSS】

O CSS Nude Festival está chegando! Use isso para testar a postura da sua página ao executar nu no CSS. Este também é um teste importante para verificar a robustez e a acessibilidade da página. Embora não haja muitas pessoas cegas que possam acessar as páginas da Web na China agora.

Este artigo explicou brevemente os vários menus de ferramentas de desenvolvedor. Eu acredito que todos podem usar facilmente essa ferramenta poderosa.

【Informações sobre classe e identificação】

A chave de atalho é Ctrl I, o interruptor de paridade. Depois de abri -lo, você verá que a página está coberta com densos blocos de cores vermelhas. O nome da classe ou nome de identificação será exibido. Sim, este é o efeito de visualizar informações de classe e identificação. Mas, para ser sincero, quem estaria interessado neste banquinho vermelho? A página não apenas parece uma roupa de um mendigo cheia de patches, mas também não tem conhecimento disso -_- b ...

【Caminho de ligação】

O mesmo que acima. Ele encaixará todos os hiperlinks na página em vermelho e exibirá seu endereço de link.

【Relatório de link】

Usando o recurso de relatório de link, a ferramenta de desenvolvedor ajudará você a gerar um relatório de link para esta página. Inclui informações como o número de links, o endereço de link, se uma nova janela está aberta etc. Mas qual é a utilidade dessa coisa? Eu também não sei.

【Índice de guia】

Destaque todos os elementos que contêm atributos do Tabindex. A configuração da propriedade Tabindex pode alterar a ordem em que os elementos da página da web recebem foco.

Este artigo explicou brevemente os vários menus de ferramentas de desenvolvedor. Eu acredito que todos podem usar facilmente essa ferramenta poderosa.

【Chave de acesso】

Destaque todos os elementos que contêm o atributo AccessKey. Defina o atributo AccessKey para definir as teclas de atalho para elementos para obter o foco.

【Arquivo de origem】 Elemento fonte com estilo

Gere um arquivo de origem contendo estilos de elementos selecionados, código HTML e informações no nível da Web.

Um elemento deve ser selecionado antes que este comando seja válido. Além disso, o arquivo de origem gerado está relacionado apenas aos elementos selecionados.

【Arquivo de origem】 DOM (elemento)

A tecla de atalho é Ctrl T. gerar um arquivo de origem. Este arquivo de origem contém apenas informações de estrutura DOM para o elemento selecionado. Amigos que usaram o Firebug podem pensar no código HTML do elemento de cópia de comando. Na verdade, este é semelhante ao que. É só que isso é gerado para uma janela e o Firebug é copiado diretamente para a área de transferência.

【Arquivo de origem】 DOM (página)

Chave de atalho Ctrl G. Gere um arquivo de origem. Este arquivo de origem contém a estrutura de informações DOM de toda a página. É um recurso muito porra. Não sei se é por causa do bug. Esse recurso é realmente para visualizar o código -fonte da página da web. Porque o código -fonte gerado não é apenas informações de DOM, mas também informações de scripts e script.

Status original de 【File de origem】

A função extremamente foda é realmente visualizar o código -fonte da página da web. Todos devem preferir usar o botão certo do mouse para clicar diretamente na página da web.

O menu [esboço] é obviamente um comando para delinear os elementos que atendem às condições e os exibem.

【Célula de tabela】

É para enquadrar cada célula da tabela de formulários com estrutura de arame laranja . Avise você. Acontece que esta é a célula da tabela.

【superfície】

É para enquadrar o formulário em Wireframe laranja . Avise você. Acontece que este é o formulário.

【Div Elements】

É para usar wireframes verdes para todos os elementos da div na página. Avise você. Acontece que esses são elementos div.

Este artigo explicou brevemente os vários menus de ferramentas de desenvolvedor. Eu acredito que todos podem usar facilmente essa ferramenta poderosa.

【imagem】

É para enquadrar todos os elementos IMG na página em Wireframe roxo . Avise você. Acontece que esses são todos os elementos IMG.

【Qualquer elemento】

Este é mais poderoso. Você pode personalizar qualquer rótulo e qual a cor que eles querem usar para sair do wireframe. Clique neste menu e a caixa de diálogo abaixo será exibida. Muito simples. Não há mais explicações.

【Elementos de posicionamento】 Relativo

Será enquadrado em verde , todos os elementos com posição: estilo relativo.

【Elemento de posicionamento】 Absoluto

Ele será enquadrado com Wireframe preto , todos os elementos com posição: estilo absoluto.

【Elemento de posicionamento】 fixo

Será enquadrado em azul , todos os elementos com posição: estilo estático.

【Elemento de posicionamento】 Float

Ele será enquadrado com arames amarelos , todos os elementos com estilo de flutuação.

【Esboço claro】

Quando sua página for feita com várias cores de linhas, como mesas do Excel, você pode usar este comando para limpar todas as linhas.

Este artigo explicou brevemente os vários menus de ferramentas de desenvolvedor. Eu acredito que todos podem usar facilmente essa ferramenta poderosa.

Obviamente, este comando controla várias imagens na página.

【Desativar imagens】

Para não insultar seu QI, não direi isso. A única coisa a ser explicada é que não apenas o elemento IMG, mas também a imagem de fundo do elemento será desativada.

【Mostrar tamanho da imagem】

Recurso muito bom. Você pode saber rapidamente o tamanho de cada imagem sem verificar os atributos da imagem. Obviamente, a unidade é pixels.

【Mostrar tamanho do arquivo de imagem】

Recurso muito bom. Você pode saber rapidamente o tamanho do arquivo de cada imagem sem verificar as propriedades da imagem. Obviamente, a unidade é bytes.

【Mostrar caminho de imagem】

Recurso muito bom. Você pode saber rapidamente o caminho da URL de cada imagem sem verificar os atributos da imagem e também pode copiá -la.

【Mostrar texto alt】

O texto do atributo ALT do elemento IMG pode ser exibido. A propósito: não acumule palavras -chave para imagens, caso contrário, será facilmente considerada como otimização de transição de SEO.

【Ver Relatório da imagem】

Gere um relatório de imagem detalhado para modificar a página. Contém informações muito detalhadas para cada imagem.

Este artigo explicou brevemente os vários menus de ferramentas de desenvolvedor. Eu acredito que todos podem usar facilmente essa ferramenta poderosa.

Gerencie grupos de menu de caches e cookies. Este será um recurso muito agradável para os desenvolvedores.

【Sempre refresque -se do servidor】

Parece um comando muito profundo. Em outras palavras, é proibido usar o cache do navegador.

【Cache de navegador claro】

Tecla de atalho Ctrl R. Não há nada a dizer, apenas simplifica as etapas de operação anteriores.

Não sei se você notou que existem três pontos atrás do [cache do navegador claro] no menu. Isso significa que a caixa de diálogo será confirmada após clicar neste menu.

【Limpe o cache do navegador para este domínio】

Tecla de atalho Ctrl D. Não há nada a dizer, basta limpar o cache do navegador nesse domínio.

【Desativar cookies】

Não há benefício a dizer. Não são permitidos biscoitos.

【Cookies de sessão limpa】

Limpe todos os cookies no seu navegador. Seu fórum e comunidade estão esperando para fazer login novamente.

【Limpe os cookies de domínio】

Apenas biscoitos limpos neste domínio.

【Ver informações de cookies】

Veja as informações de cookies contidas nesta página. Nem pense nisso, você não receberá a senha.

Alguns gadgets úteis estão incluídos nas ferramentas do desenvolvedor, embora sejam um pouco mais fracas do que outras ferramentas relacionadas especializadas. Mas a resposta de emergência ainda é suficiente.

【Rediar】

Gadget muito útil. Você pode ajustar rapidamente a janela do navegador para o tamanho relevante. Dessa forma, será muito mais conveniente testar a compatibilidade da resolução da Web.

【Mostrar governante】

Uma ferramenta de régua simples. Use -o para medir o comprimento, a distância e outras informações. A cor da linha pode ser alterada. Vários títulos também podem ser criados. Se estiver muito fino, você pode usar a função de lupa .

【Mostrar seletor de cores】

Uma ferramenta simples de coleta de cores. Clique no mouse para selecionar a cor. No entanto, recomendo outra ferramenta para você - minha caixa de ferramentas de trabalho - Colorpic, que é muito simples nas ferramentas do desenvolvedor.

Este artigo explicou brevemente os vários menus de ferramentas de desenvolvedor. Eu acredito que todos podem usar facilmente essa ferramenta poderosa.

Definitivamente, causará tempestades sangrentas no mundo (obrigado Xiaoqi por me lembrar desse idioma que eu esqueci de repente, infelizmente, talvez porque eu já li menos romances de artes marciais mais recentes. Mas pareço estar familiarizado com idiomas como Panting e Lianlian recentemente). Em um futuro próximo, inúmeros Kong Yiji certamente serão produzidos.

【Html】

Verifique o código HTML da página. Esta página será enviada para a ferramenta de verificação HTML do W3C e um relatório de verificação será obtido.

【CSS】

Verifique o código CSS da página. Esta página será enviada para a ferramenta de verificação do CSS do W3C e um relatório de verificação será obtido.

【fonte】

Verifique o código do arquivo de origem da página. Esta página será enviada para a ferramenta de verificação do FeedValidator.org e um relatório de verificação será obtido.

【Link】

Verifique o link para a página. Esta página será enviada para a ferramenta de verificação do W3C e um relatório de verificação será obtido.

【HTML local】

Abra a ferramenta de verificação HTML do W3C para verificar a página local.

【CSS local】

Abra a ferramenta de verificação CSS do W3C para verificar a página local.

【Funções acessíveis】 Lista WCAG

Verifique o WCAG da página (acessibilidade do relatório de acessibilidade do conteúdo da Web). Esta página será enviada para a ferramenta de verificação do contentquality.com e um relatório de verificação será obtido.

Lista de [funções acessíveis]

Verifique os padrões da página 508. Esta página será enviada para a ferramenta de verificação do contentquality.com e um relatório de verificação será obtido.

【Múltiplas verificações】

Verifique a página ao mesmo tempo para verificar várias especificações.

Em relação à verificação da página, gostaria de dizer algumas palavras: de fato, a página precisa passar a verificação antes que ela possa ser lançada? Pessoalmente, sinto que é completamente desnecessário. Se você é um estudante, deite -se dentro da Torre do Marfim. Você pode jogar sua página a qualquer momento, porque você é o cliente e apenas tem tempo. No entanto, não há necessidade de desperdiçar recursos valiosos do projeto para um passe para projetos comerciais. Como nenhum cliente se importa com você, a página que fiz foi verificada pelo W3C em muitos aspectos. Se um cliente realmente se importa, só posso dizer que admiro sua capacidade de enganar.

Este artigo explicou brevemente os vários menus de ferramentas de desenvolvedor. Eu acredito que todos podem usar facilmente essa ferramenta poderosa.

Mas não mencionamos as funções mais poderosas. Tudo, por favor, aguarde nosso próximo artigo. No próximo artigo, explicaremos em detalhes o uso de depuração JavaScript, modo de navegador, modo de texto e outras funções.