Debug Widget Providers

When creating or changing the behavior of a Widget, a debugger is a great tool. Widgets comes with a Storybook (opens new window) which is an interactive development environment where you can see your changes to a Widget it real time.

In your Widget project you can run npm run start to start the development server. Once it's done it will open the Storybook in your browser. You can place a breakpoint for the debugger in either Chrome or by using the debugger statement in your code.

When you are running the test suite, you can run it from VS Code (opens new window) and that way you will be able to place breakpoints and inspect your running code directly in your editor. You can run the tests through VS Code by adding the following launch configuration:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Tests",
      "request": "launch",
      "runtimeArgs": [
        "run",
        "test"
      ],
      "runtimeExecutable": "npm",
      "skipFiles": [
        "<node_internals>/**"
      ],
      "type": "pwa-node"
    }
  ]
}

Debugging in a Tenant

If you want to see how a Widget works in a specific Media Group or Tenant, you can link the local version of your Widget to the Media Group and that way you get access to the development version of your Widget. This allows you to see your changes in action before publishing them and give you the opportunity to debug the Widget in the context of a Marfeel Site.

1. First, you need to make sure that your Media Group is using your local version of the Provider. You can do this us using NPM Link (opens new window). To do so:

   In your local repository of the widget you want to debug (i.e. widget-providers-youtube-playlist), run:

   npm link
   

   And, in your Media Group repository, run:

   npm link @marfeel/widget-providers-youtube-playlist
   

2. Compile your widget in development mode. This way you will generate an non minified version which will be easier to place a debugger into:

   In your local repository of the widget run:

   npm run build:dev
   

3. Re-compile scripts in your tenant to get the unminified version of your widget provider.

   In your Media Group repository, run:

   npm run build -- -v react
   

4. Start debugging with Chrome DevTools.