page - script javascript html

encontrar código JavaScript muerto?

Question

Estamos refactorizando una aplicación web heredada y, como resultado, estamos "matando" una gran cantidad de código JavaScript, pero tenemos miedo de eliminar lo que creemos que es un código muerto porque no estamos seguros. ¿Existe alguna herramienta / técnica para identificar positivamente el código muerto en JavaScript?

Answer 1

Chrome ha creado una nueva función que permite al desarrollador ver la cobertura del código , es decir, qué líneas de códigos se ejecutaron.

Esto ciertamente no es una solución integral, pero puede extender una mano de ayuda a los desarrolladores para obtener información sobre el código.

Revisa este link para más detalles.

Rodado como aparte de la versión de Chrome 59

Answer 2

Podría usar los optimizadores de código como Google Closure Compiler , sin embargo, a menudo se usa para minimizar el código.

function hello(name) {
alert(''Hello, '' + name);
}

function test(){
alert(''hi'');
}

hello(''New user'');

Resultará en

alert("Hello, New user");

Por ejemplo.

Otra cosa que podrías hacer es usar las herramientas de desarrollo de Chrome (o Firebug) para ver todas las llamadas de función. En Perfiles , puede ver qué funciones se están llamando con el tiempo y cuáles no.

Answer 3

Si quieres automatizar esto, echaría un vistazo a https://github.com/joelgriffith/navalia , que expone una API automatizada para hacer precisamente eso:

const { Chrome } = require(''navalia'');
const chrome = new Chrome();

chrome.goto(''http://joelgriffith.net/'', { coverage: true })
  .then(() => chrome.coverage(''http://joelgriffith.net/main.bundle.js''))
  .then((stats) => console.log(stats)) // Prints { total: 45913, unused: 5572, 
  percentUnused: 0.12135996340905626 }
  .then(() => chrome.done());

Más aquí: https://joelgriffith.github.io/navalia/Chrome/coverage/

Answer 4

Si su código usa "eval", es bastante difícil obtener una garantía de que en alguna parte el código no ensambla una cadena por algún medio oscuro y lo evalúa, llamando a su código muerto. (Y las cosas realmente desagradables pueden llamar eval en una cadena que contiene eval ...).

También tiene que preocuparse por las llamadas desde fuera de su código; muchas páginas web utilizan los atributos HTML "on" para invocar el código JavaScript.

Entonces, lo que debe hacer es encontrar métodos / declaraciones que parezcan estar muertos, buscar y revisar todas las llamadas eval, y buscar y revisar todos los atributos "on".

El uso de la cobertura de prueba como otros han sugerido es una forma de obtener una lista inicial de código posiblemente muerto. Obviamente, desea ejercer la mayor funcionalidad posible para eliminar posibles candidatos muertos y, a continuación, buscar los restantes para ver si hay llamadas en su código. Encontrar evals y on-events es una cuestión de buscar el código para tales cosas.

Grep probablemente funcionará, aunque puede ser doloroso repasar su lista de nombres uno por uno, escribir la búsqueda correcta, adivinar de su salida cuáles no son falsos positivos e inspeccionarlos en un editor uno por uno.

Puede consultar nuestro Motor de búsqueda de código fuente SD (SCSE) , que puede realizar búsquedas específicas por idioma para muchos idiomas, incluidas páginas HTML de varios tipos y JavaScript. Puede restringir fácilmente el SCSE para inspeccionar solo las llamadas de función en el código JavaScript (por ejemplo, ignorar comentarios y cadenas) para los candidatos y / o eval restantes, e inspeccionar solo los atributos "en *" en las páginas HTML (por ejemplo, para ignorar todo el resto del texto en las páginas HTML). Utiliza una GUI para aceptar su consulta de búsqueda, mostrar resultados y extraer el texto de origen que contiene el resultado para una fácil inspección. Incluso te llevará a tu editor de un golpe, si es necesario.

Para una solución de análisis estático, necesita herramientas que puedan analizar el código y determinar qué nombres se refieren a qué entidades; el alcance importa Luego, debe ser capaz de determinar rutas de ejecución plausibles a través del código, módulo de la estructura dinámica del objeto y esos desagradables evals. Para esto necesitas un motor bastante sofisticado y probablemente un poco de ingeniería, a menos que alguien simplemente tenga esto alrededor, lo cual dudo.

Nuestro kit de herramientas de reingeniería de software de DMS es un motor de este tipo, y tiene un completo analizador de JavaScript (y HTML). Si bien no hemos utilizado DMS para esto en JavaScript, hemos creado un eliminador de código muerto para Java utilizando DMS. Lo alimenta con el código Java y produce una lista de clases, métodos y campos "parece estar muerto" (incluido el cierre transitivo de muertos: si la clase A está muerta y las referencias B, las referencias de A no cuentan) como referencias reales a B), y una versión modificada del código con todas las cosas "muertas" eliminadas. Usted decide si cree en el informe; Si lo haces, mantienes el código. Si no lo haces, modificas el código para asegurarte de que esa cosa aparentemente muerta no esté muerta, y la ejecutas nuevamente.

Answer 5

Sin buscar nada demasiado complejo:

• JSLint (no es realmente un analizador estático, pero si le JSLint su código de desarrollo concatenado, verá qué métodos nunca se llaman, al menos en contextos de alcance obvios)
• Compilador de cierre de Google
• Google Closure Linter

Answer 6

WebStorm IDE de JetBrains puede resaltar código muerto y variables no utilizadas en su proyecto.

Answer 7

Hay grep Úsalo para encontrar llamadas a funciones. Supongamos que tiene un método llamado dostuff() . Use grep -r "dostuff()" * --color en el directorio raíz de su proyecto. A menos que encuentre algo que no sea la definición, puede borrarlo de manera segura.

Ack es también una alternativa notable a grep .