Com inspeccionar elements a Mac, Windows, iPhone i iPad

Els desenvolupadors i dissenyadors d'interfície d'usuari utilitzen la funció Inspecciona l'element per modificar llocs web en línia sense canviar el codi font. Però, com inspeccionar elements sense fer un curs de desenvolupament web?

Inspect Element és una eina útil per a desenvolupadors que surt de la caixa amb els navegadors web populars. Només heu de saber com implementar l'eina amb uns quants clics mentre navegueu per llocs web.

Podeu fer molts trucs de màgia com canviar el disseny del lloc web, fer captures de pantalla sense text, canviar els tipus de lletra, modificar números i molt més.

A continuació trobareu una guia concisa pas a pas per aprendre a inspeccionar els elements sense esforç.

Què és Inspect Element?

Inspect Element és una eina de desenvolupament web disponible a la majoria de navegadors web. Podeu utilitzar-lo per editar el codi font del front-end de qualsevol lloc web que visiteu.

Els canvis que feu es produeixen dins d'una caixa de proves dins del vostre navegador web. Per tant, no feu cap canvi al lloc web real. A més, els canvis superficials que feu desapareixen quan actualitzeu la pàgina.

Aquí teniu algunes maneres creatives d'utilitzar-lo:

• Heu de fer una captura de pantalla d'un lloc web i els textos de la imatge us estan preocupant. Utilitzeu l'eina Inspecciona l'element per eliminar aquests textos.
• Vols fer una broma als teus amics mostrant-los el teu nom al New York Times o al Washington Post. Inspeccionar Element és la millor manera de fer-ho.
• Proveu els codis de depuració als llocs web aplicant-los en temps real mitjançant l'eina Inspecciona l'element. Si funciona, podeu canviar el codi font del backend.
• Com a màrqueting digital, podeu revelar les paraules clau dels competidors, els títols de SEO, les metaetiquetes, etc., utilitzant aquesta poderosa eina de desenvolupament web.

Com inspeccionar elements a Windows

Utilitzar l'eina Inspeccionar l'element a Windows és ridículament fàcil. A continuació, trobareu una guia pas a pas per inspeccionar els elements mitjançant diversos navegadors web a Windows:

Eina d'inspecció de Google Chrome

Com inspeccionar elements al navegador Chrome de Windows

• Quan utilitzeu Google Chrome , feu clic amb el botó dret a qualsevol lloc d'un lloc web.
• Apareixerà el menú contextual del clic dret.
• A la part inferior, veureu Inspeccionar .
• Feu clic a Inspecciona per veure els codis HTML i CSS al tauler de la dreta .

Com puc obrir Inspect Element a Chrome sense fer clic amb el botó dret?

Hi ha algunes dreceres útils per obrir l'eina Inspecciona l'element a Google Chrome per a Windows. Aquestes tecles d'accés ràpid són les següents:

• Ctrl + Maj + C
• La tecla de funció F12

Les tecles d'accés directe anteriors també funcionen al navegador Mozilla per a Windows.

Eina d'inspector de Mozilla

Com inspeccionar elements al navegador Mozilla de Windows

Al navegador Mozilla, el procés és el mateix que Google Chrome. Tanmateix, la finestra de l'Inspector apareixerà a la part inferior del navegador en lloc del costat dret, com a Google Chrome.

Eina d'inspecció de Microsoft Edge

Com inspeccionar els elements al navegador Windows Edge

Sorprenentment, l'element Inspect de Microsoft Edge funciona de manera similar al navegador Google Chrome. L'eina Inspecciona està disponible fent clic amb el botó dret. A més, els codis HTML i CSS es mostren al costat dret, de manera similar a Google Chrome.

Com inspeccionar elements a Mac

Esteu utilitzant Google Chrome, Mozilla Firefox o Microsoft Edge als ordinadors Mac d'Apple? En cas afirmatiu, podeu implementar l'eina Inspeccionar l'element seguint els passos esmentats anteriorment a la secció de Windows.

Però, si utilitzeu el navegador web predeterminat de macOS, Safari, utilitzar l'eina Inspeccionar l'element és un joc complicat. Per defecte, Safari no mostra Inspect Element en un Mac. Aquí teniu el que heu de fer:

Com obrir Inspect Element a Mac

En primer lloc, heu d'activar les eines de desenvolupament a Safari en un Mac. Així és com:

• Executeu el navegador Safari .
• Visiteu un lloc web en el qual vulgueu inspeccionar elements web.
• Seleccioneu Safari a la barra de menú superior del navegador Safari.
• Feu clic a Preferències al menú contextual que s'obre.
• A la pantalla Preferències , seleccioneu Avançat .
• Marqueu el menú Mostra Desenvolupament a la part inferior de la pantalla de Preferències avançades .

Heu activat correctament les eines de desenvolupament a Safari per a Mac. Ara, seguiu aquests passos per utilitzar Inspect Element:

• A qualsevol element d'un lloc web, com ara un text o una imatge, feu clic amb el botó dret .
• Apareixerà un menú contextual. A la part inferior, veureu Inspecciona l'element .
• Feu-hi clic per obrir una secció de depuració a sota del lloc web que mostra codis HTML i CSS .

Quines són les claus per inspeccionar l'element?

És possible que estigueu buscant dreceres per a Inspect Element al Mac. Podeu utilitzar els següents:

• Ordre + Maj + C
• Premeu la tecla Control i, a continuació, seleccioneu qualsevol element.
• Feu clic al trackpad amb dos dits

Com inspeccionar elements a Chromebooks

Chromebook utilitza Google Chrome com a navegador predeterminat. Per tant, després d'obrir qualsevol lloc web, només cal que feu clic amb el botó dret per trobar l'opció Inspecciona l'element al menú contextual que segueix.

Si utilitzeu un Chromebook de la feina o de l'escola, és possible que us faci aquesta pregunta:

Per què no puc inspeccionar el Chromebook de la meva escola?

La majoria dels administradors de centres educatius i empresarials desactiven les funcions avançades del Chromebook que us proporcionen per treballar o estudiar. Com que les eines per a desenvolupadors són funcions avançades, és probable que el Chromebook de la vostra escola o de la feina no mostri l'eina Inspecciona l'element.

Com inspeccionar els elements a l'iPad/iPhone

Malauradament, no podeu utilitzar l'eina Inspecciona l'element en un iPhone o iPad sense un Mac.

iOS i iPadOS tenen Web Inspector per a l'aplicació Safari. Tanmateix, només funciona si connecteu el dispositiu mòbil a un Mac en el qual ja heu activat les eines de desenvolupament per a Safari. A continuació es mostren els passos que podeu provar:

• Obriu l' aplicació Configuració de l'iPad/iPhone .
• Feu clic a Safari al panell de navegació de l'esquerra.

Obrint la configuració de Safari a l'iPad o l'iPhone

• A continuació, desplaceu-vos cap avall al costat dret per trobar i seleccionar Avançat .

Activació de Web Inspector a iPad i iPhone

• Activeu el commutador per a l'inspector web .
• Ara, connecteu el dispositiu mòbil al Mac mitjançant USB .
• Autoritzeu l'iPhone/iPad al Mac.
• Obriu qualsevol lloc web en un dispositiu mòbil a Safari.
• Ara, executeu Safari al Mac i seleccioneu Desenvolupa a la barra de menú superior.
• Al menú contextual que s'obre, cerqueu el nom del vostre dispositiu mòbil.
• Passeu el cursor per sobre del dispositiu mòbil per veure tots els llocs web oberts.
• Ara, seleccioneu qualsevol lloc web per veure el codi font HTML i CSS al navegador Safari de Mac.

Conclusió

Heu explorat totes les maneres possibles d'utilitzar l'eina Inspecciona l'element per a l'edició temporal de pàgines web. També heu après a inspeccionar elements per a diversos dispositius com Mac, Windows, Chromebook, iPad i iPhone.

La propera vegada que necessiteu modificar una pàgina web per diversió o per necessitats professionals, proveu aquests mètodes. Sens dubte, t'encantaran aquests passos sense esforç per sobre d'altres mètodes complicats explicats en altres llocs.

No oblideu deixar comentaris a continuació si els passos anteriors us han ajudat, qualsevol mètode que us resulti difícil o qualsevol consell secret sobre l'eina Inspecciona l'element.

Necessites una pàgina web com a referència impresa? Apreneu a desar ràpidament una pàgina web com a PDF ara!