La mayoría de la gente no sabe que hay un tesoro de herramientas de desarrollo a su disposición y que está oculto en su navegador favorito.
Cada navegador web ofrece herramientas de desarrollador para verificar la codificación de un sitio web. Sin embargo, es una entidad ajena al usuario medio de Internet. Después de todo, ¿quién quiere mirar la codificación de un sitio web, verdad?
Resulta que hay muchas cosas que puedes aprender mirando la codificación de un sitio web. Siga leyendo para descubrir qué ofrece la función de inspección de elementos y cómo usarla.
La mayoría de los navegadores tienen herramientas para inspeccionar elementos de un sitio web, pero generalmente funcionan de la misma manera.
Uso de Inspeccionar elemento en Google Chrome
- Abre el sitio web que quieras inspeccionar.
- Haga clic derecho en cualquier parte de la página y seleccioneInspeccionar.
O - Clickea en eltres puntos verticalesen la esquina derecha de su barra de herramientas.
- Ir aMás herramientas.
- SeleccionarHerramientas de desarrollo.
O - presione elF12tecla de atajo de teclado en una PC (oCMD + Opciones + Ien un Mac.)
Uso de Inspeccionar elemento en Microsoft Edge
- Abre un sitio web.
- Clickea en eltres puntos verticalesen la esquina superior derecha de la barra de herramientas del navegador.
- Desplácese hacia abajo y haga clic enMás herramientas.
- Haga clic enHerramientas de desarrollo.
O - Haga clic derecho en cualquier parte del sitio web y haga clic enInspeccionar.
O - PrensaCtrl + Mayús + I.
Cualquiera de estos tres métodos le dará el mismo resultado.
Si lo hizo correctamente, se abre un nuevo panel en la parte inferior de su navegador. Estas son las Herramientas para desarrolladores e incluyen la pestaña Elementos. Esta es la herramienta que necesita para inspeccionar elementos.
El panel se abrirá en la parte inferior de la pantalla de forma predeterminada, pero siempre puede cambiar su apariencia. Siga estos sencillos pasos para cambiar la posición del panel Herramientas para desarrolladores:
- Clickea en eltres puntos horizontalesen la esquina superior del panel Herramientas para desarrolladores.
- Seleccione un lado del acoplador (izquierdo, inferior o derecho) o desacople a una ventana separada.
Al pasar el cursor junto al borde del marco del panel Herramientas para desarrolladores y arrastrar, se reducirá o ampliará el espacio de trabajo. Para example, si elige acoplar el panel al lado derecho de la ventana del navegador, intente colocar el cursor sobre el borde izquierdo. Puede arrastrar el panel para cambiar su tamaño cuando vea el cursor de flecha.
Uso de elemento de inspección (específico del sistema operativo)
Aunque muchos de los pasos involucrados podrían haber sido cubiertos mostrándole cómo usar Inspect Element en el navegador, de todos modos le mostraremos cómo hacerlo en la mayoría de los sistemas operativos.
Cómo usar Inspeccionar elemento en un Chromebook
El navegador predeterminado en un Chromebook es Googleasí que sigue el Chrome instrucciones del navegador para accederInspeccionar elemento. Aquí hay un pequeño curso de actualización para usted:
- Abre un sitio web.
- Clickea en eltres puntos verticalesen la esquina superior derecha de la barra de herramientas.
- SeleccionarMás herramientas.
- Haga clic enHerramientas de desarrollo.
También puede utilizar el método del botón derecho del ratón o elF12tecla de función para llegar a las herramientas de desarrollo más rápido.
Cómo usar Inspeccionar elemento en un Android Dispositivo
Ejecutar Inspeccionar elemento en un Android dispositivo es ligeramente diferente. Vea cómo llegar al panel Inspeccionar elemento en Android:
- presione elF12tecla de función.
- ElegirAlternar barra de dispositivos.
- Selecciona el Android dispositivo en el menú desplegable.
Cuando seleccionas un determinado Android dispositivo, notará que se carga una versión móvil del sitio web. Desde aquí, puede usar la función Inspeccionar elemento en su Android dispositivo desde la comodidad de su escritorio.
Este método funciona para ambos Chrome y Firefox navegadores porque tienen una característica en sus Herramientas de desarrollo llamada Simulación de dispositivo.
También funciona de la misma manera para iPhone dispositivos. Solo necesita seleccionar el correcto en el menú desplegable.
Cómo usar Inspeccionar elemento en Windows
La herramienta Inspeccionar elemento no es necesariamente específica del sistema operativo, pero es específica del navegador. Eso significa que las Herramientas para desarrolladores son una característica del navegador que usa y no necesariamente Windows. Sin embargo, puede acceder al panel Inspeccionar elemento independientemente del navegador que prefiera.
si estás usando Windows OS, también es probable que utilice Microsoft Edge navegador. Vea cómo acceder a Inspect Element en MS Edge:
- Abre el sitio web que quieras inspeccionar.
- Toque los tres puntos verticales en la esquina de la ventana del navegador.
- Desplácese hacia abajo y seleccioneMás herramientas.
- Haga clic enHerramientas de desarrollo.
También puede utilizar elF12tecla de función para acceder a Inspeccionar elemento más rápido. Además, hacer clic derecho en la página web y seleccionar Inspeccionar también funciona.
Cómo usar Inspeccionar elemento en un Mac
Si estás usando un Macsu navegador de elección es probablemente Safari. Apertura de elementos de inspección en Safari es ligeramente diferente que en Chrome y Firefox. Pero es igual de simple con estos pasos:
- Abre el Safari navegador.
- Haga clic enSafarien la pestaña de encabezado y seleccionepreferenciasdel menú desplegable.
- Clickea en elAvanzadoicono de engranaje ubicado en la parte superior de la pantalla.
- Marque la casilla que diceMostrar el menú Desarrollar en la barra de menú.
Seguir estos pasos habilita la función Inspeccionar elemento en su navegador. Si no habilita Inspeccionar elemento primero, no verá la opción cuando abra un sitio web.
Después de completar este paso, simplemente haga clic derecho en cualquier página web abierta y seleccione Inspeccionar. También puede usar el comando de teclas rápidas:CMD + Opción + I(inspeccionar).
Cómo usar Inspeccionar elemento en iOS
¿Desea utilizar la función Inspeccionar elementos para ver cómo aparece una versión móvil de una página web en un iPhone? Puedes hacer esto y más con solo unos simples pasos. Pero antes de mirar un elemento, debe habilitarred de inspectorespara tu iOS dispositivo:
- Ir aAjustes.
- Ahora, seleccioneSafari.
- Desplácese hasta la parte inferior y toque en elMenú avanzado.
- Ahora, toque el interruptor de palanca para encenderred de inspectores.
Además, asegúrese de que el menú Desarrollar esté habilitado en su Mac siguiendo los pasos de la sección anterior.
Después de habilitar ambos iOS dispositivos móviles y Mac, verá el menú Desarrollar en la barra superior de su Mac. Haga clic en él para ver el conectado iPhone y la página web activa en el dispositivo. Al seleccionar la página web, también se abre una ventana Web Inspector para la misma página en su Mac pantalla.
Sin embargo, tenga en cuenta que estas instrucciones solo funcionan para Safari corriendo un Macno Safari en Windows.
Cómo usar Inspeccionar elemento cuando está bloqueado
Ocasionalmente, encontrará que no puede inspeccionar una página web, y la selección Inspeccionar aparece atenuada si intenta hacer clic con el botón derecho en ella. Puede pensar que está bloqueado, pero hay muchas formas de evitarlo:
Método 1 -Desactiva Javascript
- Entrar enAjustes.
- BuscarJavaScript.
- ApagarJavaScript.
Método 2: acceda a las herramientas de desarrollo a largo plazo
En lugar de hacer clic con el botón derecho del mouse para inspeccionar, haga esto:
- Ir aAjustesen tu navegador.
- SeleccionarMás herramientas.
- Desplácese hacia abajo y haga clic enHerramientas de desarrollo.
Método 3: uso de la tecla de función
También puedes intentar usar elF12tecla de función en páginas web que bloquean el clic derecho para Inspeccionar.
Es posible que deba probar todos estos métodos antes de encontrar uno que funcione para usted. Como último recurso, también puede intentar ver el código fuente escribiendover fuente: [ingresar URL completa].
Cómo usar Inspect Element en un Chromebook escolar
Si su Chromebook fue emitido por una escuela, el uso de la función Inspeccionar elemento implica algunos pasos simples:
- Haga clic con el botón derecho o toque con dos dedos en la página web y seleccioneInspeccionar.
- PrensaCtrl + Mayús + I.
- Pruebe y use la fuente de vista:[url] método, comover fuente: https://www.wikipedia.com.
Sin embargo, algunas escuelas y organizaciones bloquean esta función, por lo que si no funciona para usted, es posible que deba ponerse en contacto con su organización o el administrador de la escuela.
Cómo usar Inspeccionar elemento para encontrar respuestas
Puede usar Inspeccionar elemento para encontrar respuestas a una variedad de cosas como:
- Vista previa del diseño del sitio en dispositivos móviles.
- Descubra las palabras clave que utilizan los competidores.
- Pruebas de velocidad.
- Cambio de texto en una página web.
- Encuentre ejemplos rápidos para mostrar a los desarrolladores lo que necesita.
Cuando inicie el panel Inspeccionar elemento, verá toda la codificación del sitio web. Eso incluye todo el código JavaScript, CSS y HTML incorporado. Es como ver el código fuente de una página web, excepto que puede realizar cambios en el código. Además, puede ver los cambios implementados en tiempo real.
Esta herramienta hace que sea invaluable para los vendedores, diseñadores y desarrolladores ver cualquier cambio de diseño antes de finalizarlo. Sin embargo, hacer cambios en la codificación con Inspect Element no dura para siempre. Cuando vuelva a cargar la página, volverá a su estado predeterminado.
Preguntas frecuentes adicionales
Si no es un experto en Inspeccionar elemento después de leer más arriba, hay más respuestas aquí.
¿Cómo utilizo el comando Inspeccionar elemento para encontrar respuestas?
La única forma de encontrar respuestas utilizando la función Inspeccionar elemento es si el sitio web lo revela instantáneamente después del envío. En este caso, las respuestas están presentes en la codificación.
De lo contrario, simplemente está viendo la codificación del cuestionario o la prueba cuando usa la función Inspeccionar elemento, así como las respuestas que envía.
¿Es ilegal el elemento de inspección?
No, la herramienta Inspeccionar elemento no es ilegal; está diseñado para desarrolladores web. Ver el código fuente de un sitio web no es ilegal; solo se convierte en un problema si utiliza la información recopilada con fines nefastos, como intentar explotar, etc.
¿Es posible deshabilitar el elemento de inspección en Browser?
La respuesta corta es no.
No puede deshabilitar Inspeccionar elemento en un navegador, pero puede establecer parámetros que impidan que los usuarios realicen ciertas acciones, como hacer clic con el botón derecho en una página web. Existen numerosos tutoriales en línea para configurar los scripts adecuados para deshabilitar ciertos eventos. Sin embargo, en realidad no puede deshabilitar la función Inspeccionar elemento en su totalidad.
Conozca las entrañas de una página web
Revisar la función Inspeccionar elemento de una página web es probablemente una herramienta de desarrollador que nunca supo que necesitaba, incluso si usted mismo no es un desarrollador. Tiene toneladas de aplicaciones de diseño y marketing que pueden hacer que su sitio web funcione mejor. Y tal vez darle una ventaja sobre un competidor.
¿Para qué usa Inspect Element? Cuéntanoslo en la sección de comentarios a continuación.
