使用跨浏览器源映射增强JavaScript调试

本文是Microsoft的Web开发技术系列的一部分。 感谢您支持使SitePoint成为可能的合作伙伴。

作为一名JavaScript开发人员，我确定您已经陷入这种情况：代码的生产版本出了点问题，直接从生产服务器调试它是一场噩梦，仅仅是因为它已被缩小或已经被从其他语言（例如TypeScript或CoffeeScript）编译而成。

好消息？ 最新版本的浏览器可以通过使用源映射来帮助您解决此问题。 在本教程中，我将向您展示如何在所有浏览器中查找源地图，并充分利用要调试的那几分钟。

等待，什么是源映射？

根据JavaScript Source Maps的精彩介绍，Source Map是“一种将组合/缩小的文件映射回未构建状态的方法。 在为生产而构建时，连同最小化和合并JavaScript文件，您将生成一个源映射，其中包含有关原始文件的信息。

请立即阅读Ryan Seddon的文章，因为它详细介绍了源地图的工作原理。 然后，您将了解源映射使用一个中间文件，该文件在代码的生产版本与其原始开发状态之间进行匹配。 该文件的格式在此处描述： 源地图修订版3提案

现在说明一下，在开发WebGL Babylon.js开源框架时，我将分享我们目前的工作方式： http : //www.babylonjs.com 。 它是用TypeScript编写的。 但是，如果您使用压缩/最小化的普通JavaScript或其他语言（例如CoffeeScript），则原理将保持不变。

现在，让我们直接在浏览器中玩源地图魔术。

我们将要使用的演示页面

最近，我一直在我们的游戏引擎中实现对Gamepad API的支持。 让我们在本教程中使用其代码。

在本文中，我使用以下浏览器：

• Internet Explorer 11 ， 八月更新 （版本11.0.9600.17239）或更高版本，开发人员频道版本： devchannel.modern.ie，支持Gamepad API。 IE的旁注：Microsoft正在使用新的浏览器Microsoft Edge，因此请确保检查最新的Web标准支持： status.modern.IE 。
• Chrome 38开发人员频道（版本38.0.2125.8 dev-m）/ Opera 23
• Firefox 31或Firefox 34每晚

导航到该URL ，您将看到此页面：

将Xbox 360或Xbox One控制器插入计算机的USB端口。 按A按钮激活游戏板并玩游戏：

但请放心，您不需要游戏手柄控制器即可遵循本教程。

注意： TypeScript编译器会自动为您生成源映射。 如果您想在生成代码的精简版时生成源地图，我建议您使用Uglify JS 2： https : //github.com/mishoo/UglifyJS2

对于本文，我什至将两者混为一谈。 我缩小了由TypeScript生成的JS，并使用以下命令行保持了源映射的完整性：

uglifyjs testgamepad.js -o testgamepad.min.js --source-map testgamepad.min.js.map --in-source-map testgamepad.js.map

如何使用原始源代码进行调试

使用Internet Explorer 11

载入游戏手柄测试页后，请按IE11中的F12。

你会看到HTML源引用两个JavaScript文件： babylon.gamepads.js页面和年初testgamepad.min.js在最后。 第一个文件来自我们在Github上的框架，第二个文件是显示如何使用它的简单示例。

按“调试器”按钮（或CTRL + 3），然后按文件夹图标。

您会看到IE11提供了两个文件进行调试： babylon.gamepads.ts和testgamepad.min.js 。

让我们从回顾babylon.gamepads.ts案例开始。 为什么IE显示它而不是浏览器正在执行的.js版本？

这要归功于源映射机制。 在babylon.gamepads.js文件的末尾，您可以找到以下特定行：

//# sourceMappingURL=babylon.gamepads.js.map

打开“ babylon.gamepads.js.map”以了解其工作原理：

{
    "version": 3,
    "file": "babylon.gamepads.js",
    "sourceRoot": "",
    "sources": [ "babylon.gamepads.ts" ], 
    "names": [ "BABYLON", "BABYLON.Gamepads", ... ]
}

通过阅读此JSON文件，IE11知道它应该将babylon.gamepads.ts映射到babylon.gamepads.js 。 因此，它直接为您提供了调试TypeScript源代码的功能，而不是调试的JS版本。

在IE11 F12控制台中打开babylon.gamepad.ts ，您会看到一些以前可能从未见过的TypeScript语言：

您可以像调试JS代码一样对其进行调试。 即使是浏览器当前正在执行的已编译JavaScript版本。

在第17行上设置一个断点，然后在浏览器窗口中按F5。 您将能够调试构造函数的TypeScript版本：

上至第20行，将鼠标悬停在this并展开以检查gamepadEventSupported是否设置为true：

使用Chrome / Opera

加载同一页面 ，然后在Chrome中按F12或在Opera中按CTRL + SHIFT + I

单击配置图标，并确保启用了Enable JavaScript source maps选项。 它应该默认设置：

Chrome / Opera可让您查看已执行的babylon.gamepads.js代码，但如果尝试在JavaScript版本中设置断点，则不会显示该断点。 它将在映射到此版本的源代码中进行设置： babylon.gamepads.ts 。

例如，尝试在babylon.gamepads.ts JavaScript文件的第18行上设置一个断点，您会看到它将在babylon.gamepads.ts TypeScript文件的第17行上设置：

当然，您也可以直接在TypeScript源代码中设置适当的断点，就像之前在IE11中看到的那样。

在托管我们的演示页面的浏览器窗口中按F5键，您现在就可以调试我的TypeScript代码了。 滚动到第20行，然后将鼠标悬停在this.gamepadEventSupported变量上。 它应该显示为true：

使用Firefox

加载同一页面 ，然后按CTRL + SHIFT + S打开本机调试器（不要使用F12 / Firebug，它不支持源映射）。

检查是否选中了Show Original Sources选项：

像往常一样在第17行上设置一个断点，然后重新加载页面以插入代码。 Firefox不支持将鼠标悬停在原始源上。 上至第20行，并在右侧面板中展开this对象，以检查gamepadEventSupported是否也设置为true。

缩小的JavaScript文件呢？

到目前为止，我们仅使用babylon.gamepads.ts源调试了babylon.gamepads.js代码。 但是，这个缩小的testgamepad.min.js JavaScript文件呢？

第一种解决方案是美化代码。 它适用于IE11 / Chrome / Opera和Firefox。

在IE11中 ，按“漂亮打印”按钮或按CTRL + SHIFT + P：

在Chrome / Opera中 ，按“ {}”按钮：

在Firefox中 ，还请按“ {}”按钮：

这要好得多，但仍不如源映射集好。 为了更进一步，我们刚刚在IE11的8月更新中添加了一个新功能。 即使已将源地图从.js文件中删除，也可以加载它。

想象一下，您想避免其他人使用源地图调试Web应用程序的生产代码，但是您仍然希望能够这样做吗？ 只需从.js文件中删除sourceMappingURL行。

使用Internet Explorer 11，您仍然可以通过加载本地.map和关联的源代码来使用源地图。 为此，右键单击“ testgamepad.min.js”选项卡，然后按“选择源地图”：

在此处下载它们。

将其解压缩到您的首选目录中，并导航到它以选择正确的.map文件：

现在可以再次调试原始源代码：

注意，该选项卡已重命名为testgamepad.ts ，并且在我们显示一些TypeScript时，现在已经键入了第一个变量。

酷吧？

本文是Microsoft的Web开发技术系列的一部分。 我们很高兴与您分享Microsoft Edge及其新的渲染引擎 。 获取免费的虚拟机或者在你的Mac，iOS设备，Android或Windows设备上远程测试modern.IE 。

From: https://www.sitepoint.com/enhance-your-javascript-debugging-with-cross-browser-source-maps/