Debug locally - Chrome Debug Tools

dev
1

Hello :slight_smile:

Could you please share some instructions on how to debug this locally?

I have set up the environment per instructions on Read-me file, however when I try to set my own Catalog of Products to this I could not get it to work; the browser goes into infinite loop trying to fetch no-image.svg, but I cannot get a reference to the Code line that is broken, as I could only use yarn compress to get the environment to work with my Storefront. yarn dev runs its own server on localhost:3000, but I don’t know how to use this with Storefront on localhost:2083

Must I use a specific Catalog?

Any help or instructions on how to debug the actual VUE code would be great.

Thanks,
Sherif

2

Hi, Sherif!
I see, you have 2 questions in one:

  1. Infinite loop trying to fetch an incorrect file
  2. Issues having the devtools working with the Storefront

What’s about the 1st question
After checking what’s can be wrong I can recommend to reproduce the development flow step by step:

  1. Clone the vc-storefront repository
  2. Switch to the dev branch
  3. Change the appsettings.json to setup your DefaultStore and Endpoint
  4. Clone the vue-starter-theme repository
  5. Switch to the dev branch
  6. Make a symlink to attach your theme to the storefront
  7. Run yarn within the vue-starter-theme to install all the dependencies
  8. Run yarn build there to build the production artifacts
  9. Open the vc-storefront solution using the Visual Studio
  10. Run IIS Express and wait until the browser window opens

After these steps you should have the assets folder in the root of the vue-starter-theme with all of the images needed to be rendered. And your debug session should start without any errors.

We have an issue some time ago about those images - the actual dev branch contains a workaround. Please, check that your images are correctly bundled into the assets/static/images subfolder after the yarn build command.

Consider that you should run yarn build every time before starting the IIS Express session to be sure that the latest bundle is served.

And what’s about the 2nd question
There is 2 different ways of development: using an independent server (localhost:3000) and the Storefront bundle (localhost:2083). Storefront bundle is not something about the development - it’s probably something about pre-production testing.

We recommend you to develop using the yarn dev command. To use it with your own local storefront and the catalog please, make the APP_BACKEND_URL in your .env file point to your local storefront (ex.: http://localhost:2083). Then you’ll be able to use all the development features - hot reload, vue devtools, realtime debugging with unobfuscated code, etc.

3 Likes