Pestaña sources

La pestaña "Sources" nos muestra las fuentes de contenido que se han utilizado para construir la página. Desde esta pestaña podemos escribir y modificar ficheros que estén vinculados a nuestro disco duro, pero veremos cómo hacer esto en la siguiente lección.

Empecemos por describir los distintos paneles:

  • Sources: aquí encontraremos por cada dominio desde el cual nuestro navegador haya obtenido recursos1 (HTML, CSS o JavaScript) una jerarquía de ficheros. Haciendo clic en cualquiera de ellos se abrirá el código en un panel derecho.
  • Content scripts: aquí se encuentran ficheros JavaScript simples (scripts) implementados desde las extensiones de Google Chrome.
  • Snippets: esta pestaña nos permite almacenar pequeños trozos de código2 reutilizables (snippets) escritos en JavaScript que podremos ejecutar o reutilizar (valga la redundancia) en cualquier página.
  • Depurador: este panel nos ayudará a hacer un seguimiento paso a paso de la ejecución de nuestro código JavaScript para encontrar errores, veremos como usarlo en los capítulos de JavaScript.

Al igual que en la lección anterior, te recomiendo que guardes en un lugar seguro los atajos de teclado del panel Sources y de vez en cuando los revises para aumentar tu productividad.

Panel de contenido

El panel de contenido nos ofrece un editor de código que dispone adicionalmente de otros atajos de teclado.

Es importante saber que: a diferencia de los cambios del DOM, en la pestaña "Elements" para poder ver los cambios reflejados en la página que estamos viendo es necesario guardar los cambios y refrescar la página.

En cuanto a los atajos me gustaría destacar cinco que usaremos con mucha frecuencia:

Windows/Linux Mac Función
Ctrl + F Cmd + F Buscar (y adicionalmente reemplazar) texto dentro de un fichero
Ctrl + S Cmd + S Guardar un fichero
Ctrl + R, F5 Cmd + R Refrescar la página
Ctrl + P Cmd + P Buscar ficheros por nombre
Ctrl + P + :num Cmd + P + :num Acceder directamente a un número de línea

Por último, la opción "Prety print" veremos que es especialmente útil cuando estemos depurando bibliotecas JavaScript minificadas (comprimidas), aunque de momento no te preocupes por esto.

Recursos y aclaraciones:
1. Normalmente mediante peticiones HTTP aunque puede que también mediante las extensiones de Chrome.
2. En este repositorio de Github podrás encontrar una colección de snippets.

results matching ""

    No results matching ""