Cómo abrir un código de elemento en Microsoft Edge. Cómo ver el código fuente de la página y el código del elemento

Habilidad cambiar el código fuente de la página– una habilidad útil para un usuario avanzado de Internet. Al sustituir el código HTML, puede cambiar la página web abierta como desee. En este artículo te contamos cómo cambiar el código de la página en Google Chrome. Sin embargo, en otros navegadores todo se hace de forma similar, por lo que no debería haber ninguna dificultad.

¿Cuál es el código HTML de la página?

Cada página que abre en su navegador tiene su propio código en el lenguaje de marcado HTML. Este código representa etiquetas y texto. Las etiquetas son etiquetas únicas que le indican al navegador cómo mostrar tal o cual parte del sitio. El texto es el contenido de la página, lo que ve el usuario. Además, se pueden conectar estilos CSS a la página, que definen la apariencia de los elementos de la página. A cambiar el código fuente del sitio No es necesario que conozcas a fondo HTML y CSS y pronto lo comprobarás por ti mismo.

¿Por qué cambiar una página web?

Puede reemplazar los datos del sitio, cambiar el texto del mensaje o realizar una captura de pantalla falsa. Tenga en cuenta que todos los cambios son visibles solo para usted y desaparecerán cuando vuelva a cargar la página. Además, los datos modificados no serán reales. Por ejemplo, si no tengo 10 dólares y los cambio a 100, entonces no tendré más dinero. Esto es solo la visualización de la página por parte del navegador. Ejemplo:

Después:

Por ejemplo, tomaré el mismo sitio y cambiaré el anuncio anterior del artículo “Abrir la página principal en Google Chrome”. Hago clic derecho en el elemento que quiero cambiar, por ejemplo, el título del anuncio y selecciono “Ver código”.

En la ventana que se abre, vaya a la pestaña Elementos y vea el código HTML de la página. En él debemos encontrar el texto que nos interesa. (subrayado en rojo)

Ahora borraré el texto antiguo y escribiré uno nuevo.

Eso es todo, se ha cambiado el título del anuncio. Ahora cambiaré el anuncio en sí, las etiquetas y la categoría.

Puede insertar otra imagen cambiando el atributo src en la etiqueta img.

" El mismo elemento también se encuentra en el menú contextual, que, si hace clic derecho en el texto paginas. También puedes utilizar el método abreviado de teclado CTRL + U. Mozilla FireFox no utiliza programas externos - original código paginas con resaltado de sintaxis se abrirá en una ventana separada del navegador.

En Internet Explorer, haga clic en el menú Archivo y seleccione Editar en el Bloc de notas. En lugar del nombre Bloc de notas, es posible que se escriba otro nombre, lo ha asignado en la configuración del navegador para ver el original 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 le permite abrir la fuente código paginas en un programa externo - “Ver HTML- código A".

En el navegador Opera, abra el menú, vaya a la sección "Página" y tendrá la oportunidad de seleccionar "Fuente" en la subsección "Herramientas de desarrollo". código"o el artículo "Original código marco." A estas selecciones se les asignan las teclas de acceso rápido CTRL + U y CTRL + SHIFT + U, respectivamente. En un menú contextual vinculado a un clic paginas Haga clic derecho, también hay un elemento "Inicial código" fuente de ópera paginas en un programa externo que está asignado en el sistema operativo o en la configuración del navegador para editar archivos HTML.

El navegador Google Chrome sin duda tiene la mejor organización para visualizar el original código A. Al hacer clic con el botón derecho del mouse, puede seleccionar Ver código A paginas"y luego el código fuente con resaltado de sintaxis se abrirá en una pestaña separada. O puedes seleccionar la línea “Ver” en el mismo menú código elemento” y en la misma pestaña se abrirán dos marcos adicionales en los que puede inspeccionar HTML y CSS código 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.

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á frente a 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 Fuente 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.

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 resaltar 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.

Los desarrolladores de navegadores se han ocupado de la comodidad de quienes crean sitios que se abren en estos mismos navegadores, es decir, los webmasters. Han agregado herramientas de desarrollador a las funciones estándar, con las que puede abrir y ver el código fuente de la página del sitio en el navegador: HTML, CSS, JavaScript (JS), obtenga diversos datos útiles sobre la estructura del sitio, realice su análisis técnico. En general, veo muchas cosas útiles.

Por supuesto, estas herramientas son utilizadas no sólo por los creadores de sitios web para trabajar, sino también por los usuarios comunes, a quienes el código fuente les permite ver diversos datos útiles.

En este artículo aprenderá cómo ver el código fuente de una página de un sitio web en un navegador (cómo abrir el código HTML, CSS y JavaScript de un sitio web).

Cómo abrir el código fuente de una página en un navegador

Hay dos formas de abrir el código fuente de una página web en un navegador:

1. Usando teclas de acceso rápido;
2. Abrir desde el menú contextual.

Ctrl+U– una combinación de teclas de acceso rápido para ver el código fuente de toda la página del sitio en una nueva ventana separada. Estándar para todos los navegadores: Google Chrome, Opera, Mozilla Firefox, navegador Yandex, IE.

También puede ingresar a las herramientas de desarrollador de la siguiente manera:

Para encontrar rápidamente el código, palabra o texto deseado en una página, puede utilizar la combinación de teclas de acceso rápido de búsqueda estándar para todos los navegadores: Ctrl + G.

Instrucciones en vídeo:

Ver código de elemento | explorar elemento | inspeccionar elemento

Si de repente necesita ver no todo el código fuente, sino mostrar solo una parte separada, algún área de la página, entonces la herramienta anterior no funcionará. Para ello, las herramientas de desarrollo tienen otra función, que se comentará a continuación.

Cómo ver el código de un elemento en una página:

También puede utilizar atajos de teclado para acceder rápidamente a la inspección de elementos.

Teclas de acceso rápido (botones):

Google Chrome: Ctrl+Mayús+I y Ctrl+Mayús+C

Ópera: Ctrl+Mayús+I y Ctrl+Mayús+C

Mozilla Firefox: Ctrl+Mayús+I y Ctrl+Mayús+C

Navegador Yandex: Ctrl+Shift+I y Ctrl+Shift+C

Después de estos pasos, el código fuente de la página web se abrirá en la misma ventana del navegador:

Todo el código HTML estará en la columna grande de la izquierda. Y los estilos CSS están a la derecha.

La ventaja de este método, por supuesto, es que el usuario tiene la oportunidad de cambiar el código fuente y editar estilos. Es decir, puede editar los estilos en el sitio y ver cómo se verá con ciertos estilos, sin tener que realizar cambios inmediatamente en los archivos ubicados en los servidores de alojamiento. Para cambiar o agregar código de programa, debe hacer doble clic en el fragmento o área deseada. Por supuesto, la corrección del código en el navegador no se realizará en los servidores de alojamiento. Por tanto, en el futuro, en cualquier caso, tendrás que copiar este código y escribirlo en archivos.

Esta instrucción en video describe en detalle y muestra cómo trabajar con las herramientas de desarrollador:

Así de simple, en línea, directamente en su navegador, puede ver el código fuente de la página del sitio, obtener datos básicos sobre el código HTML y CSS, cambiarlos y copiarlos, sin tener que descargar los archivos de este sitio a su computadora. .

Por cierto, los internautas inexpertos que hayan cambiado el código de la página y esperen que se guarde se sentirán decepcionados. Después de todo, después de actualizar la página, todos los cambios desaparecerán. Esto no es suficiente para hackear el sitio :)

Cómo ver el código fuente en un teléfono Android

También me gustaría señalar que las herramientas de desarrollo están disponibles no solo en la versión de escritorio de los navegadores, es decir, en computadoras y portátiles. En teléfonos y tabletas (Android, iOS) también puedes ver el código fuente.

Para hacer esto, agregue el prefijo de fuente de visualización a la URL de la página que se está inspeccionando:

Por ejemplo:

ver fuente: https://site/turbo-rezhim-opera/