VConsole代理原生console方法，原始代码行数丢失？别担心，这里有几种解决方法！

VConsole是一款功能强大的JavaScript调试工具，它可以让你在浏览器中查看各种信息，包括控制台日志、网络请求和页面性能等。VConsole还可以代理原生console方法，这意味着你可以使用VConsole来记录和查看控制台日志，而无需使用浏览器的内置控制台。

但是，VConsole代理原生console方法有一个缺点，那就是它会导致在Chrome Devtools无法查看原始代码的行数。这使得调试变得困难，因为你无法看到代码中出现错误的具体位置。

为了解决这个问题，你可以使用以下几种方法：

1. 使用console.dir()方法

console.dir()方法可以将一个对象的所有属性和方法都输出到控制台。你可以使用这个方法来输出当前代码所在的文件名和行号。

```javascript
console.dir({
  fileName: __filename,
  lineNumber: __line
});

2. 使用没有代理过的其他方法

除了VConsole之外，还有一些其他方法可以让你记录和查看控制台日志，而不必使用浏览器的内置控制台。这些方法包括：

• console.log()
• console.info()
• console.warn()
• console.error()

你可以在代码中使用这些方法来记录控制台日志，然后在Chrome Devtools中查看这些日志。

3. 使用源映射

源映射是一种可以将编译后的代码映射回原始代码的技术。如果你使用了源映射，那么你就可以在Chrome Devtools中看到原始代码的行数，即使你使用了VConsole代理原生console方法。

要使用源映射，你需要在你的项目中配置webpack或其他构建工具。配置完成后，你就可以在Chrome Devtools中看到原始代码的行数了。

4. 使用断点

断点是一种可以让你在代码中设置标记的工具。当你运行代码时，如果执行流到达断点，那么代码就会暂停执行。这可以让你检查变量的值和代码的执行流程。

你可以在Chrome Devtools中设置断点。要设置断点，你只需要在代码行号前点击鼠标即可。

5. 使用VConsole的自定义日志

VConsole允许你自定义日志的格式。你可以使用这个功能来添加额外的信息到控制台日志中，包括文件名和行号。

要自定义日志的格式，你需要在你的项目中安装VConsole并配置它。配置完成后，你就可以在Chrome Devtools中看到带有文件名和行号的控制台日志了。

以上就是解决VConsole代理原生console方法，导致原始代码行数丢失问题的几种方法。你可以根据自己的需要选择合适的方法来解决这个问题。