On the fly CSS e mais
Firebug. Oh gloriosa Firebug. Dás-me uma razão para amar Firefox, apesar das suas muitas fugas de memória horrível. Você me dá esperança de que ainda há pessoas lá fora, olhando para ajudar designers / codificadores. Dás-me uma razão para instalar extensões. Você me poupar muito tempo e energia que sou capaz de escrever este post. Obrigado Firebug, por ser um amigo.
Firebug é uma extensão para o Mozilla Firefox que é projetada para ajudar desenvolvedores web depurar seu código em tempo real, bem como fornecer informação valiosa quanto ao tamanho, a estrutura ea composição global de um site que você está desenvolvendo. Encontrei alguns dos seus elementos supérfluos são realmente mais útil no mundo real desenvolvedores do que a sua real finalidade. Aqui estão algumas das minhas coisas favoritas sobre o plugin:
1) Na mosca CSS edição.
Eu descobri sobre este acidente no outro dia, e que a utilizaram provavelmente 50 vezes na última semana. Basta puxar para cima o seu Firebug, clique CSS, e você pode desativar, alterar, adicionar e CSS propriedades na mosca, e vê o navegador torná-los em tempo real. Incrível. Ótimo para encontrar apenas o direito montante de estofo para seu texto, ou onde o diabo para colocar esse "clara: float" propriedade. Você pode usá-lo para experimentar algumas texto diferente / background cores, ou ver se "border: 1px solid black" que realmente faz sidebar olhar mais limpo. Você pode inspecionar elementos, e então ver o que o CSS e onde é aplicada a eles, e editá-lo de lá também. Globalmente muito bonita ... ela faz uma brisa web design. Aqui o antes e depois do tiro.
2) O Yahoo! YSlow plugin. <- É uma ligação. Eu juro.
Você terá que instalar Firebug primeiro. É um plugin para o firefox Firebug. Ela não funciona stand-alone. Importa, no entanto, faz maravilhas para a instalação do Firefox.
Yslow irá fazer um ponto bastante completa 13 inspecção da sua página web, a fim de ajudar a determinar o seu estrangulamento. Se você encontrar o mais lento de partes de seu site, e como solucioná-los ... você não acha isso um bom passo no sentido de torná-lo mais rápido? Aqui está a minha página principal:
Desempenho Grade: C (71) --------------------------- A 1. Faça menos solicitações HTTP F 2. Use uma CDN F 3. Adicionar um cabeçalho Expires B 4. Gzip componentes A 5. CSS colocou no topo A 6. JS colocar no fundo A 7. Evite expressões CSS n / a 8. Faça JS e CSS externos Apenas consideram que esta se sua propriedade é um usuário comum home page. A 9. Reduzir consultas DNS A 10. JS apoucar A 11. Evite redirecionamentos A 12. Remover duplicado scripts F 13. Configurar ETags
No total, a mim em uma pontuação 71% (C). Para a minha página, isso é mais que bem. Eu não preciso eTags, e eu certamente não precisam de minha anfitriã 3 imagens em outro servidor. Gostaria de acrescentar um cabeçalho para expirar o que puder para assegurar a correcta colocação em cache. Vou pegar sobre isso.
Além disso, ele irá inspecionar todos os elementos em sua página, e dar-lhes a você em um pouco de bom gosto agradável leitura. Aqui está a minha homepage:
Esvaziar cache ferrado cache ------------------------------------------------ 1.3K 1 1.3K 1 documento HTML 2.4k 1 0.0K 1 Style Sheet Arquivo 6.3K 1 0.0K 0 JavaScript Arquivo 115.5K 3 0.0K 3 Imagens 1.2K 4 0.0K CSS 4 Images 10 9 HTTP Pedidos 126.9K 1.3K Total de tamanho
Nada mau ... Eu tenho certeza que eu podia cortar os tamanhos de imagem um pouco para baixo, mas, mesmo sobre uma conexão dial-up, ele vai carregar em cerca de 20 segundos. A boa notícia é que, uma vez que a página está em cache, não há muito para refrescar para visitas posteriores. legal.
3) em tempo real Javascript depuração
Agora, este é realmente o que foi projetado para Firebug, desde o início. Eu só não acontecerá a utilização javascript muito, portanto, encontrar as utilizações anteriores mais próximos a calhar. Eu não estou indo para reescrever a documentação do Firebug, mas vou dar-lhe a ideia de base.
Você pode inserir quebras em sua javascript para ajudar a ver onde e quando algo está errado. Este casal com a possibilidade de ver variáveis em tempo real (enquanto a sua javscript é interrompida), e você vai sentir como se você tem o controle de quickbasic 4.5 pro ... (perdeu?) Visual Basic 6.0? Ainda demasiado velho? Ok ... o controle de um Shelby 2007. * Sigh *. Um lote de controlo. Um lote de controle realmente.
4) Whisper quiet depuração
Há mais meios do que eu estou indo para a lista (novamente, leia a documentação), mas o mais útil para mim é o
console.log () método. ele permite que você a saída de informação para o Firebug console sem ter que usar irritante "alerta ()" janelas ou saída texto, que terá um impacto formatar seu site. Pode até pôr os ovos da Páscoa pouco sobre o seu site para quem usar Firebug ....
| 2.9 |
Stumble it! Post Info
Esta entrada foi postada na quarta-feira, outubro 24o, 2007 e é arquivada sob css, desenvolvimento. Ela tem 92 visualizaçõesComentários Feed. | Deixe comentário | Deixe Trackback.
Anteriores Postar: Ganhar dinheiro pelo destacamento »
Próximo Post: 390 Club »
