在前端开发中，经常需要使用 Chrome 的调试工具来进行代码调试。但是在调试过程中，你可能会遇到一些不便的问题，例如：Chrome 调试工具默认展示的是压缩后的代码，难以阅读和调试；或者，调试工具中的源代码显示不够美观等。本文将介绍如何解决这些问题，同时提供一些实用的技巧和建议。
原因分析
Chrome 在默认情况下会对 JavaScript 和 CSS 进行压缩操作，目的是减小文件大小以提高页面加载速度。然而，在调试过程中，我们更希望看到格式化的代码，这样更方便我们查找问题、修改代码等。所以，我们需要通过某些方法来让 Chrome 显示格式化的代码。
解决方案
方案一：使用 Source Map
使用 Source Map 是最简单也是最有效的方法。Source Map 是一个映射文件，它可以将编译后的代码映射回原始的源代码位置。Chrome 调试工具可以通过这个映射文件来展示格式化的源代码。
步骤：
生成 Source Map 文件。在项目打包时，添加 source-map-loader 或者使用 webpack 等构建工具自带的 Source Map 功能，就可以自动生成 Source Map 文件。
开启 Chrome 调试工具中的 Source Map 支持。在 Chrome 的设置中，找到“Sources”选项卡，勾选“Enable JavaScript source maps”和“Enable CSS source maps”。
重新加载页面并打开 Chrome 调试工具。此时，你应该可以看到格式化后的源代码了。
示例代码：
-- -------------------- ---- -------
-- ------- ----
----- ---- - ----------------
-------------- - -
----- -------------
------ -----------------
------- -
--------- ------------
----- ----------------------- --------
--
-------- ------------- -- ----- ------ --- --
--方案二：使用 Prettier
Prettier 是一个非常流行的代码格式化工具。你可以通过它来将你的代码格式化为更加美观、易读的形式。与 Source Map 不同，Prettier 并不能直接将代码格式化后显示在 Chrome 调试工具中，但你可以在编辑器中使用 Prettier 格式化代码，然后再通过调试工具进行调试。
步骤：
在项目中安装 Prettier：
npm install --save-dev prettier。在编辑器中安装 Prettier 插件。大多数编辑器都有相应的插件可用，例如 VS Code 中的 Prettier - Code formatter。
在编辑器中按照 Prettier 的规则格式化代码。
重新加载页面并打开 Chrome 调试工具。此时，你应该可以看到格式化后的源代码了。
示例代码：
// 使用 VS Code 中的 Prettier - Code formatter 插件格式化代码
const add = (a,b) => {
return a+b;
};总结
本文介绍了两种方法来让 Chrome 显示格式化的代码，包括使用 Source Map 和 Prettier 等技术。这些方法都非常实用，可以大大提高我们的开发效率和调试体验。如果你还有其他好的建议或者问题，请在评论区留言，欢迎交流！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/30848