Pagecloud
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.
Comentarios
La mayoría de los navegadores web vienen con algún tipo de herramienta para desarrolladores 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 las fuentes de la siguiente lista.
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.
Documento body contenteditable true’; documento designmode on’; void 0
En Presence Builder, puede cambiar casi cualquier elemento de su sitio web. La mayoría de los elementos se cambian en el lugar – usted abre una página donde se utiliza el elemento, lo edita y ve el resultado de inmediato. Los elementos que abarcan todo el sitio, como los que se insertan en las áreas de DISEÑO, se cambian en un lugar, pero los cambios se aplican a cada página de su sitio web.
Nota: Si utiliza Internet Explorer, le recomendamos encarecidamente que evite utilizar el zoom del navegador para cambiar el tamaño del texto que se muestra en la ventana del navegador. Tenga en cuenta que los sitios web en Presence Builder funcionarán y se verán mejor con un zoom normal (100%).
Modo de edición en Chrome
Editar un sitio web es una de las tareas más comunes que cualquier profesional digital puede encontrar en su vida diaria, y sin embargo, es una tarea muy difícil la mayoría de las veces. Al fin y al cabo, ¡eres un comercializador, no un desarrollador!
¡No sabes nada relacionado con el código y la mera visión de una pantalla negra llena de letras blancas hasta arriba te pone ansioso cuando todo lo que quieres es hacer algunos cambios rápidos en un sitio web! Tal vez sólo sea ajustar algún texto, probar diferentes imágenes en una página de aterrizaje o probar diferentes colores para los botones CTA. No debería ser necesario aprender a codificar para realizar tareas tan sencillas, ¡no debería ser tan difícil!
Tradicionalmente, sólo los desarrolladores y programadores web o web masters eran los que llevaban el peso de la edición de los sitios. Cuando comenzó la world wide web, era un mundo reservado casi exclusivamente a los técnicos, porque eran éstos los que entendían cómo se construía la web.
Con el paso de los años, han surgido cada vez más herramientas que permiten a cualquier persona crear y editar sitios web, por lo que ahora mismo ha pasado de ser un mundo reservado a los desarrolladores a ser un entorno más democratizado en el que mucha gente está empezando a crear y editar sitios web por sí misma.
