Presentación
Con el auge de la computación en la nube está aumentando día a día la necesidad de comprender cómo visualizar su navegador web con el fin de examinar el HTML, las comunicaciones en red y los CSS. Este artículo está diseñado para proporcionar nociones básicas acerca de cómo abrir la consola de desarrollador de su navegador web en los navegadores web modernos y ofrecerle unas descripciones sencillas de las principales pestañas de la consola web. Comprender estas nociones básicas puede ayudarle a obtener información crucial para acelerar los tiempos de resolución de los tickets de asistencia y darle una sensación de autonomía generalizada.
Acceso a su consola de desarrollador
Lo primero: ¿Cómo se accede a la consola de desarrollador de su navegador web? El diagrama que se muestra a continuación incluye instrucciones relativas a los atajos del teclado que puede utilizar:
| Navegador web | PC | MAC |
| Google Chrome | Control + Alt + J | Opción + Comando + I |
| Firefox | Control + Alt + J | Opción + Comando + K |
| Safari | No aplicable |
Opción + Comando + C
|
| Edge | F12 | No aplicable |
Asimismo, haciendo clic en el botón derecho de una página de su navegador podrá acceder a un menú de atajos. En este menú, verá un Inspeccionar o bien un Inspeccionar elemento. Al seleccionar estas opciones, se abrirá también su consola del navegador web. Una vez abierta la consola de desarrollador de su navegador web, tendrá tres pestañas en las que centrarse: Consola, Elementos y Red. Consulte las secciones correspondientes más abajo para saber más sobre cada una de ellas.
Pestaña Consola
Esta pestaña se considera la base de la herramienta para desarrolladores de su navegador web. Desde aquí puede ver datos que pueden servirle de ayuda para solucionar problemas con API, iFrames, errores de HTTPS, variables de SCORM CMI y parámetros XAPI/TinCan.
Nota: Los errores se marcarán en texto rojo. Si cree que tiene un problema con un aspecto concreto de la plataforma, revisar esta área, obtener el código de error e indicar dicho error en el ticket de asistencia es un comienzo excelente para obtener ayuda de la asistencia técnica de Docebo.
Pestaña Elementos
Esta pestaña muestra el Modelo de objetos del documento (DOM) en su estado actual. Si está utilizando Microsoft Edge, es posible que tenga que actualizar la página para visualizar el DOM. Esta pestaña le permite editar y copiar elementos temporalmente, modificar de forma provisional el HTML o añadir atributos, entre otras cosas. Si está intentando modificar las "hojas de estilo en cascada" (CSS) en la plataforma, la pestaña Elementos le ayudará a contar con una imagen clara de sus ediciones de DOM antes de aplicar CSS personalizados a su plataforma.
A tener en cuenta: Esta pestaña se identifica como la pestaña HTML en Firefox.
Pestaña Red
La pestaña Red está diseñada para mostrar los recursos y archivos inicializados con el fin de cargar la página que esté intentando visualizar. En general, las herramientas para desarrolladores tienen que estar ya abiertas para que la pestaña Red proporcione información. Si la pestaña no estaba abierta, puede simplemente actualizar la página después de acceder a la pestaña Red.
Ahora que se ha familiarizado con la consola de su navegador web, tiene una herramienta más para personalizar, mejorar y resolver problemas en su plataforma.