Què cal saber
-
A Safari: feu clic amb el botó dret a una pàgina web i seleccioneu Inspecciona l'element.
- A Chrome, podeu fer clic amb el botó dret i fer clic a Inspeccionar.
- Per habilitar la funció a Safari: Safari > Preferències > Avançat > Mostra el menú Desenvolupament a la barra de menúsquadre.
Aquest article us ensenya com inspeccionar l'element d'un lloc web a Mac. S'explica com fer-ho mitjançant Safari i Google Chrome.
Com s'utilitza la funció Inspecciona l'element en un Mac?
Abans d'inspeccionar els elements al Mac quan feu servir Safari, heu d'activar el menú de desenvolupadors al navegador. Aquí teniu una ullada a com s'activa i què cal fer per inspeccionar un element.
Si podeu veure Desenvolupament entre les adreces d'interès i la finestra, el menú per a desenvolupadors ja s'ha habilitat i podeu passar al pas 4.
Ús de la funció d'inspecció d'elements a Safari
A continuació us expliquem com utilitzar Inspect Element a Safari, el navegador predeterminat dels ordinadors Mac.
-
A Safari, feu clic a Safari > Preferències.
Image -
Feu clic a Avançat.
Image -
Feu clic a Mostra el menú Desenvolupament a la barra de menús i tanqueu la finestra.
Image - Quan navegueu per un lloc web, feu clic amb el botó dret a l'element que voleu inspeccionar.
-
Feu clic a Inspecciona l'element.
Image -
Ara podeu veure el codi que hi ha darrere del lloc web que heu inspeccionat.
Image
Ús de la funció d'inspecció d'elements a Chrome en un Mac
Si feu servir Chrome en comptes de Safari al vostre Mac, és encara més fàcil veure un element, ja que no cal que habiliteu la funció. Això és el que cal fer.
- A Chrome, navegueu a un lloc web.
- Feu clic amb el botó dret a l'element que voleu inspeccionar.
-
Feu clic a Inspeccionar.
Image -
Ara podeu veure el codi en una finestra lateral a Chrome.
Image
Per què no puc inspeccionar al meu Mac?
És possible que no pugueu inspeccionar un element al vostre Mac si no heu activat el menú Desenvolupador a Safari. Aquí teniu un recordatori de com fer-ho.
-
A Safari, feu clic a Safari > Preferències.
Image -
Feu clic a Avançat.
Image -
Feu clic a Mostra el menú Desenvolupament a la barra de menús i tanqueu la finestra.
Image
Com fer canvis al lloc web inspeccionant l'element
A més de permetre visualitzar el codi en un lloc web, també és possible canviar temporalment qualsevol element del lloc web mitjançant Inspect Element. A continuació s'explica com fer-ho mitjançant Safari.
El procés és molt similar en altres navegadors.
- Quan navegueu per un lloc web, feu clic amb el botó dret a l'element que voleu inspeccionar.
- Feu clic a Inspecciona l'element.
- Feu doble clic al text del codi per fer-lo editable.
- Elimineu-lo o introduïu una nova cadena de text.
- Toqueu Retorn.
- Ara s'ha canviat temporalment el codi només per al vostre benefici.
Per què voldríeu utilitzar la funció Inspeccionar l'element?
Poder inspeccionar un element és útil per moltes raons.
- Per canviar el codi sobre la marxa. Els dissenyadors de llocs web poden canviar temporalment les coses d'un lloc web per veure com afecten els canvis.
- Per comprovar el codi. Tant els dissenyadors com el personal de màrqueting poden comprovar el codi per confirmar que hi ha coses com ara els detalls de Google Analytics.
- Per veure imatges per separat d'un lloc. Si un lloc no us permet obrir una imatge en una pestanya o finestra nova, veure l'element ho fa possible.
-
Tinker. Veure el codi d'una pàgina web us pot ajudar a entendre què veieu, eliminant el misteri del què i el perquè del que passa amb el lloc on esteu. És com desmuntar un aparell per veure com funciona, però en aquest cas no hi ha cap cargol a perdre.
FAQ
És legal inspeccionar un lloc web?
Sí. Tanmateix, si teniu previst utilitzar qualsevol codi o actiu d'un lloc web, assegureu-vos de consultar amb el propietari i afegir una nota de drets d'autor.
Com copio HTML d'un lloc web amb l'element d'inspecció?
A Chrome, feu clic amb el botó dret a la pàgina i seleccioneu Inspecciona, després aneu a la secció superior i feu clic amb el botó dret a l'etiqueta (p. ex.). Seleccioneu Copy > Copy outerHTML i, a continuació, enganxeu el codi en un fitxer de text o HTML.
Puc copiar CSS d'un lloc web amb l'element d'inspecció?
Sí. Feu clic amb el botó dret a l'element que voleu copiar i seleccioneu Inspeccionar. Feu clic amb el botó dret al codi ress altat i seleccioneu Copia > Estils de còpia.
Com veig les meves contrasenyes desades mitjançant l'element d'inspecció?
Per revelar les contrasenyes ocultes, feu clic amb el botó dret al quadre de text de la contrasenya i seleccioneu Inspeccionar. A la secció destacada, cerqueu type=”contrasenya” i substituïu contrasenya per text. Hi ha maneres més fàcils de mostrar totes les teves contrasenyes a Chrome.
