Rider Pro Source Mapping Unavailable

Hi

The Rider Pro theme does not have source mapping setup and it makes it harder to find the source file to set breakpoints for debugging.

Please can you fix?

Thanks

Ben

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (10)

Hi Ben,

Thank you for your feedback.

Could you please clarify what you mean by "source mapping setup"?

Also please specify which version of Rider Pro are you using.

Regards,
Lauris Stepanovs,
Keenthemes Support Team

Hi Lauris

Here's a screenshot of what the source tab contains in Chrome Dev Tools.

https://dsc.cloud/bb2198/Screen-Shot-2022-08-22-at-15.13.55.png

As you can see it's hard to know which source file contains the vue source I need to set breakpoints and debug (and not transpiled source).

I'm using Rider Pro 1.0

Thanks

Ben

Not sure if there should be an exact same src structure as you can see in your code editor.

The best way to debug the Vue application is by installing the Vue devtools chrome extension.
https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg

For a setup you can check the tutorial below:
https://www.digitalocean.com/community/tutorials/how-to-debug-components-state-and-events-with-vue-js-devtools

Regards,
Lauris Stepanovs,
Keenthemes Support Team

What?

Can you explain why I am seeing what I’m seeing please? I didn’t purchase your theme to have to debug your code for you.

Please tell me why your theme when downloaded and unmodified cannot be started locally with the commands I have provided to you.

If an issue is related to our product you do not need to debug it, just report it and we will check it and provide a fix as soon as possible.

Your previous comment in this ticket was related to file structure in a browser, the structure that you see is normal behavior for the Vue application and I can't confirm that it is a bug.

My suggestion here for you was to try a Vue devtools chrome extension which is quite useful for Vue application development and debugging.

Regards,
Lauris Stepanovs,
Keenthemes Support Team

I'm reporting it - see previous replies.

Unless you can tell me why the steps I have outlined aren't a bug then it is a bug.

I'm rapidly losing confidence in this theme as a viable solution.

Am contacting sales now.

Can you please provide the detailed steps, pertinent to your product (not generic vuejs instructions), that result in your downloaded theme displaying the dashboard page in a browser, with the theme source code installed and built in production mode - ie served from dist directory.

Thanks

Hi Ben,

We reproduced your issue, the problem is with publicPath in vue.config.js.

By following the steps you described above we are getting errors in the console and a blank page.

To fix this you need to update publicPath in vue.config.js, command serve -s dist will make a dist folder as a server root folder and there will not be a rider-vue-pro folder inside so the public path must be "/", just update publicPath property and it should resolve the issue.

Regards,
Lauris Stepanovs,
Keenthemes Support Team

Sorry I got this ticket muddled with another one.

Just to recap - I'd like to be able to debug vue component methods (Options API) in chrome tools but the way you currently have your webpack configured means that there are several transpiled source files appearing in the sources tab of devtools. I don't believe the chrome extension helps with that. It's a build config thing. See the screenshot I posted earlier...

Can you offer any suggestions to remediate?

Thanks

Ben

Hi Ben,

We didn't make any custom webpack configuration for our vue project, the project was created with vue-cli, and by default, the source doesn't look like you see it in your code editor, the browser doesn't understand vue or ts files, all of these files are compiled to javascript.

Could you please describe the case that you want to debug?

Regards,
Lauris Stepanovs,
Keenthemes Support Team

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(