Es posible que haya oído hablar de esta potente función en su navegador Chrome: herramientas de desarrollo de Chrome. Y si bien es cierto que la mayor parte es útil para los desarrolladores web, hay ocasiones en las que es útil para un usuario promedio de Internet. En este artículo, nos centraremos en cosas útiles que puede hacer con las herramientas para desarrolladores de Chrome. Por ejemplo, cómo eludir las restricciones establecidas por el sitio web, descubriendo fuentes, colores e imágenes que están ocultas en la superficie o que incluso han olvidado las contraseñas.
¿Cómo abrir herramientas de desarrollador en Chrome?
Para abrir las herramientas de desarrollo de Chrome en Google Chrome, haga clic en Personalizar Chrome (⋮)> Más herramientas -> Herramientas de desarrollo. Tú también puedes botón derecho del ratón en la página que desea editar y elija Inspeccionar. Me gusta usar el teclado corto Ctrl + Mayús + I (Cmd + Opción + I para Mac).
De forma predeterminada, abre una nueva ventana a la derecha, pero prefiero mantenerla en la parte inferior, ya que me da más espacio para expandirla. Para mover la ventana hacia la parte inferior, haga clic en el botón de 3 puntos verticales en la parte superior derecha (⋮) y luego elija la opción de acoplamiento inferior. También puede encender el modo oscuro desde la Configuración, lo hace más fácil para los ojos. Ahora, la próxima vez que abra el elemento de inspección, recordará mis cambios.
10 consejos de herramientas para desarrolladores de Chrome
1. Editar una página web
Ahora bien, este es el uso más básico de las herramientas de desarrollador, pero debe incluirse. Puede editar temporalmente cualquier página web (como Wikipedia) en su navegador. Para hacer esto, abra cualquier página web que le gustaría editar en Chrome y haga clic derecho y elija Inspeccionar elemento. Vaya a la pestaña de la consola (debería ser la segunda opción desde la parte superior), luego pegue la siguiente línea de código y presione enter.
document.body.contentEditable = true
Esto hará que toda la página web sea editable como cualquier documento de Word. Simplemente haga clic en cualquier lugar y comience a escribir. Aunque recuerde que todos los efectos desaparecerán una vez que actualice la página. Por lo tanto, asegúrese de hacer una captura de pantalla de la página antes de cerrar el navegador.
2. Revele la contraseña guardada
Digamos que quiere iniciar sesión en su Instagram en su móvil, pero no recuerda la contraseña. Afortunadamente, lo tienes guardado en tu navegador. Ahora, en lugar de pasar por el minucioso proceso de restablecimiento de contraseña, puede usar herramientas de desarrollador para revelar la contraseña oculta.
Haga clic con el botón derecho en el campo de contraseña y luego elija «Inspeccionar elemento.«Esto abrirá la ventana del inspector de documentos y todo lo que tienes que hacer es reemplazar la palabra»contraseña» con «texto» en el tipo de contraseña campo de entrada. Y esto debería revelar la contraseña oculta entre asteriscos.
3. Tome una captura de pantalla de la página web.
¿Sabía que puede tomar una captura de pantalla de la página web usando las herramientas de desarrollo de Chome sin usar ningún complemento adicional? La función es bastante simple y ofrece solo dos configuraciones: La parte visible de la página web, toda la página web. Puede capturar las capturas de pantalla para la versión móvil de la página web y puede elegir algunos diseños móviles en el menú desplegable en la parte superior.
Para capturar la captura de pantalla, abra las herramientas de desarrollo de Chrome. Vaya a la pestaña Consola y presione Ctrl + Mayús + M(ventanas) o cmd + opt + M(Mac). A continuación, haga clic en Menú de 3 puntos en la parte superior derecha de la página web y seleccione Capturar captura de pantalla o Capturar captura de pantalla a tamaño completo. Y eso es todo, tu captura de pantalla se guardará en la carpeta de descargas.
Hay otras formas de tomar capturas de pantalla y siempre puede instalar una extensión de captura de pantalla o usar el acceso directo de captura de pantalla nativo de la computadora, prtsc (windows) y cmd + shift + 4 (MacOS), pero este método funciona igual de bien.
4. Utilice el selector de color
Soy un fanático de los colores mínimos y, la mayoría de las veces, me desplazo por imágenes mínimas en Google para inspirarme para las funciones de imágenes y miniaturas. O digamos, si el esquema de color de un sitio web en particular le llama la atención y quiere saber qué color están usando, siempre puede instalar una extensión de selector de color. Pero hay una forma más rápida de hacerlo.
Abra las herramientas de desarrollo de Chrome, en el lado izquierdo haga clic en Estilo pestaña, haga clic en el cuadro pequeño junto al color. Esto traerá Herramienta de selección de color, ahora, haga clic en cualquier lugar de la página web, cuyo color desea averiguar y el selector de color le dará el código hexadecimal. Simplemente copie el código hexadecimal y péguelo en Photoshop.
5. Cambie el sitio web al diseño móvil
Cada vez que abre un sitio web, muchos de sus datos se envían bajo el capó, como su dirección IP, fecha y hora exactas, la URL, de dónde viene y el agente de usuario.
El agente de usuario ayuda al sitio web a identificar su navegador. Y en algunos casos, cambiar el agente de usuario ayuda. Por ejemplo, si desea verificar si su sitio web responde o no. Pero mi favorito es acceder a la versión diferente del sitio web. Por ejemplo, algunos sitios web gubernamentales en India se abren solo en Internet Explorer, o para un ejemplo global, tomemos Instagram. Como sabes, no puedes subir fotos a Instagram él en la computadora, pero puedes hacerlo desde su sitio web móvil. Entonces, ¿por qué no disfrazar el navegador de escritorio con el del móvil?
Para hacer esto, inicie las herramientas de desarrollo de Chrome, Haga clic en 3 puntos verticales, y debajo de más Herramientas Seleccione Condiciones de la red. Ahí desmarcar la caja que dice, Agente de usuario, seleccionar automáticamente y en el cuadro emergente seleccione un Navegador móvil. Si está intentando acceder a un sitio web del gobierno, seleccione un navegador compatible diferente. Ahora cierre la ventana y actualice la página. Como puede ver, hay un botón de carga completamente funcional, que puede usar para cargar imágenes a Instagram desde la computadora.
6. Busque cualquier cosa
Otra característica útil que es difícil de identificar es la búsqueda. La pestaña «Buscar» le permite buscar en una página web contenido específico o un elemento HTML.
Por ejemplo, digamos que si desea saber qué fuente está usando un sitio web, deberá hacer clic en el 3 puntos luego haga clic en Búsqueda y escriba la fuente o, para ser precisos, use Familia tipográfica, y puedes encontrar la información en las líneas de código.
O tomemos otro ejemplo, me tropiezo con un sitio web que usa un video en segundo plano y tengo curiosidad por saber qué video es exactamente. Ahora, guardar la página no funcionará. En su lugar, utilice la herramienta de desarrollo de Chrome y busque «video» desplácese por los resultados y vea si obtiene alguna URL. En ese caso, use el sentido común, si se trata de un archivo de video, generalmente tiene una extensión de mp4, trata eso. Y ahí lo tienes, ahora tienes un par de resultados con mp4, uno de ellos debería ser el archivo de video, haz clic en él para que aparezca la URL. Copie esa URL y péguela en el navegador, y listo.
7. Eliminar ventanas emergentes
Otra característica útil de i es eliminar las ventanas emergentes del sitio web. Por ejemplo, tomemos Quora, un popular sitio web de preguntas y respuestas que ofrece contenido solo a sus miembros. Si visita este sitio desde Google e intenta leer más de una página, aparecerá una ventana emergente pidiéndole que se registre. A continuación se explica cómo eliminarlo, haga clic con el botón derecho en la página y muestre los elementos Inspeccionar. Mueva su cursor a la línea de código hasta que se resalte la ventana emergente (que cubre el contenido). Una vez hecho, eliminar esa línea de código. A veces hay otra capa transparente en el cuerpo de la página que hace que los enlaces no respondan. Elimina eso también.
Leer: Cómo ver contenido bloqueado en sitios web
8. Cambie la ubicación GPS de su navegador
Ahora, hay 2 formas en las que cualquier sitio web puede averiguar desde dónde está navegando: su dirección IP y la ubicación de su navegador. Si bien puede cambiar fácilmente la dirección IP, utilizando nuestra VPN y Smart DNS, no es fácil cambiar la ubicación del navegador.
Por ejemplo, el otro día, estaba navegando por CBS con VPN y todo funcionó bien. Pero, cuando decidí ver canales locales en CBS y me mostró una ventana emergente preguntando por la ubicación de mi navegador. Y luego haga clic en Permitir, dice que el contenido no está disponible en mi ubicación.
Para arreglar eso, abre Consola de desarrollador, haciendo clic derecho en la pantalla. En la parte inferior del panel, presione el botón de tres puntos en la esquina superior derecha y, a continuación, haga clic en «Sensores«Opción de Más. Se abrirá una nueva ventana en la mitad inferior de la ventana de herramientas de desarrollador, debajo Geolocalización, Seleccione «Ubicación personalizada.”Ahora ingrese su ubicación en función de la latitud y la longitud, si no conoce estos valores, siempre puede usar los mapas de Google. O simplemente seleccione el nombre de la ciudad como California. Ahora, vuelva a cargar la página, permita los datos de ubicación en la ventana emergente. Y ahora, si actualizo la página y hago clic en permitir ubicación, como puede ver, ahora puedo transmitir estaciones locales.
9. Usa regla
Al igual que una herramienta de selector de color, las herramientas de desarrollo de Google Chrome también incluyen una regla. Esto es útil cuando desea medir píxeles a lo largo y ancho de la página.
Para que aparezca la regla, haga clic con el botón derecho en la página donde le gustaría usar una regla y haga clic en «Inspeccionar elemento”. A continuación, debe habilitarlo por primera vez, haga clic en los 3 puntos verticales en la parte superior derecha y Ajustes. Se abrirá una nueva ventana, debajo del Elementos seleccionar sección Mostrar regla opción.
10. Limita la velocidad de descarga en Chrome
Si desea limitar la velocidad de descarga, puede hacerlo con las herramientas de desarrollo de Chrome. No solo limita la velocidad de descarga de los paquetes reales, sino también la transmisión. Básicamente, puede aislar una pestaña y hacer que la pestaña se cargue de acuerdo con la velocidad que acaba de configurar. Funciona de maravilla cuando desea limitar el ancho de banda en su navegador mientras mira una película.
Para establecer la velocidad de una pestaña, ir a las opciones de desarrollador, y haga clic en el botón de opciones justo al lado de auditar y seleccionar la configuración o simplemente puede presionar la tecla F1 directamente para abre la configuración. Vaya a la pestaña Throttling y haga clic en ‘Agregar perfil personalizado ‘. Puede nombrar el perfil y establecer la velocidad de descarga y carga. Después de agregar las figuras, haga clic en ‘Agregar’ y listo.
Este perfil solo funcionaría en la pestaña abierta actualmente y tendría que mantener activa la ventana de opciones de desarrollador, de lo contrario, la limitación no funcionará. Para activar el perfil, ir a la pestaña de red en las herramientas para desarrolladores y haga clic en el menú desplegable junto a Sin conexión. Seleccione el perfil personalizado y su página ahora está estrangulada. Todo lo que se descargue de esta página se limitará al límite establecido. Solo asegúrese de no cerrar la ventana de inspección del elemento o actualizar la página.
¿Cómo se usa la herramienta para desarrolladores de Chrome?
En general, las herramientas para desarrolladores tienen más casos de uso que jugar con sus sitios web favoritos. En resumen, cualquier cosa que el sitio web no esté haciendo en el lado del servidor se puede modificar con las herramientas de desarrollo de Chrome. Alternativamente, puede usar la extensión Web Developer para obtener acceso con un clic a todas las funciones y más.
