搞定chrome调试时console.log的cjs.js输出问题
2023-12-22 08:56:56
调试 Vue 时消除控制台中的 cjs.js 行号
调试 Vue.js 应用程序时，你可能会遇到一个恼人的问题：在控制台中打印输出时，它总是显示 cjs.js 中的行号，而不是源文件名和行数。这使得调试过程变得非常困难。本文将深入探讨这个问题，并提供详细的解决方案。
问题的原因
这个问题是由 Chrome 中的 "忽略列表" 功能引起的。此功能允许你忽略特定 URL 模式的内容，例如 JavaScript 捆绑文件。当启用 "忽略列表" 时，Chrome 会将 cjs.js 文件添加到忽略列表中，从而导致控制台中显示 cjs.js 的行号，而不是源文件的行号。
解决方案
解决这个问题的办法很简单，只需禁用 "忽略列表" 功能即可：
- 打开 Chrome 浏览器。
- 点击右上角的三个点。
- 选择 "设置"。
- 在搜索栏中输入 "Ignore List"。
- 点击 "忽略内容设置"。
- 找到 "enable Ignore Listing" 并取消勾选。
- 重新启动 Chrome 浏览器。
验证解决方案
重新启动 Chrome 后，在控制台中打印输出，你应该能够看到源文件名和行号。
其他方法
如果你在禁用 "忽略列表" 后仍然无法看到源文件名和行号，可以尝试以下其他方法：
- 确保你使用的是最新的 Chrome 版本。
- 禁用所有扩展程序。
- 重置 Chrome 设置。
向 Chrome 提交错误报告
如果你已经尝试了所有上述方法但仍然无法解决问题，则可以向 Chrome 提交错误报告。
示例代码
为了演示这个问题，请考虑以下 Vue.js 组件：
<template>
<h1>{{ message }}</h1>
</template>
<script>
export default {
data() {
return {
message: 'Hello, world!'
}
}
}
</script>
在 Chrome 控制台中打印 this.message 会显示以下输出：
"Hello, world!" @ cjs.js:16:26
这并不是我们想要的，我们希望看到以下输出：
"Hello, world!" @ App.vue:6:11
常见问题解答
1. 为什么我需要禁用 "忽略列表" 功能？
"忽略列表" 功能会将 cjs.js 文件添加到忽略列表中，从而导致控制台中显示 cjs.js 的行号，而不是源文件的行号。禁用此功能可以让 Chrome 在控制台中显示源文件名和行号。
2. 我需要做什么才能重新启用 "忽略列表" 功能？
要重新启用 "忽略列表" 功能，请按照以下步骤操作：
- 打开 Chrome 浏览器。
- 点击右上角的三个点。
- 选择 "设置"。
- 在搜索栏中输入 "Ignore List"。
- 点击 "忽略内容设置"。
- 找到 "enable Ignore Listing" 并勾选。
3. 我看不到 "enable Ignore Listing" 选项。
"enable Ignore Listing" 选项可能只有在已经将文件添加到忽略列表时才会显示。确保你已经将文件添加到忽略列表中，然后才能看到该选项。
4. 我仍然无法在控制台中看到源文件名和行号。
如果你在禁用 "忽略列表" 后仍然无法看到源文件名和行号，可以尝试其他方法，例如更新 Chrome、禁用扩展程序或重置 Chrome 设置。
5. 为什么 Chrome 要隐藏源文件名和行号？
Chrome 隐藏源文件名和行号是为了提高性能。当 "忽略列表" 功能启用时，Chrome 会将文件添加到忽略列表中，从而告诉 Chrome 不要加载这些文件的内容。这可以提高加载和执行 JavaScript 捆绑文件的速度。
