No puedo ver el código de la página. Google Chrome: herramientas para webmasters
Entonces, hoy veremos varias herramientas útiles para webmasters que facilitan la vida al diseñar un sitio web. Comencemos con la consola del web master en Google Chrome. Y repasemos las preguntas que con mayor frecuencia le surgen a un webmaster durante el diseño de un sitio web.
Para acceder a la consola, abra su sitio web en Google Chrome, haga clic derecho en cualquier lugar de la página web y seleccione "Ver código de página" en el menú desplegable contextual, o en un elemento específico para estudiar seleccionando "Ver código" elemento".
En la parte superior tendrás varias pestañas enumeradas. Hoy hablaremos de la pestaña “Elementos” , que presenta los elementos de una página web con resaltado de etiquetas, propiedades, resaltado del anidamiento de elementos, una representación de la jerarquía del elemento en el árbol DOM (una pista en la parte inferior, desde el padre raíz hasta el actual), la capacidad para editar elementos, una lista de sus propiedades, considere buscar por elementos, así como familiaricémonos con la visualización de estilos CSS, etc., asociados con los elementos.
¿Cómo puedo ver todos los estilos asociados a un elemento específico? ¿Cuál se usa ahora? ¿En qué archivos se encuentran?
¡Nada podría ser más fácil! Abra el navegador Google Chrome, abra nuestro sitio, la fuente de las preguntas, haga clic derecho en el elemento deseado si está visible en el contexto de la página y seleccione "Ver código del elemento" en el menú contextual.
En la parte inferior tenemos una consola con una pestaña resaltada a la izquierda " Elementos" y todos los estilos asociados al elemento de la derecha, donde: Estilos calculados– estos son estilos generales de "resumen" que se asignaron al elemento a partir de las reglas CSS y la configuración del navegador del usuario (su entorno), y al mismo tiempo la pestaña está colapsada.
Pero nos interesa la pestaña "Estilos", expandida debajo, que enumera a su vez todos los estilos asignados al elemento, así como los archivos donde se especifican estas reglas para este elemento por su tipo, id, clase, nombre, propiedad. , atributo, etc. Además, si una regla CSS está tachada, significa que se redefinió antes/posteriormente (lo que facilita rastrear cuál de las reglas CSS tiene prioridad y se aplica en este caso al elemento).
Debajo de la consola hay una línea que muestra el elemento en la jerarquía del documento, lo que le permite ver fácilmente la lista completa de elementos principales desde la raíz hasta el elemento seleccionado. Algo así como “pan rallado”.
¿La etiqueta HTML no es visible en el contexto de la página? ¿O necesita buscar todas las etiquetas, por ejemplo, por una clase, nombre, propiedad o tipo específico?
Abra el sitio en Google Chrome, haga clic derecho, abra el menú contextual, seleccione « Ver código de página » . Presione la combinación de teclas "CTRL + F" al mismo tiempo, ingrese la frase que necesitamos ( Por ejemplo: clase =”relleno") y moverse por la lista de resultados encontrados, viendo simultáneamente todos los estilos asociados con los elementos deseados en el lado derecho de la página.
Cómo ver el código html de un elemento cargado dinámicamente (por ejemplo: vía Ajax)
Estamos esperando que se cargue la página en Google Chrome. Realizamos las acciones necesarias para que Ajax funcione. Haga clic derecho en los datos cargados, seleccione "Ver código de elemento" en el menú contextual y examine el resultado en la consola en la pestaña "Elementos" a la izquierda.
Ver cambios de estilo CSS en tiempo real
Por cierto, también conviene observar, si es necesario, qué estilos se asignan a un elemento sobre la marcha, por ejemplo, al desplazarse por una galería y otros eventos del temporizador. Todos los estilos asignados vía javascript en tiempo real se mostrarán en la propiedad estilo elemento seleccionado en la ventana de la pestaña “Elementos”.
Vea de forma interactiva el impacto de las reglas CSS en la presentación de etiquetas HTML
Google Chrome proporciona una consola interactiva para estilos CSS. Esto significa que no sólo puede ver qué estilos se aplican al elemento, sino también mover el cursor del mouse sobre una propiedad CSS específica, habilitarla usando la casilla de verificación emergente a la derecha o deshabilitarla borrando la bandera y ver el resultado resultante en la página.
Cambiamos la estructura de presentación de los elementos html sobre la marcha (directamente en el navegador)
Entonces, ya hemos aprendido cómo explorar la estructura de un documento web en Google Chrome, ahora veremos brevemente cómo editar elementos sobre la marcha. Nos dirigimos a la consola de la forma que más nos convenga. Encontramos el elemento deseado en la pestaña "Elementos", hacemos clic derecho sobre él, abriendo así el menú contextual emergente:
- Agregar atributo– agrega un atributo para el elemento especificado. Tan pronto como el cursor se activa, comenzamos a configurar la propiedad deseada. Por ejemplo: escribe nombre="itemImage", que se agregará inmediatamente a nuestro elemento.
- Editar atributo– si hace clic derecho en el atributo de un elemento, el elemento pasa a estar disponible editaratributo. Haga clic y edite.
Ejemplo de uso: Olvidamos la contraseña guardada con asteriscos en Google Chrome (si la contraseña se guardó en este navegador). Haga clic derecho en el elemento con la contraseña ingresada, haga clic en "Ver código de elemento" , en la consola en la pestaña izquierda Elementos haga clic derecho en el atributo tipo="contraseña", haga clic izquierdo en Editaratributo cambiar el atributo tipo =”contraseña" en tipo =”texto", y ahora, en lugar de asteriscos, se muestra la misma contraseña en forma de texto.
- EditarHTML– haga clic derecho en el elemento en la consola Elementos, seleccionar EditarHTML, cambia el código a tu gusto.
- CopiarcomoHTML– copiamos la porción de HTML que necesitamos para una mayor investigación, por ejemplo, en un bloc de notas, o para otros fines en los que necesitamos aplicar exactamente el mismo diseño. Ahorramos tiempo.
- CopiarXPATH– copia la representación XPATH de la estructura desde la raíz del elemento principal al elemento seleccionado.
- Borrarnodo– si necesita eliminar el elemento actualmente seleccionado y todos sus hijos del contexto de la página web y ver el resultado.
- Palabraenvoltura– representará una vista de página web en el contexto de la consola Elementos más legible.
En los siguientes artículos continuaremos considerando herramientas para webmasters y, en particular, nos familiarizaremos con las pestañas restantes de herramientas para webmasters en Google Chrome y también considere depurar errores de JavaScript usando diferentes navegadores
Navegando por innumerables sitios en Internet, puedes encontrar algunos que realmente nos gustan. Inmediatamente surgen una serie de preguntas. ¿El sitio se creó utilizando código casero o algún tipo de CMS? ¿Qué estilos CSS tiene? ¿Cuáles son sus metaetiquetas? Etcétera.
Existen muchas herramientas que se pueden utilizar para extraer información sobre el código de una página web. Pero siempre tenemos el botón derecho del ratón a mano. Esto es lo que usaremos, usando mi sitio como ejemplo.
¿Cómo ver el código de la página?
Para ver el código fuente de la página de un sitio, debe pasar el mouse sobre cualquier área de la página web (excepto imágenes y enlaces). Después de esto, haga clic en el botón derecho del mouse. Se abrirá ante nosotros una ventana con varias opciones (pueden diferir ligeramente en diferentes navegadores). En el navegador Google Chrome, por ejemplo, estos son los comandos:
- atrás;
- adelante;
- reiniciar;
- guardar como;
- sello;
- traducir al ruso;
- ver código de página;
- ver código.
Necesitamos hacer clic en ver código de página, y el código html de la página del sitio se abrirá frente a nosotros.
Ver el código de la página: ¿a qué prestar atención?
Entonces, el código de la página HTML es una lista numerada de líneas, cada una de las cuales contiene información sobre cómo se crea este sitio. Para aprender rápidamente a comprender esta gran cantidad de signos y símbolos especiales, es necesario distinguir entre las diferentes secciones del código.
Por ejemplo, las líneas de código dentro de la etiqueta head contienen información para motores de búsqueda y webmasters. No se muestran en el sitio. Aquí puede ver para qué palabras clave se promociona esta página, cómo está escrito su título y descripción. También aquí puede encontrar un enlace, tras el cual conoceremos la familia de fuentes de Google utilizadas en el sitio.
Si el sitio está creado en CMS WordPress o Joomla, esto también será visible aquí. Por ejemplo, esta área muestra información sobre un tema de WordPress o una plantilla de sitio Joomla. Puedes verlo leyendo el contenido de los enlaces resaltados en azul. Un enlace muestra una plantilla de sitio web.
Por ejemplo:
//fonts.googleapis.com/css?family=Source+Sans+Pro%3A400%2C400italic%2C600&ver=4.5.3
Veremos los estilos de fuente CSS de la página. En este caso, se utiliza la fuente. Esto se puede ver aquí: font-family: 'Source Sans Pro'.
Este sitio está optimizado con el complemento Yoast SEO. Esto se puede ver en esta sección de código comentada:
Este sitio está optimizado con el complemento Yoast SEO v3.4.2 - https://yoast.com/wordpress/plugins/seo/
El navegador muestra toda la información contenida dentro de la etiqueta del cuerpo en la pantalla del monitor. Aquí vemos el código html de la página y en la parte inferior está el código del script de Yandex Metrics. Está rodeado por una etiqueta comentada con el texto:
/Contador Yandex.Metrika
resumámoslo
Habiendo realizado un análisis bastante superficial del código de la página principal del sitio, podemos sacar una conclusión sobre con qué herramientas se creó esta página. Vimos en él:
- CMSWordPress;
- Fuente de Google Source Sans Pro;
- Tema de WordPress – Sídney;
- Complementos de Yoast;
- Contador de métricas de Yandex.
Ahora el principio de analizar el código HTML de una página web es bastante claro. No es en absoluto necesario mantener abierta la página que estás investigando en el navegador. Puede guardar el código de la página en su computadora usando las combinaciones de teclas ctrl+a, ctrl+c, ctrl+v. Pégalo en cualquier editor de texto (preferiblemente Notepad++) y guárdalo con la extensión html. De esta manera, podrás profundizar en él en cualquier momento y encontrar más información útil para ti.
Hemos publicado un nuevo libro, Marketing de contenidos en redes sociales: cómo entrar en la cabeza de sus seguidores y hacer que se enamoren de su marca.
El código fuente de un sitio es una colección de marcas HTML, estilos CSS y scripts JavaScript que el navegador recibe del servidor web.
Más vídeos en nuestro canal - aprende marketing en internet con SEMANTICA
Se puede comparar con un conjunto de órdenes dadas a los soldados por un comandante. Imagine que el público no ve ni oye al jefe. Desde su punto de vista, los militares actúan de forma independiente. En nuestro caso, el comandante es el navegador, los comandos son el código fuente y los soldados en marcha son el resultado final.
El sitio se almacena en un servidor web, que envía la página a petición del usuario. Una solicitud consiste en escribir una URL en la barra de direcciones, hacer clic en un enlace o hacer clic en el botón de enviar de un formulario. No importa en qué idioma estén escritas las páginas web o si incluyen algún componente de software. El resultado final de cualquier algoritmo del lado del servidor es un conjunto de etiquetas y texto html.
El código fuente de la página es un conjunto de datos que incluye:
- marcado html;
- hoja de estilo o enlace de archivo;
- programas escritos en JavaScript o enlaces a archivos con código.
Estas tres secciones son procesadas por el navegador. Para el servidor, este es simplemente el texto que debe enviarse en respuesta a la solicitud.
Por qué podríamos necesitar estudiar el código fuente
Todo lo que vemos lo podemos analizar y aplicar para solucionar ciertos problemas que surgen al trabajar con el sitio, especialmente a la hora de optimizarlo. Mirando el código fuente, podemos:
- Vea las metaetiquetas de su sitio o del de otra persona para analizarlas.
- Ver la presencia o ausencia de ciertos elementos en el sitio: contadores, códigos de identificación en varios sistemas, ciertos scripts y otras cosas.
- Descubra los parámetros de los elementos: tamaños, colores, fuentes.
- Encuentra la ruta a las fotos y otros elementos ubicados en la página.
- Explora los enlaces de la página.
- Encuentre problemas con el código que interfieren con el proceso de optimización del sitio web: estilos no colocados en archivos separados, scripts, código no válido.
Estas son las características básicas, pero de hecho, al poder leer el código, puedes aprender mucho más sobre la página.
Cómo ver el código fuente de un sitio
No será posible hacer esto completamente en la forma en que se publica en el servidor desde el navegador. Pero puede ver todo el marcado haciendo clic derecho en la página. Aquí y abajo usando Google Chrome como ejemplo.
Seleccione la opción "Ver código de página" y obtenga el listado completo en una pestaña separada.
Es solo texto que tienes que analizar para comprenderlo. Pero puedes obtener código interactivo utilizando las herramientas de desarrollador.
Cómo encontrar el código fuente de una página web
Haga clic en el icono de menú en el navegador. La mayoría de las veces está a la derecha y parece tres puntos o rayas.
En la sección de herramientas adicionales, seleccione "Herramientas de desarrollador".
Se abrirá una ventana que muestra el estado activo del código. Esto significa que cuando hace clic en el marcado, el estilo del elemento aparecerá junto a él y los bloques seleccionados se resaltarán en la página.
En la pestaña "Fuente" puede ver el contenido de algunos archivos: scripts, fuentes, imágenes.
En la pestaña "Seguridad", puede consultar el certificado del sitio.
La pestaña "Auditorías" le ayudará a comprobar el recurso publicado en el hosting.
Si la ubicación del panel de la derecha no le resulta conveniente, puede hacer clic en los tres puntos y cambiarlo seleccionando el elemento deseado.
Cómo ver metaetiquetas
Cada documento HTML incluye etiquetas de estructura. Éstos son algunos de ellos:
- HTML: el documento completo.
- Head – sección de encabezados de servicios.
- Título: título de la página (que se muestra en la pestaña).
- Cuerpo: el cuerpo del documento.
- H1-H6: encabezados de texto de página.
- Artículo – artículo.
- Sección - sección.
- Menú – menú.
- Div – bloque.
- Lapso – cadena.
- P – párrafo.
- Mesa – mesa.
Los elementos están diseñados para delimitar lógicamente secciones en una página, si es necesario, se diseñan utilizando estilos. Contienen texto que de alguna manera es visible en la página. Pero la etiqueta Head contiene información de servicio. Para indicarlo se utilizan metaetiquetas. Todo lo que está escrito en ellos está destinado al servidor y a los motores de búsqueda.
Su contenido no se puede conocer de otra manera.
Prestemos atención a la etiqueta Enlace. Con su ayuda, se especifican enlaces a archivos externos incluidos. Si lo desea, puede ver el contenido y guardarlo en el disco. Para hacer esto, mueva el puntero a la dirección y presione RMB. Seleccione "Abrir en una pestaña nueva".
El archivo especificado se abrirá en una nueva pestaña, que podrá ver o guardar.
Cómo ver el código fuente de una página para depurar un script
En este caso, lo más conveniente es abrir la página en la máquina local. Si solo necesita corregir marcas, estilos y secuencias de comandos, puede hacerlo directamente desde la carpeta. El código HTML se ve de la misma manera. Pero los errores del código JavaScript se pueden ver en la pestaña "Consola". Esto muestra la descripción del error y el número de línea donde ocurrió.
La sintaxis se puede ver directamente en el código. Para eso está la pestaña "Fuente".
Cómo ver el código de un elemento específico
Para páginas grandes con muchos elementos, es difícil encontrar el código necesario en todo el marcado. En este caso, debería utilizar un comando especial del menú contextual. Mueva el mouse sobre el fragmento y presione RMB. Seleccione el comando "Ver código".
Se abrirá la misma ventana, pero con el foco en el objeto seleccionado.
Resumen
Te contamos cuál es el código fuente de la página. Basta con dominar los conocimientos básicos de HTML y CSS y, utilizando prácticas herramientas de desarrollo, podrá depurar sus propios documentos HTML.
Revisar el código de los recursos en Internet le permitirá aprender no solo de su propia experiencia, sino también utilizar ejemplos reales. Y para los especialistas en SEO, las metaetiquetas serán útiles, cuya información puede decir mucho sobre el sitio.
La probabilidad de mirar la inicial. código web paginas, recibido por el navegador como resultado de una solicitud al servidor, está disponible prácticamente en todos los navegadores de Internet. El acceso al comando correspondiente se organiza aproximadamente de manera idéntica, pero existen diferencias significativas en el método y la forma en que se realiza el comando inicial. código .
Instrucciones
1. En el navegador Mozilla Firefox, expanda la sección "Ver" en el menú y haga clic en "Inicial". código paginas" El mismo elemento también está en el menú contextual que aparece si hace clic derecho en el texto. paginas. También puede utilizar la combinación de teclas CTRL + U. Mozilla FireFox no utiliza programas externos - inicial código paginas con resaltado de sintaxis se abrirá en una ventana separada del navegador.
2. En Internet Explorer, haga clic en el menú Archivo y seleccione Editar en el Bloc de notas. En lugar del nombre Bloc de notas, se puede escribir otro programa que haya asignado en la configuración del navegador para ver el inicial código A. Al hacer clic paginas con el botón derecho del mouse aparece un menú contextual, que también tiene un elemento que permite abrir la página inicial código paginas en un programa externo – “Ver HTML- código A".
3. En el navegador Opera, abra el menú, vaya a la sección "Página" y tendrá la oportunidad de seleccionar el elemento "Inicio" en la subsección "Herramientas de desarrollo". código"o el elemento "Inicial código marco." Las teclas de acceso rápido CTRL + U y CTRL + SHIFT + U están asignadas a esta selección, respectivamente. En un menú contextual vinculado a un clic paginas Haga clic derecho, también hay un elemento "Inicial código" Opera abre el código fuente paginas en un programa externo que está asignado en el sistema operativo o en la configuración del navegador para editar archivos HTML.
4. El navegador Google Chrome sin duda tiene la mejor organización para visualizar la inicial código A. Al hacer clic derecho en la página, puede elegir ver código A paginas"y luego el código fuente con resaltado de sintaxis se abrirá en una pestaña separada. O tal vez prefieras la línea "Ver" en el mismo menú. código elemento” y el navegador en la misma pestaña abrirá dos marcos adicionales en los que puede inspeccionar HTML y CSS código cada elemento paginas. El navegador responderá cuando el cursor se mueva entre líneas. código y, resaltando elementos en la página que corresponden a esta sección de HTML código A.
5. En el navegador Apple Safari, expanda la sección Ver y seleccione Ver HTML código A". En el menú que aparece al hacer clic derecho en abrir paginas, el elemento correspondiente se llama "Ver código fuente". A esta acción se le asignan las teclas de acceso rápido CTRL + ALT + U. Inicial código se abre en una ventana separada del navegador.
Si abre cualquier página web, contendrá elementos típicos que no cambian según el tipo y enfoque del sitio. El ejemplo 4.1 muestra el código de un documento simple que contiene etiquetas básicas.
Ejemplo 4.1. Código fuente de la página web
Título
Primer párrafo.
Segundo parrafo.
Copie el contenido de este ejemplo y guárdelo en la carpeta c:\www\ como ejemplo41.html. Después de eso, inicie el navegador y abra el archivo a través del elemento del menú. Archivo > Abrir archivo (Ctrl+O). En el cuadro de diálogo de selección de documentos, seleccione el archivo ejemplo41.html. La página web que se muestra en la Fig. 1 se abrirá en el navegador. 4.1.
Arroz. 4.1. Resultado de ejecutar el ejemplo
Elementotiene como objetivo indicar el tipo del documento actual - DTD (definición del tipo de documento, descripción del tipo de documento). Esto es necesario para que el navegador entienda cómo interpretar la página web actual, porque HTML existe en varias versiones, además, existe XHTML (Lenguaje de marcado de hipertexto EXtensible), que es similar a HTML, pero difiere en sintaxis. Para que el navegador "no se confunda" y comprenda según qué estándar mostrar la página web, es necesario configurar en la primera línea de código .
Hay varios tipos, difieren según la versión de HTML a la que se dirigen. En mesa 4.1. Se dan los principales tipos de documentos con sus descripciones.
| TIPO DE DOCUMENTO | Descripción |
|---|---|
| HTML 4.01 | |
| Sintaxis HTML estricta. | |
| Sintaxis HTML de transición. | |
| Un documento HTML utiliza marcos. | |
| HTML5 | |
| Esta versión de HTML tiene un solo tipo de documento. | |
| XML 1.0 | |
| Sintaxis XHTML estricta. | |
| Sintaxis XHTML transicional. | |
| El documento está escrito en XHTML y contiene marcos. | |
| HTML 1.1 | |
| Los desarrolladores de XHTML 1.1 esperan que reemplace gradualmente a HTML. Como puedes ver, esta definición no tiene división en tipos, ya que la sintaxis es la misma y obedece a reglas claras. | |
La diferencia entre una descripción de documento estricta y una de transición es un enfoque diferente para escribir código de documento. El HTML estricto requiere un estricto cumplimiento de la especificación HTML y no perdona los errores. El HTML de transición es más relajado con respecto a algunas fallas del código, por lo que es preferible usar este tipo en ciertos casos.
Por ejemplo, en HTML estricto y XHTML se requiere la presencia de la etiqueta
Etiqueta