Pitcher JavaScript Platform

# Debugging on Windows

Debugging a JavaScript application on Windows relies on attaching a debugger to Pitcher Impact and inspecting the application inside the WebView.

# Installation

  1. Download Visual Studio 2015 or 2017 community editions
  2. Select ASP.NET and web development package when installing

Either attach the application in Visual Studio for the JavaScript console and DOM explorer or add VorlonJS to your index.html.

# How to debug Impact on Visual Studio 2015/2017

As a first step, we need to start Pitcher Impact with the debugger attached.

# 1. Attach

  1. Open Visual Studio
  2. Click on the Top menu => Debug => Other Debug Targets => Debug Installed App Package debug-installed-app-package
  3. Search for Pitcher Impact and click on the result (should be under Running result set)
  4. On list Debug this code type: select Script Only debug-script-only
  5. Click button Attach, the debugger is now attached to Pitcher Impact. debug-script-open

# 2. Debug

  1. DOM Explorer: click vs Top menu Debug => Windows => DOM explorer => Show All
  2. JS console: click vs Top menu Debug => Windows => JavaScript Console
  3. The Vue app is located inside one of the index.html
  4. Use DOM element highlighting button (up left corner into DOM explorer tabs)
  5. Use Select element button (up left corner into DOM explorer tabs)

After attaching the debugger you have multiple options to follow.

# Option 1: Using the pitcher-watcher

Pitcher Watcher is a node.js-based CLI tool for both iOS and Windows environments, that automates the process of copying files from the project's source directory to the interactive/ui folder under /Pitcher Folders/. You can find more information about it in the docs (opens new window).

# Option 2: Build & Replace files in Windows

This option consists of building your project on macOS side and replacing the application files on the Windows side.

# Temporarily disable webpack production build features

If you are building your project using webpack, then the production build's files are minified and concatenated. In that case, it would be useful to disable these features temporarily so that debugging becomes easier. In order to do that put the following in your webpack configuration file:

vue.config.js

configureWebpack: {
  optimization: {
    minimize: false,
    splitChunks: {
      minSize: 10000,
      maxSize: 250000
    }
  }
}

NOTE

Make sure you remove these additions from your webpack config once you finish debugging

# Build and copy files to Windows

  1. Make sure you have attached debugger to Impact
  2. Build your project with npm run build
  3. Copy files from dist folder
  4. Find the folder on Windows side under C:\Users\USER_NAME\AppData\Local\Packages\VayenSolutionsGmbH.PitcherImpact_**\LocalState\zip\FILE_ID
  5. Replace the files inside this folder with the ones you have copied at step 2
  6. Refresh the WebView in Impact
  7. Check JavaScript console in Visual Studio for errors/warnings etc.

# Automating the copy process

You can automate the copy process above, using the following:

In your project's package.json file:

"scripts": {
  ...
  "windows:watch": "NODE_ENV=development vue-cli-service build --watch --mode development",
}

In your Windows environment:

  • Delete the FILE_ID folder from the %USERPROFILE%\AppData\Local\Packages\VayenSolutionsGmbH.PitcherImpact_**\LocalState\zip\ folder
  • Create a symbolic link to the project's dist folder. Make sure you replace FILE_ID with the folder of the Windows site. mklink /D FILE_ID \\Mac\Home\src\project-name\dist (in this case project-name is checked out in ~\src\project-name - adjust accordingly)
  • Run npm run windows:watch in the project's folder on your Mac

# More automation - Using batch file

  • Download symlink.bat
  • Run it as Administrator on Win10
  • Set inputs
    • Set Document Id (FILE_ID)
    • Set Mac app repo folder path
  • Run npm run windows:watch in the project's folder on your Mac

Optionally edit the file and set the default values of your preference

WARNING

Make sure that Mac home folder is enabled for sharing. To do so, click on the "Actions" menu item in the parallels (windows) top bar. Then select Configure... The following windows should appear. In "share mac" tab, change the "share folders" value to "home folder only"

debug-parallel-sharing-settings

← Android →