Share
En tant que développeur JavaScript, je suis sûr que vous êtes déjà tombé dans ce scénario: quelque chose ne va pas avec la version de production de votre code, et le déboguer directement à partir du serveur de production est un cauchemar simplement parce qu'il a été minisé ou a été modifié. compilé à partir d'un autre langage tel que TypeScript ou CoffeeScript.
La bonne nouvelle? Les dernières versions des navigateurs peuvent vous aider à résoudre ce problème en utilisant des cartes source. Dans ce tutoriel, je vais vous montrer comment trouver les cartes sources dans tous les navigateurs et tirer le meilleur parti de ces quelques minutes de débogage..
Selon le grand article Introduction to JavaScript Source Maps, une carte source est “un moyen de mapper un fichier combiné / minifié à un état non construit. Lorsque vous construisez pour la production, avec la réduction et la combinaison de vos fichiers JavaScript, vous générez une carte source contenant des informations sur vos fichiers d'origine.”.
S'il vous plaît, n'hésitez pas à lire l'article de Ryan Seddon en premier, car il contient de nombreux détails sur le fonctionnement d'une carte source. Vous apprendrez ensuite qu'une carte source utilise un fichier intermédiaire qui établit la correspondance entre la version de production de votre code et son état de développement d'origine. Le format de ce fichier est décrit ici: Source Map Proposition de révision 3.
Maintenant, pour illustrer mon propos, je vais partager la façon dont nous travaillons actuellement lors du développement de notre framework open source WebGLBabylon.js. C'est écrit dans Manuscrit. Mais les principes resteront les mêmes si vous utilisez du code JavaScript compressé / minifié ou d’autres langages tels que CoffeeScript..
Jouons maintenant avec la magie de la carte source directement dans les navigateurs.
Récemment, j'ai implémenté le support de l'API Gamepad dans notre moteur de jeu. Utilisons son code pour ce tutoriel.
Dans cet article, j'utilise les navigateurs suivants:
Accédez à cette URL: http://david.blob.core.windows.net/babylonjs/gamepad/index.html et vous obtiendrez cette page:
Branchez un contrôleur Xbox 360 ou Xbox One sur le port USB de votre ordinateur. appuyez sur la UNE bouton pour activer le gamepad et jouer avec:
Mais ne t'inquiète pas, vous n'aurez pas besoin d'un contrôleur de manette de jeu pour suivre ce tutoriel.
Remarque: Le compilateur TypeScript génère automatiquement la carte source pour vous. Si vous souhaitez générer une carte source tout en générant votre version simplifiée de votre code, je vous recommande d'utiliser UglifyJS2..
Pour cet article, j'ai même mélangé les deux. J'ai minifié le JS généré par TypeScript et gardé le mappage source intact à l'aide de cette ligne de commande:
uglifyjs testgamepad.js -o testgamepad.min.js --source-map testgamepad.min.js.map --in-source-map testgamepad.js.map
Une fois la page de test de GamePad chargée, appuyez sur F12 dans IE11.
Vous verrez que la source HTML fait référence à deux fichiers JavaScript: babylon.gamepads.js au début de la page et testgamepad.min.js à la fin. Le premier fichier provient de notre framework sur GitHub, et le second est un exemple simple montrant comment le consommer..
Appuyez sur le Débogueur bouton (ou Contrôle-3), puis appuyez sur l'icône du dossier.
Vous verrez que IE11 offre deux fichiers à déboguer: babylon.gamepads.ts et testgamepad.min.js.
Commençons par examiner le babylon.gamepads.ts Cas. Pourquoi IE le montre-t-il à la place de la version .js exécutée par le navigateur??
C'est grâce au mécanisme de la carte source. À la fin de babylon.gamepads.js fichier, vous pouvez trouver cette ligne spécifique:
// # sourceMappingURL = babylon.gamepads.js.map
Ouvrir babylon.gamepads.js.map pour comprendre comment cela fonctionne:
"version": 3, "fichier": "babylon.gamepads.js", "sourceRoot": "", "sources": ["babylon.gamepads.ts"], "noms": ["BABYLON", " BABYLON.Gamepads ",…]
En lisant ce fichier JSON, IE11 sait qu’il devrait cartographier “babylon.gamepads.ts" à "babylon.gamepads.js” C'est pourquoi il propose directement de déboguer le source TypeScript au lieu de la version compilée JS.
Ouvrir babylon.gamepad.ts dans la console IE11 F12 et vous verrez quelque chose que vous n’avez peut-être jamais vu auparavant, un langage TypeScript:
Vous pouvez le déboguer comme vous en avez l'habitude, même s'il s'agit de la version JavaScript compilée en cours d'exécution par le navigateur..
Définissez un point d'arrêt sur la ligne 17 et appuyez sur F5 dans la fenêtre du navigateur. Vous pourrez déboguer la version TypeScript du constructeur:
Passez à la ligne 20, passez la souris sur ce et développez-le pour vérifier que gamepadEventSupported est réglé sur vrai:
Chargez la même page: http://david.blob.core.windows.net/babylonjs/gamepad/index.html et appuyez sur F12 en chrome ou Control-Shift-I à l'opéra.
Cliquez sur l’icône de configuration et assurez-vous que le Activer les cartes sources JavaScript l'option est activée. Il devrait être défini par défaut:
Chrome et Opera vous permettent d’examiner les tâches exécutées. babylon.gamepads.js code, mais si vous essayez de définir un point d'arrêt dans la version JavaScript, il ne l'affichera pas. Il le définira à la place dans le code source mappé à cette version: babylon.gamepads.ts.
Par exemple, essayez de définir un point d'arrêt sur la ligne 18 de la babylon.gamepads.js Fichier JavaScript et vous verrez qu'il sera placé sur la ligne 17 de la babylon.gamepads.ts TypeScript à la place:
Bien sûr, vous pouvez également définir les points d'arrêt appropriés directement dans la source TypeScript, comme indiqué avec IE11 juste avant..
presse F5 dans la fenêtre du navigateur hébergeant notre page de démonstration et vous serez maintenant en mesure de déboguer mon code TypeScript. Passez à la ligne 20 et passez la souris sur la this.gamepadEventSupported variable. Il devrait afficher vrai:
Chargez la même page: http://david.blob.core.windows.net/babylonjs/gamepad/index.html et appuyez sur Control-Shift-S pour ouvrir le débogueur natif (n'utilisez pas F12 / Firebug, car il ne prend pas en charge les cartes source).
Vérifiez que le Afficher les sources originales l'option est cochée:
Définissez un point d'arrêt comme d'habitude sur la ligne 17, puis rechargez la page pour insérer le code. Firefox ne prend pas en charge le survol de la souris sur la source d'origine. Passez à la ligne 20 et développez le ce objet à la place dans le panneau de droite pour vérifier que gamepadEventSupported est mis à vrai aussi.
Jusqu'à présent, nous n'avons débogué que le babylon.gamepads.js code en utilisant le babylon.gamepads.ts la source. Mais qu'en est-il de cette minified testgamepad.min.js Fichier JavaScript?
La première solution consiste à embellir le code. Cela fonctionne avec IE11, Chrome, Opera et Firefox.
Dans IE11, appuyez sur la Joli imprimé bouton ou appuyez sur Control-Shift-P:
Dans Chrome / Opera, appuyez sur la bouton:
Dans Firefox, appuyez aussi sur le bouton:
C’est bien mieux, mais pas aussi bon qu’il l’était avec le jeu de cartes source. Pour pouvoir aller plus loin, nous avons ajouté une nouvelle fonctionnalité dans la mise à jour d'août 2014 d'IE11. Vous pouvez charger une carte source même si vous l'avez supprimée du fichier .js..
Imaginez que vous souhaitez empêcher quiconque de déboguer facilement le code de production de votre application Web à l'aide de la carte source, mais vous souhaitez toujours pouvoir le faire? Il suffit de retirer le sourceMappingURL ligne de votre fichier .js.
Avec Internet Explorer 11, vous pouvez toujours utiliser la carte source en chargeant votre répertoire local. .carte et le code source associé. Pour cela, faites un clic droit sur le testgamepad.min.js onglet et appuyez sur Choisir la carte source:
Téléchargez-les ici: http://david.blob.core.windows.net/babylonjs/gamepad/testgamepad.zip.
Décompressez-le dans votre répertoire préféré et naviguez jusqu'à celui-ci pour choisir le bon .carte fichier:
Et maintenant, le code source original peut être débogué à nouveau:
Notez que l'onglet a été renommé en testgamepad.ts et que les premières variables sont maintenant tapées car nous affichons du TypeScript.
Cool, n'est ce pas?
Cet article fait partie de la série Web de développement Web de Microsoft. Nous sommes ravis de partager Microsoft Edge et le nouveau Moteur de rendu EdgeHTML avec toi. Obtenez des machines virtuelles gratuites ou testez à distance sur votre appareil Mac, iOS, Android ou Windows @ http://dev.modern.ie/.
Apprendre JavaScript: le guide complet
Nous avons créé un guide complet pour vous aider à apprendre le JavaScript, que vous soyez débutant en tant que développeur Web ou que vous souhaitiez explorer des sujets plus avancés..
Accentsconagua