Sometimes we would like to test some code or look at the response we will get from the SharePoint tenant to aid us to write our code.

It would’t be prudent to write a whole application just to see the response format from a single REST call.

So wouldn’t it be great if we could just open our browser, log in to our SharePoint site, and use the browser to do our testing?

If you are familiar with PnP JS, then today I will show you how to do exactly that.

To get started, you will need to install a SharePoint proxy and have it running. Once that is done, follow these steps to use PnP JS in the browser.

1. Open your developer console and select the sources tab

2. From the left navigation, select the >> and select Snippet

3. Click on add a snippet button, then name your file

4. Past the below code. Credit to the koltyakov

(() => {
    /**
     * This part is only for testing simplification from a random page.
     * Loads pnp global shim from CDN.
     * ES6 imports works as well. $pnp stands for global shim object.
     */
    if (typeof $pnp === 'undefined') {
        let s = document.createElement('script');
        s.type = 'text/javascript';
        s.src = 'https://cdnjs.cloudflare.com/ajax/libs/sp-pnp-js/3.0.10/pnp.min.js';
        document.head.appendChild(s);
    }

    const waitFor = (cond, cb) => {
        if (!cond()) {
            setTimeout(() => waitFor(obj, cb), 100);
        } else {
            if (cb && typeof cb === 'function') {
                cb();
            }
        }
    };

    waitFor(() => typeof $pnp !== 'undefined', () => {
        // sp-rest-proxy's url for a dev project
        const proxyUrl = 'http://localhost:8080';
        // _spPageContextInfo should be mimiced on locally served page
        if (typeof _spPageContextInfo === 'undefined') {
            _spPageContextInfo = {};
            _spPageContextInfo.webServerRelativeUrl = '/sites/site/web'; // Provide a web's relative URL
            _spPageContextInfo.webAbsoluteUrl = `${proxyUrl}${_spPageContextInfo.webServerRelativeUrl}`;
        }

       //PnP JS Core setup
       $pnp.setup({
           sp: {
               headers: {
                   Accept: 'application/json;odata=verbose;'
               }
           }
           // `baseUrl` with `_spPageContextInfo.webAbsoluteUrl` can be used
            // or strict Web object creation as shown below
       });
        //Create new Web object with `webAbsoluteUrl` to proxy
        let web = new $pnp.Web(_spPageContextInfo.webAbsoluteUrl);

        // Using POST method to create an item as example
        
  web.getList(`${_spPageContextInfo.webServerRelativeUrl}/Lists/CustomList`)
            .items.add({
                Title: 'New Item'
            }).then(console.log);
    });

})();

Now you can test your PnP SharePoint code in the browser.