El Protocolo DevTools Chrome permite a herramientas instrumento, inspeccionar, depurar y perfilar cromo, Chrome y otros navegadores basados en centelleo. Muchos proyectos existentes actualmente utilizan el protocolo. El cromo DevTools utiliza este protocolo y el equipo mantiene su API.
Instrumentación se divide en un número de dominios (DOM, depurador, red, etc.). Cada dominio define una serie de comandos que apoya y eventos que genera. Ambos comandos y eventos son serializados objetos JSON de una estructura fija.
protocolo Chrome DevTools en diferentes porciones (DOM, depurador, red, etc.)
Protocolo de API Docs
La última (punta-de-árbol) protocolo (tot) - Se cambia con frecuencia y se puede romper en cualquier momento. Sin embargo, capta todas las capacidades de Protocolo, mientras que la versión estable es un subconjunto. No hay soporte compatibilidad garantizada para las capacidades que introduce.
protocolo v8-inspector (v8) - Está disponible en nodo 6.3+ y permite la depuración y perfilado de aplicaciones Node.js.
estable 1,2 protocolo (1-2) - La liberación estable del protocolo, etiquetada en Chrome 54. Incluye un subconjunto más pequeño de las compatibilidades protocolo completo.
estable 1,3 protocolo (1-3) - La liberación estable del protocolo, etiquetada en Chrome 64. Incluye un subconjunto más pequeño de las compatibilidades protocolo completo.
acuerdo documentación de la API
El último acuerdo (inestable),
protocolo de V8-inspector,
La versión 1.2 del Pacto de Estabilidad,
La versión 1.3 del Pacto de Estabilidad
Nota: La razón del artículo tan dividido, mi opinión es que el protocolo V8-inspector es parte de Chrome devtools protocolo (CDP), y
Debido a que el V8 es el motor del cromo js, por lo que es parte de la CDP
nodejs también utilizar v8, nodejs internas realizadas v8 inspector, el depurador puede aplicar a un cliente interactuar con el Protocolo DevTools Chrome
( Https://www.cnblogs.com/eret9616/p/12181700.html )
recursos
El repo devtools-protocolo de seguimiento de incidencias también se puede utilizar para preocupaciones con el protocolo. También es sede de la copia canónica de los archivos JSON.
Útil: Introducción a sin cabeza Chrome y el readme sin cabeza de cromo .
El cromo-remote-interfaz se recomienda módulo de nodo, y su wiki y seguimiento de incidencias están llenos de recetas útiles.
La impresionante-cromo-Devtools página enlaza a muchas de las herramientas en el ecosistema protocolo, incluidas las bibliotecas API protocolo en JavaScript, mecanografiado, Python, Java y Go.
Considere la suscripción al cromo-depuración-protocolo de lista de correo.
algunos recursos
Fundamentos: El uso de DevTools como cliente de protocolo
La herramientas de desarrollo de front-end puede asociar a una instancia remota Chrome corriendo para la depuración. Para este escenario de trabajo, usted debe comenzar su anfitrión Chrome instancia con el parámetro de línea de comando remoto-depuración puertos:
chrome.exe --remote-depuración-port = 9222
A continuación, puede iniciar una separada cliente ejemplo cromo, usando un perfil de usuario distinto:
chrome.exe --user-data-dir = <algún directorio>
Básicos: Devtools como un protocolo del lado del cliente
Devtools extremo delantero puede asociar a una instancia remota cromado en funcionamiento, de depurar, en este escenario, vamos a empezar una serie Chrome ejemplo:
chrome.exe --remote-depuración-port = 9222
Y luego iniciar una instancia de cliente clientes Chrome, utilizar un perfil de usuario especificado:
chrome.exe --user-data-dir = <algún directorio>
Ahora se puede navegar hasta el puerto dado de su cliente y se unen a cualquiera de las fichas descubiertas para la depuración: http: // localhost: 9222
Usted encontrará las herramientas de desarrollo de interfaz idéntica a la incrustado y aquí es por qué:
Ahora escriba en el cliente de http: // localhost: 9222, verá los DevTools del lado del cliente actuales como incrustado en un host en que devtools como usted para explicar por qué se puede hacer funcionar el siguiente:
- Cuando se desplaza el cliente del navegador Chrome con el puerto del control remoto, herramientas de desarrollo front-end que se sirve de la serie Chrome como una aplicación Web desde el servidor Web.
- Se obtiene HTML, JavaScript y CSS a través de HTTP
- Una vez cargado, Herramientas de Desarrollo establece una conexión Web Socket a su huésped y se inicia el intercambio de mensajes JSON con él.
En este escenario, puede sustituir las herramientas de desarrollo de aplicaciones para usuario con su propia aplicación. En lugar de navegar a la página HTML en la dirección http: // localhost: 9222, su aplicación puede descubrir páginas disponibles mediante la solicitud: http: // localhost: 9222 / JSON y conseguir un objeto JSON con información sobre las páginas Inspectable junto con las direcciones que WebSocket se puede utilizar con el fin de iniciar la instrumentación de ellos. Ver el HTTP Endpoints sección de abajo para más.
· Cuando se conecta a 9222 con un cliente, DevTools front-end será anfitrión casos Chrome sirven como una aplicación web en el servidor remoto
· Se buscará HTML a través de HTTP, JavaScript, CSS
· Una vez cargado, se reanudarán DevTools un enlace ws y anfitrión, y comenzar a intercambiar información JSON
En este escenario, puede utilizar su propia aplicación en lugar DevTools parte delantera, además de ver localhost: 9222, se puede ver localhost: 9222 / JSON ser adquirida comunicación JSONObject ws, y modificar el uso de ellos, HTTP puntos finales capítulos posteriores hay más detalles.
Escuchando el protocolo
Esto es especialmente útil para entender cómo los DevTools frontend hace uso del protocolo. Puede ver todas las peticiones / respuestas y métodos de medida que ocurren.
A continuación se explicará DevTools parte delantera es cómo utilizar este protocolo, puede ver la totalidad de la solicitud / respuesta
Para su uso, primero permitirá DevTools experimentos . A continuación, haga clic en el icono del menú ⋮ en la parte superior derecha de las DevTools y seleccione Configuración . Seleccione los experimentos sobre la izquierda de la configuración. A su vez en "Protocolo Monitor", a continuación, cierre y vuelva a abrir DevTools. Ahora haga clic en el icono del menú ⋮ de nuevo, seleccione Más herramientas y luego seleccione el monitor Protocolo .
• Los primeros experimentos DevTools abiertas
· A continuación, haga clic en la parte superior derecha de devtools ":" la marca, a continuación, seleccione Configuración, seleccione experimentos, y luego abrir el monitor de Protocolo
· DevTools a continuación, cierre y vuelva a abrir
· A continuación, vuelva a hacer clic ":" signo, haga clic en Más herramientas, seleccione el monitor Protocolo
También puede emitir sus propios comandos. En primer lugar, abiertas devtools-en-devtools , a continuación, dentro de la ventana DevTools interno, el uso Main.sendOverProtocol() de la consola:
Usted puede traer sus propios comandos, primeros DevTools abiertas DevlTools, y luego entrar en la consola:
Main.sendOverProtocol await ( 'Emulation.setDeviceMetricsOverride', {
móvil: true,
anchura: 412,
altura: 732,
deviceScaleFactor: 2.625,
});
datos const = await Main.sendOverProtocol ( "Page.captureScreenshot");
protocolo DevTools través de la extensión Chrome
DevTools protocolo mediante el uso de Chrome Extension
Para permitir extensiones de cromo para interactuar con el protocolo, introdujimos chrome.debugger API de extensión que expone esta interfaz de transporte de mensaje JSON. Como resultado, no sólo se puede conectar a la instancia de Chrome de forma remota en funcionamiento, pero también instrumentos desde su propia extensión.
Chrome depurador Extensión API proporciona una API de alto nivel donde dominio de comandos, el nombre y el cuerpo se proporcionan explícitamente en la sendCommand llamada. Esta API cueros Request-IDs y identificadores de enlace de la solicitud con su respuesta, lo que permite a sendCommand reportar el resultado de la llamada a la función de devolución de llamada. También se puede utilizar esta API en combinación con las otras API de extensión.
Si está desarrollando un IDE basado en la Web, se debe implementar una extensión que expone la depuración de las capacidades a su página y su IDE podrán páginas abiertas con la aplicación de destino, establecer puntos de interrupción allí, evaluar expresiones en la consola, editar vivo JavaScript y CSS , mostrar DOM en vivo, la interacción de la red y cualquier otro aspecto que está instrumentando herramientas de desarrollo en la actualidad.
Apertura incrustados Herramientas de Desarrollo se terminará la conexión remota y así separar la extensión.
Preguntas frecuentes
Preguntas más frecuentes
¿Cómo se define el protocolo?
Las definiciones de protocolo canónicas viven en el árbol de fuentes de cromo: ( browser_protocol.pdl y js_protocol.pdl ). Ellos se mantienen manualmente por el equipo de ingeniería DevTools. Las definiciones de protocolo declarativas se utilizan en herramientas; por ejemplo, se crea una capa de unión dentro de cromo para los DevTools Chrome para interactuar con, y separado enlaces generados para la interfaz de Chrome sin cabeza C ++ .
¿Puedo obtener el protocolo como JSON?
Estos archivos .pdl canónicos se reflejan en GitHub en el repositorio devtools-protocolo donde se generan versiones JSON, definiciones mecanografiado y typedefs cierre. La mayoría de las herramientas se basan en estas versiones JSON .
Además, si usted ha fijado --remote-debugging-port=9222 con Chrome, la versión completa de protocolo que habla está disponible en localhost:9222/json/protocol.
¿Cómo accedo a la meta navegador?
El punto final se expone como webSocketDebuggerUrl en /json/version. Tenga en cuenta el browser de la URL, en lugar de page. Si Chrome fue lanzado con --remote-debugging-port=0 y eligió un puerto abierto, el punto final del navegador se escribe en stderr y tanto el DevToolsActivePort archivo en la carpeta del perfil del navegador.
¿Apoya el protocolo de múltiples clientes simultáneos?
Chrome 63 de apoyo introducido para varios clientes. Ver este artículo para más detalles.
Al disconnnection, el cliente saliente recibirá un detached evento. Por ejemplo: {"method":"Inspector.detached","params":{"reason":"replaced_with_devtools"}}. Ver la enumeración de las posibles razones. (Para la referencia: el parche original ). Después de la desconexión, algunas aplicaciones han optado por hacer una pausa en su estado y ofrecer un botón de reconexión.
HTTP puntos finales
HTTP puntos finales
Si se comienza con un control remoto-depuración-puerto, estos extremos HTTP están disponibles en el mismo puerto. ( Aplicación de cromo )
OBTENER /json/version
versión del navegador de metadatos
{
"Navegador": "Chrome / 72.0.3601.0",
"Protocolo-Version": "1.3",
"User-Agent": "Mozilla / 5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit / 537.36 (KHTML, like Gecko Chrome) / 72.0.3601.0 Safari / 537.36" ,
"V8-Version": "7.2.233",
"WebKit-Version": "537,36 (@ cfede9db1d154de0468cb0538479f34c0755a0f4)",
"webSocketDebuggerUrl": "WS: // localhost: 9222 / devtools / navegador / b0b8a4fb-bb17-4359-9533-a8d9f3908bd8"
}
GET /json o /json/list
Una lista de todos los objetivos WebSocket disponibles.
[{
"Description": "",
"devtoolsFrontendUrl": "/devtools/inspector.html?ws=localhost:9222/devtools/page/DAB7FB6187B554E10B0BD18821265734",
"id": "DAB7FB6187B554E10B0BD18821265734",
"title": "Yahoo",
"type": "página",
"url": "https://www.yahoo.com/",
"webSocketDebuggerUrl": "WS: // localhost: 9222 / devtools / página / DAB7FB6187B554E10B0BD18821265734"
}]
OBTENER /json/protocol/
El protocolo devtools actual, como JSON:
{
"Dominios": [
{
"dominio": "Accesibilidad",
"experimental": true,
"dependencias": [
"dom"
],
"tipos": [
{
"id": "AXValueType",
"Descripción": " enumeración de posibles tipos de propiedad ",.
"type": "cadena",
"enumeración": [
"booleano",
"tres estados",
// ...
OBTENER /json/new?{url}
Abre una nueva pestaña. Responde con los datos de destino WebSocket para la nueva ficha.
OBTENER /json/activate/{targetId}
Trae una página en el primer plano (activar una pestaña).
Para objetivos válidos, la respuesta es 200: "Target activated". Si el destino no es válido, la respuesta es 404: "No such target id: {targetId}"
OBTENER /json/close/{targetId}
Cierra la página de destino identificado por targetId.
Para objetivos válidos, la respuesta es 200: "Target is closing". Si el destino no es válido, la respuesta es 404: "No such target id: {targetId}"
WebSocket /devtools/page/{targetId}
El punto final WebSocket para el protocolo.
OBTENER /devtools/inspector.html
Una copia de las DevTools frontend que se suministran con Chrome.
Original: https://chromedevtools.github.io/devtools-protocol/