Herramientas para desarrolladores

La funcionalidad de DeveloperHub se puede modificar, consultar y probar mediante parámetros de consulta de URL, funciones de JavaScript, eventos despachados y objetos globales.

• Añadir parámetros de consulta a la URL.

• Uso de funciones de JavaScript.

• Uso de scripts que escuchan los eventos de JavaScript que se activan.

• Uso de scripts que modifican la configuración.

• Lectura de objetos de JavaScript.

Parámetros de consulta de URL

Modo incrustado

Sintaxis: ?mode=<mode>

Descripción: Elimina la navegación superior, el índice, la tabla de contenidos, el pie de página y otros elementos para el modo de vista previa.

Véase: Modo incrustado

Desactivar scripts

Sintaxis: ?disableScripts=true

Descripción: Desactiva los scripts temporalmente.

Véase: Desactivación de etiquetas HEAD

Desactivar estilos

Sintaxis: ?disableStyles=true

Descripción: Desactiva los estilos temporalmente.

Véase: Desactivación de estilos

Personalización (texto sin cifrar)

Sintaxis: ?vars=<vars>

Descripción: Personaliza la documentación sobrescribiendo variables con texto sin cifrar en formato JSON.

Véase: Personalización mediante URL

Personalización (Base64)

Sintaxis: ?hvars=<vars>

Descripción: Personaliza la documentación sobrescribiendo variables con texto en Base64.

Véase: Personalización mediante URL

Autenticación JWT

Sintaxis: ?jwt=<token>

Descripción: Da acceso a la documentación de forma segura.

Véase: Inicio de sesión personalizado

Establecer el ID de despliegue de la aplicación frontend

Sintaxis: ?deployment_id=<id>

Descripción: Establece la versión de despliegue de la aplicación frontend. Use latest para la última versión.

Véase: Pruebas de CSS

Funciones de JavaScript

Navegar a una URL (obsoleto)

Función: openLink(event, link)

Devuelve: Nada.

Argumentos:

• event: El MouseEvent o KeyboardEvent.

• link: Ruta absoluta (sin host ni ruta base), como /support-center/developer-tools.

Véase: Enlaces a contenido

Obsoleto: Use en su lugar Navegar a una ruta.

Navegar a una ruta

Función: navigate(link, options ?: {addBasePath: boolean})

Devuelve: Nada.

Argumentos:

• link: Ruta absoluta (sin host ni ruta base), como /support-center/developer-tools.

• options: (opcional)

  • addBasePath: Antepone automáticamente la ruta base al enlace.

Descripción: Navega a una ruta internamente dentro de la aplicación de una sola página, sin recargar la página.

Véase: Enlaces a contenido

Ir al inicio

Función: goHome()

Devuelve: Nada.

Argumentos: Ninguno.

Descripción: Va a la página de inicio, o a la página predeterminada si no hay ninguna página de inicio configurada. Equivale a openLink('/') cuando el proyecto no tiene ruta base.

Hacer que todos los enlaces de la página de inicio se enruten en la SPA

Función: window.applyClickHandlersOnLinks()

Devuelve: Nada.

Argumentos: Ninguno.

Descripción: Captura todas las rutas absolutas de una página de inicio ya renderizada y las enruta internamente en la aplicación de una sola página en lugar de navegar en una pestaña del navegador. Úsela después de que todos los elementos de anclaje se hayan renderizado en la página de inicio.

Véase: Página de inicio personalizada

Cambiar el tamaño del iFrame de HTML personalizado

Función: window.postMessage('resize', '*');

Devuelve: Nada.

Argumentos: Deben proporcionarse tal cual.

Descripción: Informa al elemento padre de que debe cambiar de tamaño porque se han añadido elementos dinámicamente al iFrame.

Véase: Cambio de tamaño de iFrames dinámicos

Aplicar configuración avanzada

Función: window.settings.apply(settings)

Devuelve: Nada.

Argumentos:

• settings: Un objeto que contiene ajustes específicos.

Descripción: Modifica la interfaz o la funcionalidad, incluidas la búsqueda, el tema del código, el SEO y otros.

Véase: Aplicación de ajustes

Modificar el texto de la interfaz

Función: window.translations.apply(translation)

Devuelve: Nada.

Argumentos:

• translation: Un objeto que contiene ciertos textos de la interfaz que se pueden cambiar.

Descripción: Modifica el texto de la interfaz, ya sea para traducirlo o con otro fin.

Véase: Traducción de la interfaz

Registrar interceptores personalizados

Función: window.registerCustomInterceptor(interceptor)

Devuelve: Nada.

Argumentos:

• interceptor: Una función con dos argumentos, data y next. Consulte Interceptores personalizados.

Descripción: Registra un interceptor personalizado que puede modificar las solicitudes del área de pruebas de la API antes de enviarlas.

Obtener el proyecto activo

Función: window.getActiveProject()

Devuelve: Project Object {id: number, title: string, slug: string, basepath: string}

Obtener la versión activa

Función: window.getActiveVersion()

Devuelve: Version Object {id: number, name: string, slug: string, isLatest: boolean, docs: {id: number, title: string, slug: string}[], refs: {id: number, title: string, slug: string}[]} o null

Obtener la sección activa

Función: window.getActiveSection()

Devuelve: Section Object {id: number, title: string, slug: string, type: string, index: any} o null

Obtener la página activa

Función: window.getActivePage()

Devuelve: Page Object {id: number, title: string, slug: string} o null

Ampliar imagen

Función: window.zoomImage(src)

Devuelve: Nada.

Argumentos:

• src: La URL de la imagen que se va a cargar.

Descripción: Carga la imagen en una superposición sobre la documentación, igual que cuando se hace clic en las imágenes nativas del producto.

Ampliar imagen desde un iFrame

Función: window.postMessage({zoomImage: src}, '*')

Devuelve: Nada.

Argumentos:

• src: La URL de la imagen que se va a cargar.

Descripción: Carga la imagen en una superposición sobre la documentación, igual que cuando se hace clic en las imágenes nativas del producto. Úsela cuando la imagen la cree un HTML personalizado que utilice un iFrame (cuando hay un script o un iFrame).

Cambiar el tema

Función: window.setTheme(theme: 'light' | 'dark' | 'auto')

Devuelve: Nada.

Argumentos:

• theme: light, dark o auto para seguir la configuración del sistema del lector.

Descripción: Cambia el tema durante la sesión.

Eventos de JavaScript despachados

Tarjetas de la página de inicio generadas

Evento: oncardschanged

Cuándo: La página de inicio se está cargando.

Emite: Detalles de cada documentación y referencia de API de la versión predeterminada que componen las tarjetas de la página de inicio.

Véase: Añadir JavaScript

Proyecto cargado

Evento: onprojectloaded

Cuándo: El proyecto se ha cargado. Los elementos del DOM ya deberían estar disponibles para manipularlos si es necesario.

Emite: Nada.

Véase: Proyecto cargado

Versión cambiada

Evento: onversionchange

Cuándo: La versión ha cambiado.

Emite: Detalles de la versión a la que se está cambiando.

Sección cambiada

Evento: onsectionchange

Cuándo: La sección (documentación o referencia de API) está cambiando.

Emite: Detalles de la sección a la que se está cambiando.

Véase: Cambios de sección

Página cambiada

Evento: onpagechange

Cuándo: La página está cambiando.

Emite: Detalles de la página a la que se está cambiando.

Véase: Cambios de página

Página cargada

Evento: onpageloaded

Cuándo: La página se ha cargado.

Emite: Detalles de la página que se ha cargado. Tenga en cuenta que es posible que los objetos recuperados de forma asíncrona, como imágenes o vídeos, aún no se hayan cargado.

Contenido de referencia cargado

Evento: onreferencecontentloaded

Cuándo: La referencia se ha cargado y la interfaz está lista. También cuando una etiqueta se expande y muestra contenido nuevo.

Emite: El elemento HTML que se cargó, por si desea personalizar la interfaz de la referencia de API, de la siguiente manera:

Búsqueda realizada

Evento: onsearch

Cuándo: Se ha realizado una búsqueda.

Emite: Detalles de la consulta y del número de resultados, de la siguiente manera:

Comentarios enviados

Evento: onfeedback

Cuándo: Se ha registrado un voto de comentarios (me gusta/no me gusta).

Emite: Detalles de los comentarios, de la siguiente manera:

Objetos de JavaScript

Acceder a las variables

Objeto: window.vars

Descripción: Accede a las variables actuales definidas en la documentación. Disponible después de que se cargue el proyecto.

Véase: Uso de variables del proyecto en scripts