¿Cómo se inspecciona el inspector web en cromo?

Según Google, esto se puede lograr visitando “chrome-devtools: //devtools/devtools.html” en Chrome, pero ahora, al visitar esa página en la versión estable de Chrome (o Canary), solo se muestra una versión eliminada al 99% del inspector.

Para reiterar mi “título” esto es en referencia a “inspeccionar” al inspector. No solo inspeccionando una página web normal. Esta es una captura de pantalla: http://cl.ly/JFzc

Y aunque no creo que sea necesario saber resolver el problema, estoy inspeccionando al inspector para poder diseñarlo tal como lo discutió Paul Irish y aquí: http://darcyclarke.me/design/skin-your-chrome -inspector/

¡Sigue estos sencillos pasos!

  1. Presione Comando + Opción + i ( Ctrl + Shift + i en Windows) para abrir DevTools.
  2. Asegúrese de que las herramientas del desarrollador estén desacopladas en una nueva ventana. Es posible que deba desacoplar del menú: Desacoplar del menú

  3. Presione Comando + Opción + i nuevamente en esta nueva ventana.

  4. Eso abrirá DevTools en DevTools.
    • Puede volver a asociar DevTools de la página si lo desea.
  5. Si aún no lo está, selecciona Elementos : es el primer ícono en la parte superior del inspector.

Un poco más allá del scope de su pregunta, pero aún válido para comprender por qué está experimentando su problema, puede encontrarlo al comprender cómo funciona Chrome Developer Tools: Remote Debugging .

  1. Abrir Chrome: // inspeccionar
  2. Abra el inspector en esa página (cmd + alt + i)
  3. Desplácese hasta la parte inferior de la página, en la sección Other , haga clic en el enlace inspeccionar

La URL en la sección Other debe verse más o menos así: Chrome-DevTools: //devtools/devtools.html? Docked = true & dockSide = bottom & toolbarColor = rgba (230,230,230,1 …

EDITAR: han imaginado la página chrome: inspect, por lo que debe hacer clic en el encabezado Other de la izquierda para que esto funcione ahora.

Hace unas semanas, alguien señaló esto en la sala de chat “javscript” de stackoverflow. Primero, y muy importante, asegúrese de que el inspector esté desacoplado de la ventana de su navegador . Entonces solo es cuestión de abrir una ventana de inspector y luego inspeccionar esa ventana. En Windows es Ctrl Shift I (Editar: dije, Ctrl Shift I, pero eso hace que aparezca la consola inspeccionando la consola … debería poder navegar hacia adelante y hacia atrás.) Para el atajo de teclado. (Otros combos de teclado para otras opciones y sistemas operativos aquí y aquí .) Solo hazlo dos veces y estarás bien.

Editar: bien, probablemente esté confundido en cuanto a desacoplar la ventana. Esto es en lo que harías clic si está conectado. enter image description here

Editar II: No estoy seguro de por qué no puedes inspeccionar. La respuesta de JDavis es consistente con Google Docs para computadoras Apple. Si está utilizando Linux, parece ser el mismo que Windows. Se supone que debes presionar la combinación de teclas del inspector mientras el foco está sobre la ventana del inspector.

Acabo de hacer que esto funcione. La clave es que debe iniciar Chrome en modo ‘Depuración remota’.

en OSX, abra una ventana de terminal y ejecute lo siguiente:

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

En ventanas, es

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

(Se pueden encontrar mejores instrucciones de Windows aquí: https://developers.google.com/chrome-developer-tools/docs/remote-debugging#remote )

Esto iniciará una instancia de chrome, que enviará mensajes de depuración a un servidor web local en el puerto 9222.

Si accede a ese servicio web, le dará la posibilidad de utilizar el inspector para inspeccionar cualquier ventana de Chrome que se esté ejecutando. Como queremos inspeccionar al inspector, primero debemos iniciar una ventana de inspector (como en el caso anterior, use las teclas de acceso directo, para Mac es Comando + opción + i).

Ahora, ve y navega hacia

 http://localhost:9222 

Le presentará una lista de ventanas para mostrar en el depurador. Seleccione la ventana que comienza con “Herramientas de desarrollador” y podrá inspeccionar el CSS para el inspector.

Es difícil de ver en la imagen de abajo, pero a la izquierda tengo mi ventana de cromo apuntando al depurador remoto, destacando una de las tags de la barra de herramientas. A la derecha lo ves iluminado con la información sobre herramientas como si estuviéramos depurando una página web.

Inspeccionar al inspector