Vexa o HTML e CSS de calquera páxina web
O sitio web está construído con liñas de código , pero o resultado son páxinas específicas con imaxes, video, fontes e moito máis. Para cambiar un deses elementos ou ver o que está composto, ten que atopar a liña específica de código que o controla. Podes facelo cunha ferramenta de inspección de elementos.
A maioría dos navegadores non che fan descargar unha ferramenta de inspección ou instalar un complemento. En cambio, permítenos facer un clic co botón dereito no elemento da páxina e escolle Inspeccionar ou Inspeccionar elemento . Non obstante, o proceso pode ser un pouco diferente no teu navegador.
Inspecciona elementos en Chrome
As versións máis recentes de Google Chrome permítenche inspeccionar a páxina de varias maneiras, todas as cales utilizan as súas DevTools Chrome integradas:
- Fai clic co botón dereito sobre algo na páxina (ou unha área en branco) e selecciona Inspeccionar
- Insira o atallo de teclado Ctrl + Maiús + I
- Use o menú de Chrome para acceder á opción Máis ferramentas> Desenvolvente ferramentas
Os DevTools Chrome permítenlle facer cousas como copiar ou editar fácilmente liñas HTML ou ocultar ou eliminar elementos completamente (ata que a páxina recargue).
Unha vez que DevTools estea ao carón da páxina, pode cambiar onde está posicionado, sacalo da páxina, buscar todos os ficheiros da páxina, seleccionar elementos da páxina para o exame específico, copiar arquivos e URL e incluso personalizar un grupo dos axustes.
Inspecciona elementos en Firefox
Do mesmo xeito que Chrome, Firefox ten algunhas formas diferentes de abrir a ferramenta chamada Inspector:
- Fai clic co botón dereito nunha área en branco na páxina ou elixe un elemento e selecciona Inspeccionar elemento
- Insira Ctrl + Maiús + T ou Ctrl + Maiús + I co teclado
- No menú Firefox, faga clic en Desenvolvedor > Inspector
- No menú Ferramentas , faga clic en Desenvolvedor web> Inspector
Mentres move o rato sobre varios elementos en Firefox, a ferramenta Inspector atopa automaticamente a información do código fonte do elemento. Faga clic nun elemento e a "procura en tempo real" parará e pode examinar o elemento da xanela Inspector.
Fai clic co botón dereito nun elemento para atopar todos os controis compatibles. Podes facer as cousas como editar a páxina como HTML, copiar ou pegar código HTML interno ou externo, mostrar propiedades DOM, capturar capturas de pantalla ou eliminar o nodo, aplicar facilmente novos atributos, ver todos os CSS da páxina e moito máis.
Inspecciona elementos en Opera
Opera tamén pode inspeccionar elementos, coa ferramenta DOM Inspector idéntica á de Chrome. Vexa como chegar a ela:
- Use o atallo de teclado Ctrl + Maiús + I
- Desprácese ata Menú> Máis ferramentas> Amosar menú do programador e, a continuación, abra o menú a través de Menú> Desenvolvedor> Ferramentas de desenvolvemento
- Desde o menú do botón dereito do rato en calquera elemento da páxina, elixe Inspeccionar elemento
Inspeccione elementos en Internet Explorer
Unha ferramenta de elemento de inspección similar, chamada Ferramentas para desenvolvedores, está dispoñible en Internet Explorer:
- Prema F12 no teclado
- Use a opción Ferramentas> F12 Developer Menu (prema Alt + X se non ve o menú Ferramentas )
- Fai clic co botón dereito na páxina e faga clic en Inserir elemento
IE ten unha ferramenta de elemento Select neste novo menú que permite facer clic en calquera elemento da páxina para ver os seus detalles HTML e CSS. Tamén pode desactivar / activar o resaltado do elemento mentres estás a través da pestana DOM Explorer .
Do mesmo xeito que outras ferramentas de inspectores de elementos nos navegadores anteriores, Internet Explorer permítelle cortar, copiar e pegar elementos, así como editar o HTML, engadir atributos, copiar elementos con estilos adxuntos e moito máis.