¿’Inspeccionar elemento’ muestra el código de todo el sitio web?

Supongo que está utilizando las diversas herramientas de desarrollador en Chrome o Safari cuando lo abre a través del elemento de inspección. Lo que puede ver allí es solo el código de front-end para esa página, que incluirá html, algunos javascript y css. A menudo, el CSS y Javascript se minimizan, por lo que son solo 1 archivo. En ese caso, generalmente se aplicarán a las otras páginas también. Gran parte del código probablemente usa marcos como Bootstrap en CSS, por lo que no todos están codificados desde cero.

Lo que no ve, y lo que puede ser algo desafiante a veces, son cosas de back-end como PHP que a menudo generan el HTML dinámicamente, el código CGI que se conecta a los procesos del lado del servidor y los manejadores de bases de datos. De nuevo, probablemente la mayor parte de esto utiliza marcos y API, pero también hay una buena cantidad de personalización incluso para crear algo tan simple como una plantilla de WordPress personalizada. Lo que los hace desafiantes es que no puede encontrar los archivos y el código que genera el código front-end simplemente usando el inspector web o viendo la fuente. En general, debe abrir los archivos en el servidor y rastrear sus importaciones hasta que encuentre lo que está buscando. Y no puede hacer esto si no tiene acceso autorizado a los archivos.

Cien mil líneas de código en muchos archivos pueden parecer desalentadores, pero al igual que la familiaridad con cualquier cosa, después de un tiempo te vuelves muy rápido en skimmimg. También encuentro que las herramientas de la vieja escuela son muy útiles, como las búsquedas de archivos múltiples con grep.

La herramienta de inspección de elementos muestra el HTML después de que se haya enviado a su computadora. Eso significa que no verá el HTML original (si JavaScript está agregando cosas a la página) y si hay PHP, tampoco verá ese código. Solo puede ver el HTML del lado del cliente que está en su navegador. Eso también significa que el código en el elemento de inspección solo está en esa página. Es por eso que PHP es tan útil; Permite que el código se reutilice entre las páginas de un sitio web.

El elemento de inspección muestra todo el código de la página actual . Pero hay aún más líneas de código: mira en la etiqueta de la cabeza … ¿Estos enlaces y etiquetas de estilo que contienen un enlace? Archivos extra completos …

Pero no temas: la mayoría de los sitios web usan algo llamado preprocesador. Este es un script en el servidor que contiene un sitio web que genera el código que está viendo. (PHP)
Esto permite la reutilización de código y la generación automática de código.

Editar: dependiendo del sitio web y su tamaño: sí, un gran equipo trabaja en él.

Muestra todo el código de front-end (como HTML, CSS, JS), no muestra el código de back-end (como php)

muestra html a medida que la página se obtiene del servidor. principalmente se genera código dinámico, más bien estático como está en el archivo de servidores