Com s'utilitza Inspect Element

La majoria de la gent desconeix que hi ha un tresor d’eines per a desenvolupadors a la seva disposició i que s’amaga al seu navegador preferit.

Cada navegador web ofereix eines per a desenvolupadors per comprovar la codificació d’un lloc web, però és una entitat estrangera per a l’usuari d’internet mitjà. Al cap i a la fi, qui vol mirar la codificació d’un lloc web, oi?

Resulta que hi ha moltes coses que podeu aprendre mirant la codificació d’un lloc web. Seguiu llegint per saber què ofereix la funció d'inspecció de l'element i com s'utilitza.

Com s'utilitza Inspect Element

La majoria dels navegadors tenen eines per inspeccionar elements d’un lloc web, però generalment funcionen de la mateixa manera.

Utilitzant Inspect Element a Google Chrome

1. Obriu el lloc web que voleu inspeccionar.
   
2. Feu clic amb el botó dret a qualsevol lloc de la pàgina i seleccioneu Inspeccioneu .
   
   O
3. Feu clic als tres punts verticals de l'extrem dret de la barra d'eines.
   
4. Anar a Més eines .
   
5. Seleccioneu Eines per a desenvolupadors .
   
   O
6. Premeu el botó F12 tecla de drecera de teclat al PC o CMD + Opcions + I en un Mac.
   

Ús d’Inspect Element a Microsoft Edge

1. Obriu un lloc web.
   
2. Feu clic als tres punts verticals de l'extrem superior dret de la barra d'eines del navegador.
3. Desplaceu-vos cap avall i feu clic a Més eines .
   
4. Fer clic a Eines per a desenvolupadors .
   
   O
5. Feu clic amb el botó dret a qualsevol lloc del lloc web.
6. Fer clic a Inspeccioneu .
   
   O
7. Premeu Ctrl + Maj + I .

Qualsevol d’aquests tres mètodes us donarà el mateix resultat.

Si ho heu fet correctament, veureu un tauler nou que s’obre a la part inferior del navegador. Aquestes són les eines per a desenvolupadors i inclouen la pestanya Elements. Aquesta és l'eina que necessiteu per inspeccionar l'element.

com capturar un snapchat d'algú sense que ho sàpiga

El tauler s'obrirà a la part inferior de la pantalla com a predeterminat, però sempre podeu canviar la forma en què apareix. Seguiu aquests senzills passos per canviar la posició del tauler Eines per a desenvolupadors:

1. Feu clic als tres punts verticals de l'extrem superior del tauler Eines per a desenvolupadors.
   
2. Seleccioneu un costat del moll (esquerra, part inferior o dreta) o desfeu-lo en una finestra independent.
   

Si passeu el cursor al costat de la vora del quadre del tauler Eines per a desenvolupadors i arrossegueu, es reduirà o ampliarà l’espai de treball. Per exemple, si opteu per acoblar el tauler al costat dret de la finestra del navegador, proveu de passar el ratolí a la vora esquerra. Podeu arrossegar el tauler per canviar-ne la mida quan vegeu el cursor de fletxa.

Com s'utilitza Inspect Element per trobar respostes

Podeu utilitzar Inspect Element per trobar respostes a diverses coses com:

1. Visualització prèvia del disseny del lloc en dispositius mòbils.
2. Esbrineu les paraules clau que utilitzen els competidors.
3. Proves de velocitat.
4. Canvi de text en una pàgina web.
5. Cerqueu exemples ràpids per mostrar als desenvolupadors el que necessiteu.

Quan inicieu el tauler Inspecciona elements, veureu tota la codificació del lloc web. Això inclou tots els codis JavaScript, CSS i HTML integrats. És com veure la codificació font d’una pàgina web, tret que podeu fer canvis al codi. A més, podreu veure els canvis implementats en temps real.

Aquesta eina fa que sigui inestimable per als professionals del màrqueting, dissenyadors i desenvolupadors per veure qualsevol canvi de disseny abans de finalitzar-los. Tot i això, fer canvis en la codificació amb Inspect Element no dura per sempre. Quan torneu a carregar la pàgina, tornarà al seu estat predeterminat.

Com s'utilitza Inspect Element a Chromebook

El navegador predeterminat dels Chromebooks és Google, així que seguiu les instruccions del navegador Chrome per accedir-hi Inspeccionar element . Aquí teniu un petit curs d’actualització:

1. Obriu un lloc web.
   
2. Feu clic a les tres línies verticals de l'extrem superior dret de la barra d'eines.
   
3. Seleccioneu Més eines .
   
4. Fer clic a Eines per a desenvolupadors .
   

També podeu utilitzar el mètode del clic dret o F12 tecla de funció per accedir més ràpidament a les eines per a desenvolupadors.

Com s'utilitza Inspect Element a Android

Executar Inspect Element en un dispositiu Android és lleugerament diferent. Consulteu com arribar al tauler Inspect Element a Android:

1. Premeu el botó F12 tecla de funció.
2. Trieu Commuta la barra de dispositius .
   
3. Seleccioneu el dispositiu Android al menú desplegable.
   

Quan seleccioneu un dispositiu Android concret, notareu que es carrega una versió mòbil del lloc web. A partir d’aquí, podeu utilitzar la funció Inspect Element al vostre dispositiu Android des de la comoditat de l’escriptori.

Aquest mètode funciona tant per a navegadors Chrome com per a Firefox, ja que tenen una funció a les Eines per a desenvolupadors anomenada Simulació de dispositius.

També funciona de la mateixa manera per als dispositius iPhone. Només cal que seleccioneu la correcta al menú desplegable.

Com s'utilitza Inspect Element a Windows

L’eina Inspect Element no és necessàriament específica del sistema operatiu, sinó del navegador. Això significa 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 elements independentment del navegador que preferiu.

Si feu servir el sistema operatiu Windows, és probable que utilitzeu el navegador Microsoft Edge. Consulteu com accedir a Inspect Element a MS Edge:

1. Obriu el lloc web que voleu inspeccionar.
   
2. Toqueu els tres punts verticals a l'extrem de la finestra del navegador.
   
3. Desplaceu-vos cap avall i seleccioneu Més eines .
   
4. Fer clic a Eines per a desenvolupadors .
   

També podeu utilitzar la tecla de funció F12 si voleu accedir a Inspect Element més ràpidament. A més, fer clic amb el botó dret a la pàgina web i seleccionar Inspeccionar també funciona.

Com s'utilitza Inspect Element a Chrome

Hi ha tres maneres d’accedir a Inspect Element a Chrome. Tu pots:

sense trucs i consells per al cel

1. Feu clic al menú de configuració o a tres punts verticals del navegador i aneu a Més eines> Eines per a desenvolupadors .
   
2. Feu clic amb el botó dret a la pàgina web i seleccioneu Inspeccioneu .
   
3. Ús Ctrl + Maj + I (Inspeccioneu).

La primera manera és més intuïtiva per als usuaris de Inspect Element que recorden. Tot i això, si teniu previst utilitzar aquesta funció sovint, és possible que les tecles ràpides us siguin útils.

Com s'utilitza Inspect Element a Mac

Si feu servir un Mac, el navegador que trieu és probablement Safari. Obrir Inspect Elements a Safari és lleugerament diferent que a Chrome i Firefox. Però és tan senzill amb aquests passos:

1. Obriu el navegador Safari.
2. Fer clic a Safari a la pestanya de capçalera.
3. Seleccioneu Preferències des del menú desplegable.
4. Feu clic al botó Advanced icona d'engranatge situada a la part superior de la pantalla
5. Marqueu la casella que diu Mostra el menú Desenvolupament a la barra de menú .

Seguir aquests passos permet activar la funció Inspecciona elements al navegador. Si primer no activeu Inspect Element, no veureu l'opció quan obriu un lloc web.

Després de completar aquest pas, feu clic amb el botó dret a qualsevol pàgina web oberta i seleccioneu Inspecciona. També podeu utilitzar l'ordre de tecles ràpides: CMD + Opció + I (inspeccionar).

Com s'utilitza Inspect Element als formularis de Google

També podeu utilitzar l’element Inspecciona a Google Forms. Tot i això, si cerqueu 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 l’editor del formulari. Tanmateix, si sou estudiants que responen a un qüestionari a Google Forms, només veureu les vostres respostes.

De qualsevol manera, podeu fer clic amb el botó dret al formulari i seleccionar-lo Inspeccioneu per veure tot el codi del formulari.

Com s'utilitza Inspect Element a l'iPhone

Voleu utilitzar la funció Inspect Elements per veure com apareix una versió mòbil d'una pàgina web en un iPhone? Podeu fer això i molt més amb només uns quants passos senzills. Però abans de mirar un element, heu d’habilitar Web Inspector per al vostre dispositiu iOS:

1. Anar a Configuració .
   
2. Seleccioneu Safari .
   
3. Desplaceu-vos fins a la part inferior i toqueu Menú avançat .
   
4. Toca per activar-la Web Inspector .
   

A més, heu d'assegurar-vos que el menú Desenvolupament estigui activat al vostre Mac:

1. Obriu Safari.
2. Seleccioneu Safari des de les capçaleres principals.
3. Fer clic a Preferències .
4. Fer clic a Advanced .
5. Marqueu la casella que diu Mostra el menú Desenvolupament a la barra de menú .

Després d'activar el dispositiu mòbil iOS i el Mac, veureu el menú Desenvolupament a la barra superior del 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'obrirà una finestra d'Inspector web per a la mateixa pàgina de la pantalla del vostre Mac.

Tingueu en compte, però, que aquestes instruccions només funcionen per a Safari amb un Mac, no per a Safari a Windows.

Com s'utilitza Inspect Element quan està bloquejat

De tant en tant, trobareu que no podeu inspeccionar una pàgina web i que la selecció Inspecciona queda atenuada si proveu de fer-hi clic amb el botó dret. Podeu pensar que està bloquejat, però hi ha moltes maneres d’aconseguir-ho:

Mètode 1 - Desactiva Javascript

1. Entrar Configuració .
   
2. CercaJavaScript.
   
3. Apagar JavaScript .
   

Mètode 2: accediu a les eines per a desenvolupadors pel camí llarg

En lloc de fer clic amb el botó dret del ratolí per inspeccionar, feu això:

1. Anar a Configuració al vostre navegador.
   
2. Seleccioneu Més eines .
   
3. Desplaceu-vos cap avall i feu clic a Configuració del desenvolupador .
   
   

Mètode 3: utilitzar la tecla de funció

dayz com iniciar un incendi

També podeu provar d'utilitzar el fitxer 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-vos amb un que us funcioni. Com a últim recurs, també podeu provar de visualitzar el codi font escrivint view-source: [introdueix l'URL complet] .

Com s'utilitza Inspect Element en discòrdia

Comprovar la vostra codificació a Discord és un procés senzill. Simplement utilitzeu el fitxer Ctrl + Maj + I ordre o F12 clau en una pàgina Discord.

Com s'utilitza Inspect Element en un Chromebook escolar

Si el vostre Chromebook ha estat emès per un centre educatiu, utilitzar la funció Inspecciona elements implica uns quants passos senzills:

1. Feu clic amb el botó dret o toqueu amb dos dits a la pàgina web i seleccioneu Inspeccioneu .
   O
2. Premeu Ctrl + Maj + I

No obstant això, algunes escoles i organitzacions bloquegen aquesta funció. Per tant, si no us funciona, és possible que hàgiu de posar-vos en contacte amb l’organització o l’administrador de l’escola.

Preguntes freqüents addicionals

Com puc utilitzar l'ordre Inspect Element per trobar respostes?

L’única manera de trobar respostes mitjançant la funció Inspecciona elements és si el lloc web la revela a l’instant després de l’enviament. En aquest cas, les respostes són presents a la codificació.

En cas contrari, simplement visualitzeu la codificació del test o prova quan utilitzeu la funció Inspecciona l’element, així com les respostes que envieu.

Inspeccionar l'element és il·legal?

No, l’element Inspect no és il·legal. La visualització del codi font d’un lloc web no és il·legal, només esdevé un problema si utilitzeu la informació recopilada amb finalitats nefastes, com ara intentar explotar, etc.

És possible desactivar la inspecció de l'element al navegador?

La resposta breu és no.

No podeu desactivar l'element Inspecta en un navegador. Però podeu establir paràmetres que impedeixin als usuaris fer determinades accions, com ara fer clic amb el botó dret en una pàgina web. Hi ha nombrosos tutorials en línia per establir els scripts adequats per desactivar determinats esdeveniments. Tanmateix, no podeu desactivar la funció Inspecciona l'element en la seva totalitat.

Conegueu les entranyes d’una pàgina web

La comprovació de la funció Inspecciona l'element d'una pàgina web és probablement una eina per a desenvolupadors que mai no sabíeu que necessitàveu, 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 més fàcilment. I potser us donarà avantatge a un competidor.

Per a què utilitzeu Inspect Element? Expliqueu-nos-ho a la secció de comentaris següent.