web-dev-qa-db-fra.com

trouver un code JavaScript mort?

Nous refactorisons une application Web héritée et, par conséquent, "tuons" pas mal de code JavaScript, mais nous avons peur de supprimer ce que nous pensons être du code mort, car nous n'en sommes pas sûrs. Existe-t-il un outil/technique pour identifier positivement le code mort en JavaScript?

javascriptrefactoringdead-code
59
JoelFan

Il y a grep . Utilisez-le pour rechercher des appels de fonction. Supposons que vous ayez une méthode appelée dostuff(). Utilisez grep -r "dostuff()" * --color sur le répertoire racine de votre projet. À moins que vous ne trouviez autre chose que la définition, vous pouvez l'effacer en toute sécurité.

ack est également une alternative notable à grep .

11
Júlio Santos

Sans chercher quoi que ce soit de trop complexe:

9
haylem

Si votre code utilise "eval", il est assez difficile d'obtenir une garantie que quelque part le code n'assemble pas une chaîne par des moyens obscurs et l'évalue, appelant votre code mort. (Et des trucs vraiment désagréables pourraient appeler eval sur une chaîne contenant eval ...).

Vous devez également vous soucier des appels de à l'extérieur de votre code; de nombreuses pages Web utilisent des attributs HTML "on" pour invoquer du code JavaScript.

Donc, ce que vous devez faire est de trouver les méthodes/déclarations qui semblent être mortes, et de rechercher et d'examiner tous les appels eval, et de rechercher et d'examiner tous les attributs "on".

Utiliser la couverture de test comme d'autres l'ont suggéré est un moyen d'obtenir une liste initiale de code éventuellement mort. Vous voulez évidemment exercer autant de fonctionnalités que possible pour éliminer les candidats éventuellement morts, puis recherchez les autres pour voir s'il y a des appels dans votre code. Trouver des événements et des événements est une question de recherche de telles choses dans le code.

Grep fonctionnera probablement, bien qu'il puisse être pénible de parcourir votre liste de noms un par un, de taper la bonne recherche, de deviner à partir de sa sortie ceux qui ne sont pas des faux positifs et de les inspecter un par un dans un éditeur.

Vous pouvez consulter notre moteur de recherche de code source SD (SCSE) , qui peut effectuer des recherches spécifiques à la langue pour de nombreuses langues, y compris des pages HTML de différents types et JavaScript. Vous pouvez facilement restreindre le SCSE pour inspecter uniquement les appels de fonction dans le code JavaScript (par exemple, pour ignorer les commentaires et les chaînes) pour les candidats et/ou l'évaluation restants, et inspecter uniquement les attributs "on *" dans les pages HTML (par exemple, pour ignorer tous les autres textes des pages HTML). Il utilise une interface graphique pour accepter votre requête de recherche, afficher les résultats et extraire le texte source contenant le résultat pour une inspection facile. Il vous mènera même à votre éditeur sur un coup, si nécessaire.

Pour une solution d'analyse statique, vous avez besoin d'outils qui peuvent analyser le code et déterminer quels noms se réfèrent à quelles entités; la portée importe. Ensuite, vous devez être en mesure de déterminer des chemins d'exécution plausibles à travers le code, modulo la structure d'objet dynamique et ces méchants Evals. Pour cela, vous avez besoin d'un moteur assez sophistiqué et probablement d'un peu d'ingénierie, à moins que quelqu'un ne se produise, ce que je doute.

Notre DMS Software Reengineering Toolkit est exactement un tel moteur, et il a un analyseur JavaScript (et HTML) complet. Bien que nous n'ayons pas utilisé DMS pour cela pour JavaScript, nous avons construit un tel décapant de code mort pour Java utilisant DMS. Vous l'alimentez avec le code Java, et il produit une liste "semble morte" de classes, méthodes et champs (y compris la fermeture transitive de dead: si la classe A est morte et les références B, les références de A ne comptent pas comme de vraies références à B), et une version modifiée du code avec tous les éléments "morts" supprimés. Vous décidez si vous croyez le rapport; si vous le faites, vous gardez le code Si vous ne le faites pas, vous modifiez le code pour vous assurer que cette chose apparemment morte n'est pas morte et vous l'exécutez à nouveau.

8
Ira Baxter

WebStorm IDE de JetBrains peut mettre en évidence le code mort et les variables inutilisées dans votre projet.

7
Sukhanov Niсkolay

Vous pouvez utiliser des optimiseurs de code comme Google Closure Compiler , mais il est souvent utilisé pour réduire le code.

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

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

hello('New user');

Aura pour résultat

alert("Hello, New user");

Par exemple.

Vous pouvez également utiliser les outils de développement de Chrome (ou Firebug) pour voir tous les appels de fonction. Sous Profils , vous pouvez voir quelles fonctions sont appelées au fil du temps et lesquelles ne le sont pas.

DT Profiles

6
Harmen

Chrome a mis au point une nouvelle fonctionnalité qui permet au développeur de voir la couverture de code , c'est-à-dire quelles lignes de codes ont été exécutées.

Ce n'est certainement pas une solution unique, mais peut aider les développeurs à obtenir des informations sur le code.

Vérifiez cela lien pour plus de détails

Rolled as apart of Chrome 59 release

tools

4
Nirus

Si vous souhaitez automatiser cela, je jeter un oeil à https://github.com/joelgriffith/navalia , qui expose une API automatisée pour faire exactement cela:

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());

Plus ici: https://joelgriffith.github.io/navalia/Chrome/coverage/

2
browserless