我在哪里可以检查Vue.js生成的渲染函数？

Question

一个异常断点曾经使我进入由Vue模板编译器为我的Vue组件之一生成的呈现函数。

这让我很惊讶，因为<< [嘿，我现在知道了这个模板系统是如何工作的！，但是我没有注意webpack树中的位置。

现在，我想检查其他组件的代码，并可能在各处设置断点，但是当我在浏览器调试器窗格中浏览活动的javascript源时，找不到任何此生成的代码。

Answer 1

看起来好像可以在.的webpack://文件夹下的源代码树中找到编译的渲染函数。但是，找到正确的文件可能有些棘手，因为每个.vue文件都有多个文件。其他文件将包含组件的其他位。包含render功能的文件在您找到时应该很明显，应该以var render = function() {开始。例如，在我的一个测试应用程序中，我可以在render看到app.vue的webpack:///./src/app.vue?91e4函数，尽管最后一部分会有所不同。

如果要为自己的组件插入断点，则可以通过一种方法来潜入它。这也是找到正确文件的快速方法。

在模板中，调用方法，我称它为breakpoint：

{{ breakpoint() }}

然后使用方法：
breakpoint () {
  debugger
  return ''
}

然后您可以在堆栈中上移，以查看已编译的render函数。
当然，您不必为此使用debugger语句。您可以使用一种合适的方法设置浏览器断点（如果不存在，则引入一个断点）。只要在模板中调用该方法，它就应该使您可以访问已编译的render函数。
要以这种方式设置断点，您只需要导航到源代码树的.vue部分中的相关webpack://文件。通常可以直接在webpack://标题下找到该文件。
更新：
一旦使用断点找到包含render函数的文件，您就可以使用
'在侧边栏中显示'在源代码树中找到该文件：] >>