Página principal » Caja de herramientas » Cómo habilitar la aplicación Chrome DevTools para la depuración remota

    Cómo habilitar la aplicación Chrome DevTools para la depuración remota

    La aplicación Chrome DevTools es creada por Kenneth Auchenberg en un intento de sacar los controles del navegador, en este caso, del navegador Chrome. Esta aplicación se basa en NW.js y puede ejecutarse en Mac OS X, así como en Linux y Windows.

    Hay muchas razones que motivaron al creador a crear esto, pero su visión consiste en brindar a los desarrolladores la comodidad de depuración remota en varios navegadores, todo desde la misma plataforma unificada (aplicación). La idea tardará un tiempo en captar y materializarse debido a una variedad de razones (y resistencia, que puedes leer en su blog).

    Examinaremos brevemente la aplicación Chrome DevTools y veremos qué ofrece Google a los desarrolladores..

    Más sobre Hongkiat:

    • Introducción a Chrome Developer Tools
    • 5 (más) consejos útiles de Chrome DevTools para desarrolladores
    • Cómo personalizar el tema de Google Chrome DevTools

    Instalación

    Descargue Chrome-Devtools.app.zip y extráigalo. Haga doble clic para ejecutar. Inicie su navegador Chrome y habilite la depuración remota.

    Para hacer esto en la Mac, abra el terminal y ejecute el siguiente comando:

    sudo / Applications / Google \ Chrome.app/Contents/MacOS/Google \ Chrome -remote-debugging-port = 9222

    Si ejecuta Windows, abra el símbolo del sistema y use este comando:

    iniciar chrome.exe -remote-debugging-port = 9222

    Cómo utilizar

    Cuando su Chrome ya está abierto, con la función de depuración remota habilitada, ahora puede navegar a cualquier sitio. Por ejemplo, abrimos Hongkiat.com para este ejercicio. A continuación, nos dirigimos a la ventana de la aplicación Chrome DevTools, y actualizar esta lista (el botón está en la parte inferior derecha).

    Ahora verá el enlace Hongkiat.com en la lista (como se muestra a continuación).

    Ahora haga clic en el botón 'Ir'. Se te llevará a una nueva ventana. Eso es. Ya tienes la aplicación Chrome DevTools en funcionamiento. Lo que verá aquí es lo mismo que cuando "inspecciona el elemento" en el navegador Chrome.

    Y desde aquí puede usar la aplicación Chrome DevTools al igual que usar DevTools en Chrome de forma nativa: puede inspeccionar el elemento DOM, depurar JavaScript, trabajar con la consola y más.

    Que sigue?

    Esta aplicación sigue siendo muy experimental. Pero por ahora, la idea de sacar el DevTool de Chrome permite a los desarrolladores tratar la aplicación como un editor funcional y trabajar con otros tiempos de ejecución como node.js e iOS. Para más posibilidades, puedes consultar la línea de pensamiento de Auchenberg aquí..