SharePoint Developers vs Browser Console

This article explains how to use a browser’s console as a developer tool for SharePoint client scripting.

Nowadays, the browser comes with a lot of tools and provides many features. In the same way the browser’s developer console opens a lot of feasibility to developers through debugging, validating the scripts, and handling the script errors. In the same manner we can also run the client side script in browser console to achieve our goal instead of creating/building a separate application.

In general we can use any browser’s developer console for running the JavaScript and get whatever output we want. But in this article I’m going to explain to you how to use the developer console as a developer tool instead using external application to achieve our instant requirement without following cumbersome methods.

For example: 

If we want to retrieve the hidden lists in SharePoint site, normally we will do some coding (server side or client side) stuff in Visual Studio or SharePoint Designer (by putting JSOM code in html file) to get those details.

The easiest and fastest way is to use the client side script in browser’s console to get those details. Paste the below code in any browser console in a developer tool,

  1. function gethiddenLists()   
  2. {  
  3.     var clientContext = SP.ClientContext.get_current();  
  4.     oLists = clientContext.get_web().get_lists();  
  5.     clientContext.load(oLists);  
  6.     clientContext.executeQueryAsync(  
  7.         function.createDelegate(this, function()  
  8.         {  
  9.             var listsInfo = '';  
  10.             var listsEnumerator = oLists.getEnumerator();  
  11.   
  12.             while (listsEnumerator.moveNext())  
  13.             {  
  14.                 var oList = listsEnumerator.get_current();  
  15.                 if (oList.get_hidden() == true)  
  16.                     listsInfo += '\n' + 'List Title: ' + oList.get_title();  
  17.             }  
  18.             console.log(listsInfo.toString());  
  19.         }),  
  20.         function.createDelegate(this, function()  
  21.         {  
  22.             console.log('failed');  
  23.         }));  
  24. }  

new

Then call gethiddenLists() function in next line and retrieve the result.

code

The benefits of using this approach are:
  • Decreases the time consumed in creating code in separate application.
  • Fastest way in debugging the client side script.
  • Easiest way in validating the script.
  • Increases our client side coding skills in a short period of time.
  • We can also call REST API using scripts.
  • And a whole lot more.
Read more articles on SharePoint: