Allows debugging local sources of PnP JS Core right in TypeScript with live requests to SharePoint environment in Node.js.

• Node.js
• TypeScript
• TSLint
• Gulp

npm install typescript tslint ts-node gulp -g

• PnP JS Core
• PnP JS Core Debug

Projects' folders should be located in the same root folder.

git clone https://github.com/[namespace]/PnP-JS-Core git clone https://github.com/[namespace]/PnP-JS-Core-Debug

[namespace] stands for you or your company GitHub account.

Dependencies should be restored in both projects' folders:

npm install

or

yarn install

Open both projects in VS Code. Workspaces are the best option here.

Add upstream for PnP JS Core (one-time operation). In PnP JS Core's folder:

git remote add upstream https://github.com/SharePoint/PnP-JS-Core

This will allow syncing your repository sources with main repo with:

git pull upstream dev

It's recommended using feature branches for code changes related to a specific feature or bug fix.

Before creating a feature branch make sure:

• A feature branch is based on PnP JS Core dev branch.
• The local branch is synced with remote upstream branch (this can be done with feature branch too).

git checkout dev git fetch upstream dev git checkout -b [name_of_your_new_branch]

It's better to prefix feature branch with dev-.

On first run SharePoint environment connection should be initiated:

npm run init

You'll be prompted with SharePoint web URL and credentials, just follow the wizard:

Read more about supported auth scenarios.

Connection is saved to config files which are better to exclude from a git repository. By default config path is ./config/private.json. Passwords in configs are stored in an encrypted way.

Config sample:

{ "siteUrl": "https://contoso.sharepoint.com/sites/dev-a", "strategy": "UserCredentials", "username": "andrew.koltyakov@contoso.onmicrosoft.com", "password": "bcccd4e6025...ZH+ZY5X2A==" }

Now you can apply changes to PnP JS Core project sources (your local copy). Follow Getting Started: Contribute wiki page's instructions.

In PnP-JS-Core-Debug/runners project's folder create a .ts file.

Wrap file with:

import { Web } from './../../PnP-JS-Core/src/pnp'; import { initEnvironment as init } from './../utils/pnpnode'; import './../utils/setup'; init().then(async settings => { let web = new Web(settings.siteUrl); // executing methods to test }).catch(console.log);

Place debug break points in PnP JS Core .ts sources or your custom code. Open a runner which executes logic to test and start a debugger for the current file.

Now all the power of VS Code debugger is our oyster!