Como inspeccionar elementos en Mac, Windows, iPhone e iPad

Os desenvolvedores e deseñadores de IU usan a función Inspeccionar elementos para modificar sitios web en liña sen cambiar o código fonte. Pero como inspeccionar elementos sen realizar un curso de desenvolvemento web?

Inspect Element é unha ferramenta útil para desenvolvedores que sae da caixa cos navegadores web populares. Só precisa saber como implementar a ferramenta en poucos clics mentres navega por sitios web.

Podes facer moitos trucos de maxia como cambiar o deseño do sitio web, facer capturas de pantalla sen texto, cambiar fontes, modificar números e moito máis.

Busca a continuación unha guía concisa paso a paso para aprender a inspeccionar os elementos sen esforzo.

Que é Inspect Element?

Inspect Element é unha ferramenta de desenvolvemento web dispoñible na maioría dos navegadores web. Podes usalo para editar o código fonte de calquera sitio web que esteas visitando.

Os cambios que realizas ocorren nunha caixa de probas dentro do teu navegador web. Polo tanto, non está a facer ningún cambio no sitio web real. Ademais, os cambios superficiais que realizas desaparecen cando actualizas a páxina.

Aquí tes algunhas formas creativas de usalo:

• Debes facer unha captura de pantalla dun sitio web e os textos da imaxe están a preocuparche. Use a ferramenta Inspeccionar elementos para eliminar eses textos.
• Queres facer unha broma aos teus amigos mostrándolles o teu nome no New York Times ou no Washington Post. Inspeccionar Element é a mellor forma de facelo.
• Proba os códigos de depuración en sitios web aplicándoos en tempo real coa ferramenta Inspect Element. Se funciona, podes cambiar o código fonte do backend.
• Como comerciante dixital, pode revelar as palabras clave dos competidores, os títulos de SEO, as metaetiquetas, etc., usando esta poderosa ferramenta de desenvolvemento web.

Como inspeccionar elementos en Windows

Usar a ferramenta Inspeccionar elemento en Windows é ridículamente sinxelo. Busca a continuación unha guía paso a paso para inspeccionar elementos usando varios navegadores web en Windows:

Ferramenta de inspección de Google Chrome

Como inspeccionar elementos no navegador Windows Chrome

• Cando utilices Google Chrome , fai clic co botón dereito do rato en calquera lugar dun sitio web.
• O menú contextual do botón dereito aparecerá.
• Na parte inferior, verás Inspeccionar .
• Fai clic en Inspeccionar para ver os códigos HTML e CSS nun panel da dereita .

Como abro Inspect Element en Chrome sen facer clic co botón dereito?

Hai algúns atallos útiles para abrir a ferramenta Inspect Element en Google Chrome para Windows. Estas teclas de acceso rápido son as seguintes:

• Ctrl + Maiús + C
• A tecla de función F12

As teclas de acceso rápido anteriores tamén funcionan no navegador Mozilla para Windows.

Ferramenta Mozilla Inspector

Como inspeccionar elementos no navegador Mozilla de Windows

No navegador Mozilla, o proceso é o mesmo que Google Chrome. Non obstante, a xanela do Inspector aparecerá na parte inferior do navegador en lugar do lado dereito, como en Google Chrome.

Ferramenta de inspección de Microsoft Edge

Como inspeccionar elementos no navegador Windows Edge

Sorprendentemente, o elemento Inspect de Microsoft Edge funciona de forma similar ao navegador Google Chrome. A ferramenta Inspeccionar está dispoñible ao facer clic co botón dereito. Ademais, os códigos HTML e CSS aparecen no lado dereito, semellante a Google Chrome.

Como inspeccionar elementos en Mac

Estás a usar Google Chrome, Mozilla Firefox ou Microsoft Edge nos ordenadores Mac de Apple? En caso afirmativo, pode implantar a ferramenta Inspect Element seguindo os pasos mencionados anteriormente na sección de Windows.

Pero, se estás a usar o navegador web predeterminado de macOS, Safari, usar a ferramenta Inspect Element é un xogo complicado. Por defecto, Safari non mostra Inspect Element nunha Mac. Aquí tes o que tes que facer:

Como abrir Inspect Element en Mac

En primeiro lugar, debes activar as ferramentas para desenvolvedores en Safari nun Mac. Aquí tes como:

• Executa o navegador Safari .
• Visita un sitio web no que queiras inspeccionar elementos web.
• Seleccione Safari na barra de menú superior do navegador Safari.
• Fai clic en Preferencias no menú contextual que se abre.
• Na pantalla Preferencias , seleccione Avanzado .
• Marque o menú Mostrar Desenvolver na parte inferior da pantalla de Preferencias avanzadas .

Activaches correctamente as ferramentas para programadores en Safari para Mac. Agora, siga estes pasos para usar Inspect Element:

• En calquera elemento dun sitio web, como un texto ou unha imaxe, fai clic co botón dereito .
• Aparecerá un menú contextual. Na parte inferior, verás Inspeccionar elemento .
• Fai clic nel para abrir unha sección de depuración debaixo do sitio web que mostra códigos HTML e CSS .

Cales son as claves para inspeccionar o elemento?

Podes buscar atallos para Inspect Element en Mac. Podes usar o seguinte:

• Comando + Maiús + C
• Preme a tecla Control e despois selecciona calquera elemento.
• Fai clic no trackpad con dous dedos

Como inspeccionar elementos en Chromebooks

Chromebook usa Google Chrome como navegador predeterminado. Polo tanto, despois de abrir calquera sitio web, simplemente faga clic co botón dereito para atopar a opción Inspeccionar elemento no menú contextual que segue.

Se usas un Chromebook do traballo ou da escola, podes estar facendo esta pregunta:

Por que non podo inspeccionar o Chromebook da miña escola?

A maioría dos administradores de escolas e empresas desactivan as funcións avanzadas do Chromebook que che proporcionan para traballar ou estudar. Dado que as ferramentas para desenvolvedores son funcións avanzadas, é probable que o Chromebook do teu colexio ou do teu traballo non mostre a ferramenta Inspect Element.

Como inspeccionar elementos no iPad/iPhone

Desafortunadamente, non podes usar a ferramenta Inspeccionar elemento nun iPhone ou iPad sen un Mac.

iOS e iPadOS teñen Web Inspector para a aplicación Safari. Non obstante, só funciona se conectas o dispositivo móbil a un Mac no que xa teñas activadas as ferramentas de programador para Safari. Abaixo amósanse os pasos que podes probar:

• Abre a aplicación Configuración do iPad/iPhone .
• Fai clic en Safari no panel de navegación da esquerda.

Abrir Configuración de Safari en iPad ou iPhone

• A continuación, desprácese cara abaixo no lado dereito para buscar e seleccione Avanzado .

Activando Web Inspector en iPad e iPhone

• Active o selector para Web Inspector .
• Agora, conecta o dispositivo móbil a Mac usando USB .
• Autoriza o iPhone/iPad en Mac.
• Abre calquera sitio web nun dispositivo móbil en Safari.
• Agora, executa Safari no Mac e selecciona Desenvolver na barra de menú superior.
• No menú contextual que se abre, busca o nome do teu dispositivo móbil.
• Pasa o cursor sobre o dispositivo móbil para ver todos os sitios web abertos.
• Agora, selecciona calquera sitio web para ver o código fonte HTML e CSS no navegador Safari de Mac.

Conclusión

Exploraches todas as formas posibles de utilizar a ferramenta Inspeccionar elementos para a edición temporal de páxinas web. Tamén aprendeu a inspeccionar elementos para varios dispositivos como Mac, Windows, Chromebook, iPad e iPhone.

A próxima vez que necesites modificar unha páxina web por diversión ou por necesidades profesionais, proba estes métodos. Definitivamente encantarán estes pasos sen esforzo fronte a outros métodos complicados explicados noutro lugar.

Non esquezas deixar comentarios a continuación se os pasos anteriores che axudaron, calquera método que che resulte difícil ou algún consello secreto sobre a ferramenta Inspeccionar elemento.

Necesitas unha páxina web como referencia impresa? Aprende a gardar rapidamente unha páxina web como PDF agora!