Editando HTML

No sabia que podía mover los nodos de esa forma 😃

1. Control + F: Buscar palabras especificas dentro del documento HTML. (Se debe estar en la sección de elementos)
2. Los tres puntos al lado izquierdo de cada elemento HTML nos ayudan a mover estos a otras posiciones. Por ejemplo: cambiar de posición los elementos de una lista del nav.
3. Settings -> Shorcouts: Te permiten ver los atajos de teclado que puedes utilizar en las dev tools dependiendo de tu sistema operativo.

Para los que quieran profundizar Chrome DevTools
Elements

En Firefox, el equivalente es la pestaña Inspector y tiene habilitado el buscador por defecto. Además te da sugerencias de qué clases o elementos buscar

Manipulando el HTML

Podemos ver el HTML de una página web en la sección de Elements del DevTools. Aquí podremos manipular el HTML o usar el selector y al tocar en algo en específico dentro de la página en Elements se colocará en la línea de código html que sea ese elemento seleccionado.

Para modificar textos dentro de etiquetas das doble click, y también en las etiquetas. Y en los tres puntos a la derecha nos dejan arrastrar todo ese bloque de código hacia otros lugares.

Shortcuts

Ctrl+shift+c, para activar el selector

Ctrl+f, para hacer búsquedas dentro de Elements, este comando también sirve para buscar palabras dentro de una página web

Podemos ver la estructura HTML de cualquier página en la pestaña Elements. Desde ahí podrémos cambiar el contenido de todas las etiquetas, remover y añadir más, cambiar la posición de los nodos, y más.

• Podemos ver la estructura de cada elemento en pantalla con el inspector ubicado en la esquina superior izquierda o click derecho en éste e inspeccionar elemento.
• Para hacer busquedas por palabra damos click en cualquier nodo y presionamos control + f

Esta práctica la recomiendo mucho cuando tienen “dudas” sobre algún estilo en Css, o en javascript; para que después, lo pasen a su código.

0:43 Sección Elementos.

1:23 Seleccionando un elemento en la página.

2:45 Modificando los nodos del HTML.

3:25 Moviendo los nodos.

5:21 Shorcuts para acceder a las funcionalidades del inspector con más eficiencia.

Cuéntame si parece útil este formato de resumen, y dale 💚 si quieres más de estos para la comunidad 😁🙌

A mi me salio para buscar haciendo ctrl + F

En esta página van a poder encontrar la lista completa de shortcuts and gestures de Devtools. Viene la descrpción tanto para Mac como para Windows y Linux 😃

ELEMENTS - HTML

• Para hacer búsqueda dentro de la pestaña de elementos (Windows) Ctrl + Shift + F
• Doble click encima de la etiqueta para modificar texto.
• Al dar click en el icono de 3 puntitos se pueden mover las etiquetas
  html.

Hay que tener en cuenta que los cambios que hagamos en DevTools no estarán en nuestro código local, así que antes de emocionarnos y hacer muchísimos cambios es mejor trabajar progresivamente de a pocos esos cambios para solucionar errores

Con este comando en la consola puede editar cualquier sitio web

document.designMode = 'on'

Todas las página tienen su propio DevTools, y todo lo que tu ves dentro de DevTools es exactamente el código de dicha página, es el código que el servidor de X página le está mandando a tu navegador, y si, puedes ir a Facebook o Twitter y mirar sus devtools, juguetear con ella e incluso cambiar el layout de dichas páginas, obviamente al refrescarla todo lo que hagas se irá, pero es divertido curiosear en su código ^^

Consejos para editar HTML

• Para buscar cosas en el Dev Tools utilizamos “comand + F”.
• Para modificar el HTML solo es necesario dar doble click sobre el código.
• Drag and drop de elementos.
• Buscar mas comandos en el menu shortcuts.

Gran herramienta de trabajo para desarrolladores,

Hoy aprendí a como mover los nodos del árbol HTML. Yo intentando copiar y pegar todo el bloque de HTML.

Es muy útil para hacer cambios de los cuales no estamos muy seguros, o simplemente ir probando cosas nuevas para luego pasarlo a nuestro código!

DevTools me ha ayudado bastante en mis desarrollos 😄

Es increible la forma en que se utiliza la “DevTools” para HTML en la parte de editar y mover los archivos, estoy impresionado. Saludos.

eso de mover los nodes… super!!!

A seguir aprendiendo.

Excelente Diego

Genial!!!

Y Yo que pense que no aprenderia mucho en este curso, Y Pumm tres cosas que no sabia 😍😍😍

Empezó muy bien este curso. Genial …

Desconocía que los tres puntos era para mover los elementos HTML 😮

No inventes no sabia mucho de esto. Sobre todo lo de los nodos, me va a ahorrar mucho tiempo!

No sabia lo de Ctrl + F, y los atajos del teclado, eso me gusto.✔👏

Generalmente usaba la consola de Firefox, pero vamos a probar con la de Chrome!!!

Muy buen inicio!

Super utiles las Devtools, yo las he usado para aprender desarrollo web y me han servido una barbarida…Son de gran ayuda… Cuando quiero ver como esta construida una web tambien uso el Inspector de elemento y eso da una idea de maquetación muy chevere

super bueno, par de cosas sencillas y útiles que aprendí hoy

De mucha utilidad cuando trabajas maquetando el proyecto y mas aun cuando comienzas a darle estilos.

Cuando tienes un proyecto grande, para hacer una búsqueda te puede llevar mucho tiempo, pero puedes hacer más óptimas tus búsquedas, es decir, si necesitas ser súper específico en buscar un elemento, puedes ir a la barra de herramientas y hacer un filtro:

👌

No sabía que el Ctrl+F funcionaba en la consola ni que se pueden mover bloques de código, me este curso si que me está encantando.

Dev tools! será tu mejor amigo de por vida en la programación web, es mejor buscar el error en dev tools que ir a tu Editor de código y tratar de ver que te quedo mal

Dejo un link de Google Developers que me ayudo mucho con este tema en particular. Espero que les sirva.
https://developers.google.com/web/tools/chrome-devtools/dom