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 un prototipo 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.
Para empezar a buscar en el marcado, haga clic en el cuadro de búsqueda para expandirlo o pulse Ctrl + F , o Cmd + F en un Mac. Hay tres tipos de búsqueda que se realizan automáticamente en función de lo que se introduzca, una búsqueda de texto completo, una búsqueda de selector CSS y una búsqueda XPath.
También es posible buscar a través de XPaths. Esto le permite buscar elementos específicos sin el conflicto de coincidir con palabras dentro del texto. Por ejemplo, //a coincide con todos los elementos a pero no con la letra “a” dentro del contenido del texto. Además, permite realizar algunas búsquedas más avanzadas, como encontrar elementos que empiecen por un texto específico, por ejemplo.
El resto del panel muestra el HTML de la página en forma de árbol (esta interfaz de usuario también se denomina vista de marcado). Justo a la izquierda de cada nodo hay una flecha: haga clic en la flecha para expandir el nodo. Si mantienes pulsada la tecla Alt mientras haces clic en la flecha, se expande el nodo y todos los nodos debajo de él.
El elemento es un contenedor de desplazamiento, es decir, tiene aplicado el desbordamiento: desplazamiento, o el desbordamiento: automático y suficiente contenido para provocar el desbordamiento desplazable. Si la preferencia devtools.overflow.debugging.enabled es verdadera, la activación de la insignia de desplazamiento resaltará cualquier elemento que cause el desbordamiento, y estos nodos mostrarán adicionalmente la insignia de desbordamiento.
Un editor de código HTML y CSS proporciona la funcionalidad que necesitas para escribir código de forma más rápida y sencilla, como el resaltado de sintaxis, el marcado de errores y el autocompletado. Incluso si tienes conocimientos limitados de codificación, el editor adecuado te ayudará a crear un sitio web de forma eficiente.
A continuación, explicaremos qué es un editor de código y las principales características que puedes esperar. Luego, veremos los editores de código que varían en funcionalidad, precio y propósito para que puedas elegir el que mejor se adapte a tu experiencia, presupuesto y negocio. Empecemos.
Un editor de código HTML es un tipo de software que los desarrolladores web utilizan para crear y editar el código HTML para que puedan construir aplicaciones web más rápido y más fácil. Hay dos tipos de editores de HTML: Los editores WYSIWYG (“What You See Is What You Get”) y los editores de texto.
¿Sabes que los profesionales del marketing utilizan herramientas de blogging como Grammarly y Hemingway para revisar la ortografía de sus publicaciones y mejorar su legibilidad? Los desarrolladores utilizan herramientas similares -conocidas como editores de código- para ayudarles a escribir y mejorar su código.
Los editores de HTML WYSIWYG son excelentes para los programadores principiantes porque muestran a los visitantes el aspecto que tendrá el sitio web. Este tipo de editor suele tener una interfaz de arrastrar y soltar para que puedas añadir, eliminar y modificar encabezados, imágenes y otros elementos de la página sin tener que escribir o editar una sola línea de código.
Cubriremos cómo editar HTML usando el editor de bloques y el editor clásico, y también te mostraremos una forma fácil de añadir código a tu sitio. Puedes hacer clic en los enlaces de abajo para saltar a tu sección preferida.
A continuación, sigue adelante e introduce tu código HTML personalizado en el bloque. También puedes hacer clic en la opción “Vista previa” para comprobar si el código HTML funciona correctamente y cómo se verá el contenido en tu sitio web en vivo.
Después, puedes editar el HTML de tu contenido. Por ejemplo, puedes poner en negrita diferentes palabras para que destaquen, utilizar el estilo de cursiva en el texto, crear listas, añadir una tabla de contenidos y mucho más.
La ventaja de utilizar FTP en lugar del editor de código es que puedes corregir fácilmente los problemas utilizando el cliente FTP. De esta manera, no te quedarás fuera de tu panel de control de WordPress si algo se rompe al editar el HTML.
Esperamos que este artículo le haya ayudado a aprender cómo editar HTML en el editor de código de WordPress. Quizás también quieras ver nuestra guía sobre cuánto cuesta realmente construir un sitio web con WordPress, o ver las razones más importantes por las que deberías usar WordPress para tu sitio web.