如何让 Chrome 调试工具显示格式化的代码？

在前端开发中，经常需要使用 Chrome 的调试工具来进行代码调试。但是在调试过程中，你可能会遇到一些不便的问题，例如：Chrome 调试工具默认展示的是压缩后的代码，难以阅读和调试；或者，调试工具中的源代码显示不够美观等。本文将介绍如何解决这些问题，同时提供一些实用的技巧和建议。

原因分析

Chrome 在默认情况下会对 JavaScript 和 CSS 进行压缩操作，目的是减小文件大小以提高页面加载速度。然而，在调试过程中，我们更希望看到格式化的代码，这样更方便我们查找问题、修改代码等。所以，我们需要通过某些方法来让 Chrome 显示格式化的代码。

解决方案

方案一：使用 Source Map

使用 Source Map 是最简单也是最有效的方法。Source Map 是一个映射文件，它可以将编译后的代码映射回原始的源代码位置。Chrome 调试工具可以通过这个映射文件来展示格式化的源代码。

步骤：

  1. 生成 Source Map 文件。在项目打包时，添加 source-map-loader 或者使用 webpack 等构建工具自带的 Source Map 功能，就可以自动生成 Source Map 文件。

  2. 开启 Chrome 调试工具中的 Source Map 支持。在 Chrome 的设置中，找到“Sources”选项卡，勾选“Enable JavaScript source maps”和“Enable CSS source maps”。

  3. 重新加载页面并打开 Chrome 调试工具。此时，你应该可以看到格式化后的源代码了。

示例代码：

-- ------- ----
----- ---- - ----------------

-------------- - -
  ----- -------------
  ------ -----------------
  ------- -
    --------- ------------
    ----- ----------------------- --------
  --
  -------- ------------- -- ----- ------ --- --
--

方案二：使用 Prettier

Prettier 是一个非常流行的代码格式化工具。你可以通过它来将你的代码格式化为更加美观、易读的形式。与 Source Map 不同，Prettier 并不能直接将代码格式化后显示在 Chrome 调试工具中，但你可以在编辑器中使用 Prettier 格式化代码，然后再通过调试工具进行调试。

步骤：

  1. 在项目中安装 Prettier：npm install --save-dev prettier。

  2. 在编辑器中安装 Prettier 插件。大多数编辑器都有相应的插件可用，例如 VS Code 中的 Prettier - Code formatter。

  3. 在编辑器中按照 Prettier 的规则格式化代码。

  4. 重新加载页面并打开 Chrome 调试工具。此时，你应该可以看到格式化后的源代码了。

示例代码：

-- -- -- ---- -- -------- - ---- --------- -------
----- --- - ----- -- -
  ------ ----
--

总结

本文介绍了两种方法来让 Chrome 显示格式化的代码，包括使用 Source Map 和 Prettier 等技术。这些方法都非常实用，可以大大提高我们的开发效率和调试体验。如果你还有其他好的建议或者问题，请在评论区留言，欢迎交流！

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/30848

阅读全文

精选内容

相关推荐

    暂无