[Vuejs]-Vue js Page View Source not readable

by

1đź‘Ť

The “View Page Source” feature of web browsers only displays the source of the HTML document it received from the server. Single Page Apps (SPAs) use JavaScript heavily to modify the DOM way beyond what little contents the HTML document had initially.

I’m not aware of any feature to display the “rendered” page source except for the following:

  • Open the dev tools and use the Inspector to view the current state of the DOM tree. From here you can copy the outer HTML of the <html> element to the clipboard if you want to extract it.
  • There is a View Rendered Source Chrome extension that looks to do what you want (untested).
👤Decade Moon

0đź‘Ť

Try using nuxt, which serves readable html files when building and serving vue apps. You can as well install vue devtools for web browser then just click Ctrl+Shift+J and select Vue. It’s worth to mention that vue devtools works only on dev server.

👤kapsztat12

Leave a comment