angulargoogle-chrome-console

How to enable to use underscore in console in Chrome developer tool?


I'm using Angular2 and underscore,

import * as _ from 'underscore';

and I want to use the underscore library in Chrome console window too. Even I do break on a middle of the code, and try to use , but I got ' is not defined' error.

Is it possible I can use the underscore in Chrome console window? how?


Solution

  • You can simply do it by adding underscore.js script onto the head of your page:

    1) Go to Chrome Console of the page you wish to debug.

    2) Run this script to import underscorejs so that the console starts recognizing _ commands:

    var s = document.createElement('script'); 
    s.type = 'text/javascript';
    s.src = 'https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js';
    document.head.appendChild(s);
    

    Alternatively, you can save such import script code inside a snippet for further usage:

    Go to source tab, select snippet sub-tab, click on + to add a new snippet, then add the following code and save:

    (function () {
      if (typeof window._ === 'undefined') {    
        var s = document.createElement('script');
        s.type = 'text/javascript';
        s.src = 'https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js';
        document.head.appendChild(s);
      }
    }());
    

    This way, whenever you need to debug a page using an external library, you can simply add it by running its correspondent snippet!