Похоже, что скомпилированные функции рендеринга можно найти в дереве исходников в папке . в 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, используя После этого вы можете найти файл в дереве исходных кодов, используя 'Показать в боковой панели' :
