Chrome DevTools es un potente conjunto de herramientas de desarrollo web integradas en el navegador Chrome. Una de las características más útiles de DevTools para los desarrolladores web es la capacidad de editar en vivo el HTML y CSS de una página. Esta funcionalidad permite a cualquier desarrollador, incluso a los que tienen menos conocimientos de HTML y CSS, crear rápidamente prototipos e iterar sobre posibles cambios en una página web.
Hay dos formas rápidas de abrir el inspector. La primera es abrir DevTools con F12, seleccionar la pestaña “Elementos” y hacer clic en el icono del cursor en la parte superior izquierda. La segunda forma, más rápida, es utilizar el atajo de teclado Ctrl+Mayús+C. Si trabajas habitualmente en un entorno Linux, es muy probable que hayas utilizado este atajo por accidente muchas veces cuando querías copiar un texto.
Una vez seleccionado un elemento, puedes interactuar con él de muchas maneras. Si haces clic con el botón derecho del ratón sobre el HTML en la pestaña “Elementos” y seleccionas “Editar como HTML”, podrás realizar ediciones en vivo en el marcado de una página web que Chrome renderizará inmediatamente una vez que hayas terminado de editar.
Este artículo ha sido redactado por Mitch Harris. Mitch Harris es un experto en tecnología de consumo con sede en el área de la bahía de San Francisco. Mitch dirige su propia empresa de consultoría informática llamada Mitch the Geek, que ayuda a particulares y empresas con la tecnología de la oficina en casa, la seguridad de los datos, el soporte remoto y el cumplimiento de la ciberseguridad. Mitch es licenciado en Psicología, Inglés y Física y se graduó con honores en la Universidad del Norte de Arizona.
Cualquier bromista puede ver el potencial de ser capaz de cambiar temporalmente la forma en que un sitio web aparece en su ordenador, y hay un montón de aplicaciones prácticas de ser capaz de ajustar la forma en que un sitio web aparece a usted también[1].
Este artículo ha sido redactado por Mitch Harris. Mitch Harris es un experto en tecnología de consumo con sede en el área de la bahía de San Francisco. Mitch dirige su propia empresa de consultoría informática llamada Mitch the Geek, que ayuda a particulares y empresas con la tecnología de la oficina en casa, la seguridad de los datos, el soporte remoto y el cumplimiento de la ciberseguridad. Mitch es licenciado en Psicología, Inglés y Física y se graduó con honores en la Universidad del Norte de Arizona. Este artículo ha sido visto 331.787 veces.
La mayoría de los navegadores web vienen con algún tipo de herramienta de desarrollo web incorporada. También puedes añadir extensiones del navegador para inspeccionar el HTML, el CSS y las tecnologías subyacentes de una página web. Comprueba la documentación del navegador, así como la documentación de la fuente de la lista que aparece a continuación.
Puedes encontrar más herramientas de desarrollo web “secretas” en un artículo de Andi Smith con consejos sobre cuáles están incorporadas y cómo utilizarlas. Consulta también 15 útiles herramientas de desarrollo web en el navegador de Smashing Magazine.
Para utilizar esta función, puedes copiar el HTML o CSS con el que deseas experimentar y pegarlo en tu página web o en una página de prueba, o puedes guardarlo en tu ordenador junto con la página web para editarlo y experimentar con él allí. O, si se trata de tu propia página web, haz los cambios oportunos y súbela a tu servidor.
Sin embargo, es posible abrir y editar archivos fuente directamente en Chrome. Cualquier cambio que realices se guardará en el sistema de archivos y se actualizará dentro del editor (suponiendo que se actualice cuando se produzcan cambios en los archivos).
Abre Chrome, carga una página desde tu sistema de archivos/servidor local y abre Herramientas de desarrollo desde el menú Más herramientas o pulsa F12 o Ctrl/Cmd + Shift + I dependiendo de tu sistema. Ve a la pestaña Fuentes para examinar el explorador de archivos:
Haz clic en la pestaña Sistema de archivos y, a continuación, haz clic en + Añadir carpeta al espacio de trabajo. Se te pedirá que localices tu carpeta de trabajo y Chrome te pedirá que confirmes que permites el acceso. El explorador muestra los archivos de tu sistema que se pueden abrir con un solo clic: