怎么看JS被编译之后的

要查看JS被编译之后的代码，可以使用开发者工具、Source Maps、反编译工具。这些工具和技术可以帮助开发者深入了解JavaScript代码的执行和优化过程。以下是详细描述：

开发者工具通常是首选的方法。现代浏览器如Chrome、Firefox和Edge都提供了强大的开发者工具，允许开发者实时查看和调试被编译后的JavaScript代码。具体步骤包括打开开发者工具，导航到“Sources”或“Debugger”面板，然后查找并查看编译后的代码。这些工具还支持设置断点、观察变量和执行流等功能，极大地方便了调试和优化工作。

一、开发者工具

1、Chrome DevTools

Chrome DevTools是Google Chrome浏览器内置的一套开发者工具，提供了查看、调试和分析页面资源的功能。对于JavaScript代码，DevTools可以展示编译后的代码，并且可以设置断点、单步执行、查看变量等。

如何使用Chrome DevTools查看编译后的JavaScript代码：

打开开发者工具：在Chrome浏览器中，按下 Ctrl+Shift+I 或者右键点击页面并选择“检查”。
导航到“Sources”面板：在打开的开发者工具窗口中，点击“Sources”标签。
查找编译后的代码：在左侧文件树中，找到你要查看的JavaScript文件。点击文件名，右侧就会显示代码内容。
设置断点和调试：你可以在代码行号处点击设置断点，然后刷新页面或执行相关操作，代码会在断点处暂停，便于你查看和调试。

2、Firefox Developer Tools

Firefox浏览器也提供了类似的开发者工具，功能和使用方法与Chrome DevTools相似。

如何使用Firefox Developer Tools查看编译后的JavaScript代码：

打开开发者工具：在Firefox浏览器中，按下 Ctrl+Shift+I 或者右键点击页面并选择“检查元素”。
导航到“Debugger”面板：在打开的开发者工具窗口中，点击“Debugger”标签。
查找编译后的代码：在左侧文件树中，找到你要查看的JavaScript文件。点击文件名，右侧就会显示代码内容。
设置断点和调试：你可以在代码行号处点击设置断点，然后刷新页面或执行相关操作，代码会在断点处暂停，便于你查看和调试。

3、Edge DevTools

Microsoft Edge浏览器的开发者工具与Chrome DevTools非常相似，因为它们基于相同的Chromium内核。

如何使用Edge DevTools查看编译后的JavaScript代码：

打开开发者工具：在Edge浏览器中，按下 Ctrl+Shift+I 或者右键点击页面并选择“检查”。
导航到“Sources”面板：在打开的开发者工具窗口中，点击“Sources”标签。
查找编译后的代码：在左侧文件树中，找到你要查看的JavaScript文件。点击文件名，右侧就会显示代码内容。
设置断点和调试：你可以在代码行号处点击设置断点，然后刷新页面或执行相关操作，代码会在断点处暂停，便于你查看和调试。

二、Source Maps

Source Maps是一种将编译后代码映射回源代码的技术，使得开发者可以在开发者工具中看到未编译的源代码，即使实际运行的是编译后的代码。

1、Source Maps的工作原理

Source Maps文件通常是一个JSON文件，其中包含了编译后代码与源代码之间的映射关系。浏览器开发者工具会读取这个文件，并将编译后的代码映射回源代码，从而在调试时显示源代码，而不是编译后的代码。

2、如何使用Source Maps

生成Source Maps：在构建过程中，配置构建工具（如Webpack、Babel、TypeScript等）生成Source Maps文件。例如，在Webpack中，可以在配置文件中添加 devtool: 'source-map'。
加载Source Maps：当页面加载时，浏览器会自动加载并解析Source Maps文件。确保Source Maps文件与编译后的JavaScript文件在同一目录下，或者通过 //# sourceMappingURL=... 注释指定路径。
在开发者工具中查看源代码：打开开发者工具，导航到“Sources”或“Debugger”面板，你会看到源代码文件。设置断点和调试时，显示的是源代码，而不是编译后的代码。

三、反编译工具

在某些情况下，开发者可能没有Source Maps文件，但仍然需要查看编译后的代码。这时可以使用反编译工具，将编译后的代码转换回可读的形式。

1、JavaScript反编译工具

有一些在线和离线工具可以用于反编译JavaScript代码。这些工具会尝试将编译后的代码转换回尽可能接近源代码的形式。

常用的JavaScript反编译工具：

JSBeautifier：这是一个在线工具，可以格式化和美化JavaScript代码，使其更易读。虽然它不能完全恢复源代码，但可以帮助开发者理解代码逻辑。
UglifyJS：这是一个JavaScript压缩工具，也可以用于反编译压缩后的代码。使用 uglifyjs --beautify 命令，可以将压缩代码格式化为可读形式。
Decompiler.com：这是另一个在线反编译工具，支持多种编程语言，包括JavaScript。上传编译后的文件，工具会尝试反编译并显示可读代码。

2、使用反编译工具的注意事项

反编译工具的效果通常有限，尤其是对于高度混淆和压缩的代码。以下是一些使用反编译工具的注意事项：

理解局限性：反编译工具不能恢复所有源代码信息，尤其是变量名和注释等信息会丢失。
合法使用：确保反编译行为符合法律规定和使用条款。反编译他人代码可能涉及版权和知识产权问题。
结合其他工具：反编译工具通常与开发者工具和Source Maps结合使用效果最佳。通过多种手段，开发者可以更全面地理解编译后的代码。

四、调试与优化

查看编译后的JavaScript代码，主要目的是调试和优化代码。以下是一些调试和优化的技巧和最佳实践。

1、设置断点和单步执行

在开发者工具中设置断点，能够在代码执行到指定位置时暂停。通过单步执行，开发者可以逐行查看代码执行过程，检查变量值和程序状态。

如何设置断点和单步执行：

设置断点：在开发者工具中，点击代码行号处即可设置断点。断点设置后，代码执行到该行时会暂停。
单步执行：在代码暂停时，使用“单步执行”按钮（通常是一个向右箭头图标）逐行执行代码。观察变量值和程序状态，查找问题所在。

2、使用控制台输出

控制台是开发者工具中的另一个重要功能，通过 console.log 等方法，开发者可以在代码中输出调试信息，帮助理解程序执行过程。

常用的控制台方法：

console.log：输出一般信息，如变量值、执行状态等。
console.error：输出错误信息，通常用于捕获和显示异常。
console.warn：输出警告信息，提示潜在问题。
console.table：以表格形式输出数组或对象，便于查看和比较数据。

3、性能分析

开发者工具还提供了性能分析功能，可以帮助开发者识别和优化性能瓶颈。

如何进行性能分析：

打开性能分析面板：在开发者工具中，点击“Performance”或“Profiler”标签。
开始录制：点击“Start”按钮，进行性能录制。执行页面操作，捕获性能数据。
停止录制：点击“Stop”按钮，停止性能录制。工具会生成性能报告，显示页面加载时间、函数调用时间等信息。
分析报告：查看性能报告，识别耗时较长的函数和操作。优化代码，减少性能瓶颈。

五、自动化测试

为了确保代码质量和稳定性，开发者通常会编写自动化测试。自动化测试可以在代码每次变更时自动运行，检测潜在问题。

1、单元测试

单元测试是针对代码最小可测试单元（通常是函数或方法）的测试。通过编写单元测试，开发者可以确保每个函数或方法按预期工作。

常用的单元测试框架：

Jest：一个强大的JavaScript测试框架，支持断言、模拟、异步测试等功能。
Mocha：一个灵活的JavaScript测试框架，支持多种断言库（如Chai）。
Jasmine：一个行为驱动开发（BDD）风格的测试框架，提供丰富的断言和模拟功能。

2、集成测试

集成测试是针对多个模块或组件之间交互的测试。通过编写集成测试，开发者可以确保模块或组件之间的协同工作。

常用的集成测试工具：

Selenium：一个广泛使用的自动化测试工具，支持多种浏览器和编程语言。
Cypress：一个现代的前端测试工具，支持端到端测试、集成测试和单元测试。
TestCafe：一个易于使用的端到端测试工具，支持多种浏览器和平台。

3、持续集成

持续集成（CI）是一种软件开发实践，通过自动化构建和测试，确保代码在每次变更后都能正确构建和运行。

常用的持续集成工具：

Jenkins：一个开源的自动化服务器，支持构建、部署和自动化测试。
Travis CI：一个基于云的持续集成服务，支持多种编程语言和平台。
CircleCI：一个现代的持续集成和持续部署平台，支持快速构建、测试和部署。

通过使用开发者工具、Source Maps、反编译工具和自动化测试，开发者可以深入了解JavaScript代码的执行和优化过程，确保代码质量和性能。开发者工具和Source Maps是查看编译后代码的主要方法，而反编译工具则在没有Source Maps文件时提供了另一种选择。结合自动化测试和持续集成，开发者可以在代码每次变更时自动运行测试，确保代码的稳定性和可靠性。