La majoria de la gent no sap que hi ha un tresor d'eines de desenvolupament a la seva disposició i que s'amaga al seu navegador preferit.
Cada navegador web ofereix eines de desenvolupament per comprovar la codificació d'un lloc web, però, és una entitat estrangera per a l'usuari mitjà d'Internet. Després de tot, qui vol mirar la codificació d'un lloc web, oi?
Com a resultat, hi ha moltes coses que podeu aprendre mirant la codificació d'un lloc web. Continueu llegint per esbrinar què ofereix la funció d'inspecció de l'element i com utilitzar-la.
Com utilitzar l'element d'inspecció en un navegador específic
La majoria dels navegadors tenen eines per inspeccionar elements d'un lloc web, però tots funcionen generalment de la mateixa manera.
Utilitzant Inspect Element a Google Chrome
- Obriu el lloc web que voleu inspeccionar.
- Feu clic amb el botó dret a qualsevol lloc de la pàgina i seleccioneu Inspeccionar.
O
- Feu clic als tres punts verticals a la cantonada dreta de la barra d'eines.
- Anar a Més eines.
- Seleccioneu Eines per a desenvolupadors.
O
- Premeu el botó F12 tecla de drecera del teclat a l'ordinador o CMD + Opcions + I en un Mac.
Utilitzant Inspect Element a Microsoft Edge
- Obre un lloc web.
- Feu clic als tres punts verticals a la cantonada superior dreta de la barra d'eines del navegador.
- Desplaceu-vos cap avall i feu clic a Més eines.
- Fer clic a Eines per a desenvolupadors.
O
- Feu clic amb el botó dret a qualsevol lloc del lloc web.
- Fer clic a Inspeccionar.
O
- Premeu Ctrl + Maj + I.
Qualsevol d'aquests tres mètodes us donarà el mateix resultat.
Si ho heu fet correctament, veureu que s'obre un nou panell a la part inferior del vostre navegador. Aquestes són les eines per a desenvolupadors i inclouen la pestanya Elements. Aquesta és l'eina que necessiteu per inspeccionar l'element.
El tauler s'obrirà a la part inferior de la pantalla de manera predeterminada, però sempre podeu canviar com apareix. Seguiu aquests senzills passos per reposicionar el tauler Eines per a desenvolupadors:
- Feu clic als tres punts verticals a la cantonada superior del tauler Eines per a desenvolupadors.
- Seleccioneu un costat de l'acoblament (esquerra, inferior o dreta) o desacoblar-lo a una finestra independent.
Si passeu el cursor al costat de la vora del marc del tauler Eines per a desenvolupadors i arrossegueu, es redueix o amplia l'espai de treball. Per exemple, si trieu acoblar el tauler al costat dret de la finestra del navegador, proveu de passar el cursor a la vora esquerra. Podeu arrossegar el tauler per canviar-ne la mida quan vegeu el cursor de fletxa.
Ús de l'element d'inspecció (específic del sistema operatiu)
Tot i que molts dels passos implicats podrien haver-se cobert només mostrant-vos com utilitzar Inspect Element al navegador, on existeix en primer lloc, però us mostrarem com a la majoria de sistemes operatius de totes maneres.
Com utilitzar Inspect Element en un Chromebook
El navegador predeterminat d'un Chromebook és Google, així que seguiu les instruccions del navegador Chrome per accedir-hi Inspeccionar element. Aquí teniu un petit curs de perfeccionament:
- Obre un lloc web.
- Feu clic a les tres línies verticals a la cantonada superior dreta de la barra d'eines.
- Seleccioneu Més eines.
- Fer clic a Eines per a desenvolupadors.
També podeu utilitzar el mètode de clic dret o F12 tecla de funció per accedir més ràpidament a les Eines per a desenvolupadors.
Com utilitzar Inspect Element en un dispositiu Android
L'execució d'Inspect Element en un dispositiu Android és lleugerament diferent. Consulteu com arribar al tauler Inspecciona l'element a Android:
- Premeu el botó F12 tecla de funció.
- Tria Commuta la barra del dispositiu.
- Seleccioneu el dispositiu Android al menú desplegable.
Quan seleccioneu un dispositiu Android específic, notareu que es carrega una versió mòbil del lloc web. Des d'aquí, podeu utilitzar la funció Inspecciona l'element al vostre dispositiu Android des de la comoditat de l'escriptori.
Aquest mètode funciona tant per als navegadors Chrome com per a Firefox perquè tenen una funció a les seves eines per a desenvolupadors anomenada Device Simulation.
També funciona de la mateixa manera per als dispositius iPhone. Només cal que seleccioneu la correcta al menú desplegable.
Com utilitzar Inspect Element a Windows
L'eina Inspecciona l'element no és necessàriament específica del sistema operatiu, sinó que és específica del navegador. Això vol dir que les eines per a desenvolupadors són una característica del navegador que utilitzeu i no necessàriament Windows. Tanmateix, podeu accedir al tauler Inspecciona l'element independentment del navegador que preferiu.
Si utilitzeu el sistema operatiu Windows, també és probable que utilitzeu el navegador Microsoft Edge. Consulteu com accedir a Inspect Element a MS Edge:
- Obriu el lloc web que voleu inspeccionar.
- Toqueu els tres punts verticals a la cantonada de la finestra del navegador.
- Desplaceu-vos cap avall i seleccioneu Més eines.
- Fer clic a Eines per a desenvolupadors.
També podeu utilitzar el F12 tecla de funció si voleu accedir a Inspeccionar l'element més ràpidament. A més, feu clic amb el botó dret a la pàgina web i seleccioneu Inspeccionar també funciona.
Com utilitzar Inspect Element en un Mac
Si utilitzeu un Mac, probablement el vostre navegador preferit sigui Safari. L'obertura d'Inspect Elements a Safari és lleugerament diferent que a Chrome i Firefox. Però és igual de senzill amb aquests passos:
- Obriu el navegador Safari.
- Fer clic a Safari a la pestanya de capçalera.
- Seleccioneu Preferències des del menú desplegable.
- Feu clic a Avançat icona d'engranatge situada a la part superior de la pantalla.
- Marqueu la casella que diu Mostra el menú Desenvolupament a la barra de menús.
Si seguiu aquests passos, s'activa la funció Inspecciona l'element al vostre navegador. Si primer no activeu Inspeccionar l'element, no veureu l'opció quan obriu un lloc web.
Després de completar aquest pas, només cal que feu clic amb el botó dret a qualsevol pàgina web oberta i seleccioneu Inspeccionar. També podeu utilitzar l'ordre de tecles ràpides: CMD + Opció + I (inspeccionar).
Com utilitzar Inspect Element en un iPhone
Voleu utilitzar la funció Inspecciona els elements per veure com apareix una versió mòbil d'una pàgina web a un iPhone? Podeu fer això i molt més amb només uns senzills passos. Però abans de mirar un element, cal activar-lo Inspector web per al vostre dispositiu iOS:
- Anar a Configuració.
- Ara, selecciona Safari.
- Desplaceu-vos cap a la part inferior i toqueu Menú avançat.
- Ara, toqueu l'interruptor per activar-lo Inspector web.
A més, us heu d'assegurar que el menú Desenvolupament estigui habilitat al vostre Mac:
- Obriu Safari.
- Seleccioneu Safari des de les capçaleres superiors.
- A continuació, feu clic a Preferències.
- A continuació, feu clic a Avançat.
- Marqueu la casella que diu Mostra el menú Desenvolupament a la barra de menús.
Després d'habilitar tant el dispositiu mòbil iOS com el Mac, veureu el menú Desenvolupament a la barra superior del vostre Mac. Feu-hi clic per veure l'iPhone connectat i la pàgina web activa al dispositiu. Si seleccioneu la pàgina web també s'obre una finestra d'inspector web per a la mateixa pàgina a la pantalla del vostre Mac.
Tingueu en compte, però, que aquestes indicacions només funcionen per a Safari amb un Mac, no amb Safari a Windows.
Com utilitzar l'element d'inspecció als formularis de Google
També podeu utilitzar l'element Inspeccionar a Google Forms. Tanmateix, si busqueu respostes a un qüestionari, no teniu sort. No trobareu les respostes incrustades a la codificació. Només podeu veure les respostes si sou el creador o editor del formulari. De qualsevol manera, si sou un estudiant que respon a un qüestionari a Google Forms, només veureu les vostres pròpies respostes.
- Podeu fer clic amb el botó dret al formulari i seleccionar Inspeccionar per veure tot el codi del formulari.
Com s'utilitza Inspecciona l'element quan està bloquejat
De tant en tant, trobareu que no podeu inspeccionar una pàgina web i la selecció Inspecciona es mostra en gris si proveu de fer-hi clic amb el botó dret. Potser penseu que està bloquejat, però hi ha moltes maneres d'evitar-ho:
Mètode 1 - Desactiva Javascript
- Entrar Configuració.
- Cerca "JavaScript”.
- Apagar JavaScript.
Mètode 2: accediu a les eines per a desenvolupadors pel llarg camí
En lloc de fer clic amb el botó dret del ratolí per inspeccionar, feu això:
- Anar a Configuració al teu navegador.
- Seleccioneu Més eines.
- Desplaceu-vos cap avall i feu clic a Eines de desenvolupament.
Mètode 3: ús de la tecla de funció
També podeu provar d'utilitzar F12 tecla de funció a les pàgines web que bloquegen el clic dret per Inspeccionar.
És possible que hàgiu de provar tots aquests mètodes abans de trobar-ne un que us funcioni. Com a últim recurs, també podeu provar de veure el codi font escrivint view-source: [introduïu l'URL complet]. 
Com utilitzar Inspect Element a Discord
Comprovar la vostra codificació a Discord és un procés fàcil. Només cal utilitzar el Ctrl + Maj + I comanda o F12 clau en una pàgina de Discord.
Com utilitzar Inspect Element en un Chromebook escolar
Si el vostre Chromebook l'ha emès una escola, l'ús de la funció Inspecciona l'element implica uns quants passos senzills:
- Feu clic amb el botó dret o toqueu amb dos dits a la pàgina web i seleccioneu Inspeccionar.
- Premeu Ctrl + Maj + I.
- Proveu d'utilitzar el mètode view-source:[url], com ara "view-source://www.wikipedia.com", sense cometes.
Tanmateix, algunes escoles i organitzacions bloquegen aquesta funció. Per tant, si no us funciona, és possible que hàgiu de posar-vos en contacte amb la vostra organització o l'administrador de l'escola.
Com utilitzar l'element Inspeccionar per trobar respostes
Podeu utilitzar Inspect Element per trobar respostes a una varietat de coses com:
- Vista prèvia del disseny del lloc en dispositius mòbils.
- Descobriu les paraules clau que utilitzen els competidors.
- Proves de velocitat.
- Canviar el text d'una pàgina web.
- Trobeu exemples ràpids per mostrar als desenvolupadors el que necessiteu.
Quan inicieu el tauler Inspecciona l'element, veureu tota la codificació del lloc web. Això inclou tota la codificació JavaScript, CSS i HTML integrada. És com veure la codificació font d'una pàgina web, excepte que podeu fer canvis al codi. A més, podeu veure els canvis implementats en temps real.
Aquesta eina fa que sigui inestimable per als venedors, dissenyadors i desenvolupadors veure els canvis de disseny abans de finalitzar-los. Tanmateix, fer canvis en la codificació amb Inspect Element no dura per sempre. Quan torneu a carregar la pàgina, tornarà al seu estat predeterminat.
PMF addicionals
Com puc utilitzar l'ordre Inspeccionar l'element per trobar respostes?
L'única manera de trobar respostes mitjançant la funció Inspecciona l'element és si el lloc web ho revela a l'instant després de l'enviament. En aquest cas, les respostes estan presents a la codificació.
En cas contrari, només esteu veient la codificació del qüestionari o la prova quan feu servir la funció Inspeccionar l'element, així com les respostes que envieu.
Inspeccionar l'element és il·legal?
No, l'eina Inspect Element no és il·legal, està dissenyada per a desenvolupadors web. La visualització del codi font d'un lloc web no és il·legal, només es converteix en un problema si utilitzeu la informació recopilada amb finalitats nefastes, com ara intentar exploits, etc.
És possible desactivar l'element d'inspecció al navegador?
La resposta curta és no.
No podeu desactivar l'element Inspeccionar en un navegador. Però podeu establir paràmetres que impedeixen que els usuaris facin determinades accions, com ara fer clic amb el botó dret en una pàgina web. Hi ha nombrosos tutorials en línia per configurar els scripts adequats per desactivar determinats esdeveniments. Tanmateix, no podeu desactivar la funció Inspeccionar l'element en la seva totalitat.
Coneix les entranyes d'una pàgina web
Comprovar la funció Inspeccionar l'element d'una pàgina web és probablement una eina de desenvolupador que mai sabíeu que necessiteu, fins i tot si no sou un desenvolupador. Té un munt d'aplicacions de disseny i màrqueting que poden fer que el vostre lloc web funcioni millor. I potser us donarà avantatge sobre un competidor.
Per a què utilitzeu Inspect Element? Explica'ns-ho a la secció de comentaris a continuació.
