Web devTools de Chrome y Opera

Problemas comunes de los navegadores Google Chrome y Opera web development tools.

mi tutorial de herramientas de desarrollo en el navegador chrome with herramientas web and Seguridad de web|lower


WEB DEVTOOLS DE CHROME

1. Para entrar en la configuración de comandos escriba ctrl+shift+p

2. Para desactivar javascript ejecutar ctrl+shift+P -> Disable JavaScript

3. Para recargar el navegador Chrome u Operactrl+F5 o mejor Right Mouse Button click en el icono de recarga y elegir empty cache and hard reload.

4. Con las herramientas para desarrolladores es posible emular un dispositivo móvil (devtools spoof useragent), geolocalización more tools->sensors (pero trate de combinar con la correspondiente VPN) y la velocidad de conexión a la red performance.

5. Para obtener el elemento resaltado en la consola JS escriba var $0

6. Panel de cobertura ctrl+shift+P -> Show coverage muestra el uso de css y js.

CONSOLA

7. Para habilitar la captura de XMLHttpRequest se debe marcar checkbox en Console->Console Settings

SOURCES

8. En el panel Source es posible cambiar css y js temporalmente hasta la recarga de la página. Puedes guardar los cambios con devtools si ejecutas el servidor local y si configuras el espacio de trabajo en Source->File system

9. En Sources->Event listeners breakpoint es posible establecer breakpoint en Canvas o Geolocalización etc. to catch cuando alguna pagina web acts suspicious.

10. Es posible capturar todas las peticiones Ajax Sources->XHR/fetch breakpoints write "htt" En la red verás la información de la carga útil que la página web obtiene de tu navegador. Y usted puede incluso escapar de esta solicitud por stepover.

10.1 O puedes escribir ctrl-shift-p->Network request blocking para bloquear.

10.2 Creo que la mejor idea es redactar la petición XHR sobre la marcha y enviarla a estos curiosos.

11. Para falsificar el useragent use Network panel->Network conditions herramienta muy poderosa

12. Para ver si la página web carga demasiado su CPU, active la casilla Ctrl+SHift+P-> Show Rendering->Frame Rendering stats.

12.1 Para analizar la carga utilice Performance -> Frames. Debe ser verde, rojo o amarillo significa sobrecarga

12.2 El panel del Monitor de Rendimiento le permite monitorear el uso de la CPU

12.3 Para disminuir la cantidad de memoria pulse el botón Garbage Collect en el panel de memoria. Si el nivel de memoria después de la recolección de basura es más alto que después de presionar el botón anterior de recolección de basura, significa que hay un problema de sobrecarga de memoria

13. Application->cookies permite borrar o edit la cookie seleccionada.

14. Usar application->Service workers para borrarlas. Los trabajadores de servicio podrían causar una sobrecarga de la CPU. Por ejemplo, mientras veo utube mi CPU funciona al 50% debido a un estúpido script de trabajador de servicio.

15. Para capturar toda la actividad de fondo en su navegador utilice application->Background Fetch->record

16. Para analizar el rendimiento y el SEO del uso del sitio web panel Lighthouse

17. Interesante función le permite ver todos los oyentes en la página web establecer Rendering->Scrolling performance issues casilla de verificación

18. Para entrar en la configuración avanzada de chromium escriba chrome://chrome-urls/

19. Para hacer coincidir el número de proceso de chromium con la página web utilice chrome://discards/graph

20. Puedes comprobar la base de datos de contenido web que Chromium ha guardado en tu máquina /home/<user name>/snap/chromium/common/chromium/Default/IndexedDB

 

Comprueba todos los comandos del menú de comandos