2010-11-15 33 views
5

En Webkit Inspector, puedo ir al panel de elementos y desplegar los elementos DOM para poder ver lo que estoy interesado.¿Cómo mantengo el árbol "Elementos" (DOM) abierto en Webkit Inspector?

Hasta ahora, cuando encuentro lo que estoy buscando, cambie el código, y vuelva a cargar la página, el árbol DOM en el panel Elementos se vuelve a plegar.

¿Hay alguna forma de, A) Hacer que el Inspector recuerde dónde estaba e intentar abrir el árbol DOM a donde estaba, o B) Mantener el árbol DOM desplegado de forma predeterminada?

Respuesta

0

Debe seleccionar el elemento DOM en Webkit Inspector, en lugar de dejarlo resaltado con el botón derecho del elemento contextual 'Inspeccionar elemento'.

Si está editando contenido en el Inspector, asegúrese de volver a seleccionar el elemento DOM; A diferencia de su contenido de texto, o el elemento DOM se plegará una copia de seguridad.

+0

no funciona para mí. La diferencia entre "resaltado" y "seleccionado" tampoco está clara. –

2

Tenía la misma pregunta. Estoy usando Chrome en Win XP, así que solo puedo decirte la solución que encontré para Chrome, pero me imagino que el proceso es muy similar para otros navegadores Webkit.

navegué a la carpeta Datos de programa Chrome: C: Relleno \ Documents and Settings \ [nombre de usuario] \ Configuración local \ Datos de programa \ Google \ Chrome \ Application [VERSIÓN MÁS NUEVO] \ Resources \ inspector

Obviamente en [USERNAME] y [NEWERS VERSION] con las carpetas que tiene en su computadora.

Cerré el navegador.

Abrí DevTools.js en Notepad ++ y comencé a buscar. Resulta que el inspector de webkit agrega una propiedad css de etiquetas "expandidas" al hacer clic en la pequeña flecha.

En línea 1484 Hay un valor booleano para el valor predeterminado. Simplemente cambié this.expanded = false a this.expanded = true

Encendidos Chrome y badda-bing, todos los elementos en el inspector están expandidos de forma predeterminada.

+1

Agregar la línea real que ha cambiado hubiera sido mucho más útil. – iain

+0

Esto es solo un truco total: sería mejor plantear esto como una nueva solicitud de función con el equipo de Chrome, por lo que se agrega como una opción formal –

1

Con la ayuda de this article logré que esto funcionara con OSX Safari.

Abra el inspector, busque un elemento (cualquiera lo hará), luego haga clic derecho y "Inspeccionar Elemento". Tendrá que sacarlo (botón inferior izquierdo) y luego anotar la ruta en la barra de título. El mío es

/System/Library/Frameworks/WebKit.framework/Versions/A/Frameworks/WebCore.framework/Resources/inspector/inspector.js

Entonces, yo vi utilizados en la terminal :

sudo vi /System/Library/Frameworks/WebKit.framework/Versions/A/Frameworks/WebCore.framework/Resources/inspector/inspector.js 

Necesita sudo, ya que es un archivo de solo lectura para la mayoría de los usuarios.

Entonces hice una búsqueda de this.expanded = false; (se puede hacer esto en grep golpeando una / y luego escribir el término de búsqueda y pulsar ENTER, a continuación, n para el próximo partido.)

En la línea 1175 que encontré:

this.expanded = false; 

y lo cambió a:

this.expanded = true; 

que hay debajo:

function TreeOutline(listNode) 
{ 

guardó el archivo (ZZ en vi) y reinicia el navegador. Ahora los elementos se mantienen expandidos. YMMV.

Safari v5.1.7 (6534.57.2), OSX 10.6.8

Cuestiones relacionadas