Revisar el c\u00f3digo fuente de una p\u00e1gina HTML es una decisi\u00f3n muy inteligente, sobre todo si te inicias en el desarrollo web o simplemente intentas entender qu\u00e9 hace que un sitio funcione. A veces, los sitios cargan scripts o estilos din\u00e1micamente, por lo que el c\u00f3digo que ves en la p\u00e1gina no lo es todo. Ah\u00ed es donde consultar el c\u00f3digo fuente resulta \u00fatil, sobre todo si quieres extraer datos o simplemente aprender c\u00f3mo se crean las cosas. Y s\u00ed, Chrome lo hace bastante sencillo, pero, sinceramente, puede resultar un poco confuso si no est\u00e1s familiarizado con las herramientas o la jerga.<\/p>\n
Google Chrome ofrece un par de m\u00e9todos sencillos para echar un vistazo entre bastidores. Primero, puedes abrir el c\u00f3digo HTML sin procesar directamente desde el servidor o usar herramientas interactivas que muestran el c\u00f3digo despu\u00e9s de que el JavaScript y el CSS del sitio hayan hecho su trabajo. La herramienta “Inspeccionar” es b\u00e1sicamente lo que todo desarrollador usa para navegar por el c\u00f3digo. Es muy \u00fatil para depurar o simplemente para intentar comprender dise\u00f1os complejos. Pero ten en cuenta que, a veces, el c\u00f3digo fuente que ves no es exactamente el que se mostr\u00f3 originalmente, debido a manipulaciones del DOM u otros scripts. Es un poco extra\u00f1o, pero en algunas configuraciones, abrir “Inspeccionar” o la vista del c\u00f3digo fuente podr\u00eda no cargar al instante; recargar la p\u00e1gina, borrar la cach\u00e9 o incluso cerrar Chrome y volver a abrirlo puede ser \u00fatil.<\/p>\n
\u00bfLa forma m\u00e1s r\u00e1pida? Simplemente haz clic en “Inspeccionar” Ctrl + U<\/kbd>en Windows o \u2318-Option-U<\/kbd>Mac. Esto abre al instante una nueva pesta\u00f1a con el HTML sin procesar. En algunos sitios, es la forma m\u00e1s sencilla, sobre todo si solo quieres echar un vistazo al c\u00f3digo. Pero recuerda que esto muestra el c\u00f3digo tal como lo env\u00eda el servidor, no lo que ves despu\u00e9s de que JavaScript o los estilos lo modifiquen. Para una exploraci\u00f3n m\u00e1s profunda, el panel “Inspeccionar” es una mejor opci\u00f3n.<\/p>\n Haz clic derecho en cualquier parte de la p\u00e1gina (s\u00ed, en cualquier parte) y ver\u00e1s opciones como Ver c\u00f3digo fuente<\/strong> o Inspeccionar<\/strong>. Selecciona Ver c\u00f3digo fuente<\/strong> para ver el HTML sin procesar, que se actualiza al actualizar la p\u00e1gina. Si seleccionas Inspeccionar<\/strong>, se abre el panel Chrome DevTools justo en el elemento en el que hiciste clic, lo que te permite ver el estado actual de ese elemento despu\u00e9s de aplicar scripts o estilos. Esto es \u00fatil para solucionar problemas de dise\u00f1o o contenido din\u00e1mico. A veces, este panel no se carga inmediatamente, as\u00ed que espera un momento o vuelve a cargarlo si es necesario; Chrome puede ser un poco inestable en este caso.<\/p>\n Para los verdaderos nerds y usuarios m\u00f3viles, pueden modificar la URL. Simplemente hagan clic en la barra de URL y escriban Si hacer clic derecho no te convence, el men\u00fa de Chrome te ayuda. Haz clic en el icono de tres puntos<\/strong>, ve a M\u00e1s herramientas<\/strong> y selecciona Herramientas para desarrolladores<\/strong>. Esto abre el panel Herramientas de desarrollo, repleto de funciones: Elementos, Consola, Red, etc. La pesta\u00f1a Elementos<\/strong> es donde probablemente pasar\u00e1s la mayor parte del tiempo, examinando DOMs activos o ajustando estilos. Al principio puede resultar un poco intimidante, pero experimentar con ella puede ense\u00f1arte mucho sobre el funcionamiento de los sitios web. Adem\u00e1s, puedes activar y desactivar la emulaci\u00f3n de dispositivos y probar dise\u00f1os m\u00f3viles directamente desde all\u00ed.<\/p>\n Una vez que tengas el c\u00f3digo frente a ti, comprender los conceptos b\u00e1sicos es de gran ayuda. HTML se basa en etiquetas, como Recuerda que, a veces, lo que ves en el c\u00f3digo fuente no refleja la imagen completa. Los scripts modifican los elementos del DOM despu\u00e9s de la carga, por lo que la p\u00e1gina en tiempo real podr\u00eda verse diferente. Aqu\u00ed es donde Inspeccionar resulta \u00fatil, ya que muestra el c\u00f3digo *real* con el que est\u00e1s interactuando, no solo el HTML original.<\/p>\n \u00bfLa verdad? A veces es un poco lioso: los scripts se cargan asincr\u00f3nicamente y los DOM cambian sobre la marcha. Pero dominar los conceptos b\u00e1sicos facilita mucho la depuraci\u00f3n o simplemente el aprendizaje. Porque, claro, Chrome tiene que complicarlo un poco.<\/p>\n","protected":false},"excerpt":{"rendered":" Revisar el c\u00f3digo fuente de una p\u00e1gina HTML es una decisi\u00f3n muy inteligente, sobre todo si te inicias en el desarrollo web o simplemente intentas entender qu\u00e9 hace que un sitio funcione. A veces, los sitios cargan scripts o estilos din\u00e1micamente, por lo que el c\u00f3digo que ves en la p\u00e1gina no lo es todo. […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-10764","post","type-post","status-publish","format-standard","hentry","category-how-to"],"acf":[],"_links":{"self":[{"href":"https:\/\/howtogeek.blog\/es\/wp-json\/wp\/v2\/posts\/10764","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/howtogeek.blog\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/howtogeek.blog\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/howtogeek.blog\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/howtogeek.blog\/es\/wp-json\/wp\/v2\/comments?post=10764"}],"version-history":[{"count":1,"href":"https:\/\/howtogeek.blog\/es\/wp-json\/wp\/v2\/posts\/10764\/revisions"}],"predecessor-version":[{"id":10765,"href":"https:\/\/howtogeek.blog\/es\/wp-json\/wp\/v2\/posts\/10764\/revisions\/10765"}],"wp:attachment":[{"href":"https:\/\/howtogeek.blog\/es\/wp-json\/wp\/v2\/media?parent=10764"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/howtogeek.blog\/es\/wp-json\/wp\/v2\/categories?post=10764"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/howtogeek.blog\/es\/wp-json\/wp\/v2\/tags?post=10764"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Uso del men\u00fa contextual<\/h3>\n
Editar URL para ver el c\u00f3digo fuente<\/h3>\n
view-source:<\/code>antes de la URL de la p\u00e1gina web. Por ejemplo, si era https:\/\/www.example.com<\/a>, c\u00e1mbienlo a view-source:https:\/\/www.example.com<\/a> y presionen Enter. Esto carga el HTML sin procesar al instante. No s\u00e9 por qu\u00e9 funciona, pero es muy \u00fatil en dispositivos m\u00f3viles cuando la interfaz del navegador puede interferir con las herramientas de desarrollo. Es un truco raro, pero a veces salva el d\u00eda.<\/p>\nAcceso a trav\u00e9s del men\u00fa de Chrome<\/h3>\n
Familiarizarse con los conceptos b\u00e1sicos del c\u00f3digo fuente<\/h2>\n
<p><\/code>las de p\u00e1rrafos, <div><\/code>contenedores o <a><\/code>enlaces. Estas etiquetas indican al navegador qu\u00e9 es cada fragmento de contenido. Los atributos dentro de las etiquetas, como class<\/code>o id<\/code>, proporcionan informaci\u00f3n adicional, como el estilo o la identificaci\u00f3n de elementos espec\u00edficos. Por ejemplo, la p\u00e1gina web de MDN sobre elementos HTML<\/a> es un buen recurso si te pierdes.<\/p>\n