-
Notifications
You must be signed in to change notification settings - Fork 1
11. Debug
Debugging es el proceso de encontrar y resolver defectos o problemas dentro de un programa (software) que impide el funcionamiento correcto del programa o sistema.
Muestra el HTML, con command + F, puedo buscar aquí. Con dobleClick puedes modificar el código.
Con los punticos de la izquierda, podemos arrastrar la posición de los elementos. En los 3 puntos de la derecha, podemos ver los shortcuts
3 puntos superiores -> more tools -> animations (deben estar las animaciones ya inicializadas al menos.
podemos ver y modificar los estilos, adicionalmente al desplegar :hover, si señalamos algun estado, nos marcará en elements con una bolita naranja, todos los elementos que tienen ese estado.
Debajo de cada clase, o tag, le damos click a los 3 puntitos y podremos ver una lista de atajos rápidos, como cambiar el color del texto, fondo, o hasta helpers para sombras de textos o box-shadow.
En colores, si le damos click a un color, abrirá un color-picker de chrome, adicionalmente en la sección inferior, podemos ver los colores recomendados en la paleta material. u otros colores que usemos en el sitio.
3 puntos superiores -> more tools -> Coverage. (red code not used / green code used)
Performance -> settings icon -> podemos cambiar velocidad internet o probar offline, o de la CPU
Performance -> Grabamos, un par de segundos, y podremos ver un diagrama de dona sobre cuanto tiempo tarda cada cosa. o en BottomUp la organización de qué es lo que mas tarda a lo que menos tarda.
Audits, podemos Seleccionar las opciones que queremos medir en nuestro sitio web, y correr un reporte por google chrome
Podemos ver los archivos que descarga para ver la página, y los estados de cada petición status - status-cats.
Si le damos click derecho a los headers de la lista de assets, podemos añadir más detalles o quitar los que no necesitamos Settings -> Use Large request Rows, Capture screenshots,
también podemos cambiar la velocidad de conexión.
Abrimos el buscador con command + shift + p Escribimos block (show request blocking) -> le damos en +, podemos escribir un archivo ejemplo main.css, y bloqueará la carga de este.
Si en Elements seleccionamos un elemento, vamos a console y escribimos $0, nos traerá ese elemento. o $1 el elemento anterior, hasta $4.
-
document.querySelector('button')Puede ser remplazado con$('button') -
document.querySelectorAll('button')Puede ser remplazado con$$('button')(aun que el $$ retorna un arreglo, y el querySelectorAll un nodelist - DevTools trae la función
copy(any)para copiar algo - También la función
inspect(button)la cual recibe como prop un elemento del dom, cambiará el tab a elements y lo seleccionará -
monitor(fetchUser)para monitorear cuando es llamada una función // function fetchUser called
Si damos click derecho, copy, js-path, nos mostrará la forma de accederlo en javascript
Toggle Device Toolbar, Es mejor testear el responsive aquí ya que trae unas medidas estandares, además podemos ver en móviles en especifico. edit -> Podemos cargar medidas personalizadas, o celulares extra.
- 3 puntos -> add device type
- 3 puntos -> Show device frame, para ver una imagen del dispositivo (No todos los celulares tienen foto)
- 3 puntos -> Show MediaQueries
También en la opción online, podemos personaliza la velocidad del internet
3 puntos -> More tools -> Sensors -> Modify Geolocation, orientation
Sources -> Event Listener Breakpoints (a la derecha) -> Mouse -> click, le añadirá un breakpoint al siguiente click que sea ejecutado en la aplicación
Step into next function call (F11) Paso a paso cómo se ejecutaría el código linea por linea.
Podemos modificarlo y guardar con command + s
Sources -> (subseccion) Filesystem -> add Folder, seleccionamos la carpeta y le damos permisos. A hoy soporta sass