google-chrome - top - developer tools traduccion

Google Chrome Developer Toolkit es lento

Question

He estado utilizando el kit de herramientas de desarrollo de Google Chrome (inspección de elementos, seguimiento de pila, depuración de JavaScript, etc.) durante bastante tiempo con gran éxito.

Sin embargo, hace aproximadamente dos semanas, de repente se volvió MUY lento. Por ejemplo, cuando hago clic con el botón derecho en un elemento en la interfaz de usuario y luego hago clic en "Inspeccionar elemento", o cuando simplemente presiono F12, la ventana de código tarda entre 30 y 45 segundos en aparecer. Solía ​​suceder en menos de un segundo.

¿Alguien más se ha encontrado con este problema? Si es así, ¿fue capaz de corregirlo? ¿Cómo?

¡Gracias por adelantado!

Mate

Answer 1

Borrar el caché y todos los datos de privacidad también resolvió mi problema :-)

Answer 2

Esto se solucionó al borrar mi caché (archivos temporales, cookies, etc.) en Chrome. No estoy seguro de cuál fue la causa raíz, pero eso solucionó el problema.

Answer 3

Esto se soluciona en una versión futura: https://code.google.com/p/chromium/issues/detail?id=485052

Answer 4

He tenido el mismo problema.

Mi problema fue que utilicé browserify para crear un paquete grande (~ 92k líneas) de ancho SOURCEMAP. browserify app.js -d -o bundle.js .

Lo resolví dividiendo mi bundle.js .

Exporté todos los módulos de nodos en un archivo separado ( modules.js ) agregando --require [module name] :

browserify -r react -r lodash -r three > build/modules.js

y luego cree bundle.js sin los módulos subcontratados agregando --external [module name] .

browserify -t babelify -x react -x lodash -x three src/app.js > build/bundle.js

( -t babelify , porque utilicé react / JSX en mi proyecto.)

NOTA : debe incluir module.js en su html antes de bundle.js .

Mi bundle.js redujo de ~ 92000 a ~ 26000 líneas ;-)

EDITAR : para crear un paquete sin módulos externos ( node_modules ) también puede usar --no-bundle-external lugar de [-x NODE_MODULE_NAME]* .

EDIT # 2 : cuando está usando un módulo en su proyecto que contiene muchos submódulos, -r|-x [MAIN_MODULE_NAME] no requerirá | excluir los submódulos.

Ejemplo con react-bootstrap :

react-bootstrap contiene muchos submódulos, react-bootstrap/lib/[submodule] .

browserify -r react-bootstrap > build/modules.js no requerirá, por ejemplo, el módulo Button ( react-bootstrap/lib/Button ). Asi que...

... si estás usando

browserify --no-bundle-external src/app.js > build/bundle.js

... no podrá usar Button en su aplicación, porque --no-bundle-external excluye todos los módulos de nodos, incluidos los submódulos. Así que no olvides solicitar todos los submódulos necesarios para:

browserify -r react-bootstrap -r react-bootstrap/lib/Button > build/modules.js

NOTA : Además, para aumentar el rendimiento, puede usar exorcist para colocar el mapa fuente en un archivo separado. Instalarlo con:

npm install --save-dev exorcist

y cambie su comando de browserify :

browserify --no-bundle-external src/app.js | exorcist build/bundle.js.map > build/bundle.js

Gracias a smhg por la pista con excorcist . Y muestre su respuesta para más detalles.

Answer 5

Lo agregué como un comentario a la respuesta de Marcel , pero dado que hizo una gran diferencia para mí, creo que vale la pena ponerlo como una respuesta separada:

Tenía un mapa fuente en línea JS en un archivo con un tamaño total de aproximadamente 2-3 MB (sin comprimir, durante el desarrollo). Chrome era insoportablemente lento en las cargas de página (con las herramientas de desarrollador abiertas). Después de unos 20 segundos, cuando el archivo y el mapa fuente en línea fueron analizados, las cosas serían más o menos normales. Además, empeoró con la actualización de Chrome 43 (en Ubuntu).

Tan pronto como puse el mapa fuente en un archivo separado , todo volvió a la normalidad. La desaceleración en la carga de la página se ha ido. Las fuentes están disponibles al instante.

Desde que construí con browserify , exorcist fue lo que usé. Más específicamente: con watchify en el parámetro -o como se describe en este número .

Answer 6

Mi archivo transpilado, incluido el mapa fuente, es de aproximadamente 5 MB. He intentado todas las soluciones en esta publicación y solo he visto una mejora marginal. Finalmente abandoné, desinstalé y reinstalé Chrome. Desearía haberlo hecho de inmediato, la carga de mi mapa fuente en el depurador pasó de unos 15 segundos a 3.

Answer 7

Mi solución fue simplemente eliminar un lote de proyectos que se ejecutaban localmente en mi computadora y que estaban conectados a IIS. Acaba de eliminar carpetas / proyectos que no uso mucho o más. eliminado 25GB de datos y ahora mi barra de herramientas de desarrollo funciona como el encanto!

Answer 8

Tuve el mismo problema, probé las mismas soluciones sin suerte, hasta que disparé procmon y vi que Chrome realmente estaba leyendo toda mi carpeta de proyectos (que vale varios cientos de miles de archivos).

Hubo una referencia a esa carpeta en la sección Espacio de trabajo / Carpetas en la aplicación Configuración de herramientas de desarrollo. Eliminar la referencia resolvió el problema.

Answer 9

Tuve un problema como este; abrir la ventana del depurador fue lento (10-20 segundos) y también cada vez que pise el código, no importa cuán simple, experimenté una gran demora (10-20 segundos).

La causa para mí fue que tenía algunos arreglos grandes (miles de entradas, 10 segundos de MB de datos) en el alcance. El depurador representa previamente todos los datos dentro del alcance (incluidos todos los globales, todo lo que cuelga de la ventana y todos los parámetros de todas las funciones en la pila de llamadas) para visualizar en la ventana "Variables del alcance". Si ese árbol de datos es grande, cada paso le llevará al depurador un tiempo prolongado para volver a calcular el árbol de inspección variable.

Pude solucionar el problema (a) moviendo la matriz grande a un ámbito no global, para mantenerla fuera de la ventana, y luego (b) moviendo el resto de mi programa a un ámbito diferente. Al igual que:

<script>
(function() {
  // large variable in stack scope, stepping in any
  // code called from here will be slow
  var hugeArray = [...];
  calculateHugeArray(hugeArray);
})();

(function() {
  // large variable now out of scope, so Chrome won''t
  // try to display it in the "Scope Variables"
  // window. This makes debugging and stepping faster.
  doMoreThings();
})();
</script>

Lamentablemente, si necesita pasar por el código que hace referencia a la matriz grande, entonces no tengo una solución alternativa.

Answer 10

Utilizando Chrome 46.x / 47.x en Linux (RHEL 7), ninguna de las soluciones propuestas funcionó para mí. Lo que funcionó fue desactivar la configuración "Usar aceleración de hardware cuando esté disponible", en la configuración avanzada del navegador.

Me di cuenta en el monitor / lista de procesos que el renderizador de Chrome estaba ocupando una gran cantidad de CPU y, como se describió anteriormente, incluso poner un punto de interrupción o pasar por las instrucciones en el depurador tomaría más de 10 segundos.