Table of contents

1. Console
   1. Logging Messages
      1. Grouping the logs (in the console)
   2. Using console.dir()
   3. Using console table() to output in the form of table */
   4. Examining the time taken for a block of code to execute */
   5. Clear the console
   6. Start a collapsed group
   7. Monitor Events
   8. Get All Events with window
2. Re-Enable Right click

---

Console

• Logging Messages

    console.log ( 'Printing on the console');
    console.error ('Error: Something went wrong' );
    consolewarn( 'No Internet: try again later');
  

• Grouping the logs (in the console)

    console-group();
    console. log( 'logging user status');
    console. log('user logged into the website');
    console. log ('user has visited profile page');
    console. log/'user has just liked a post from
    ... certain page');
    console.groupEnd();
  

• Using console.dir()

    console.dir(Object) ;
    console.dir(Array);
    console.dir(Function);
  

• Using console table() to output in the form of table */

    console.table({ firstName: 'First', lastName: 'Last' }) ;
  

• Examining the time taken for a block of code to execute */

    console.time( 'loopExaminer');
    for ( leti = 0; i <= 9999999; i++ ) (0)
    console.timeEnd('loopExaminer');
  

• Clear the console

    console.clear();
  

• Start a collapsed group

    console.groupCollapsed( "Website Performance stats");
    console.log( 'Animation started');
    console.log( 'Animation running smoothly since 9:00 AM');
    console.groupEnd ();
  

Monitor Events

1. Inspect your element (right mouse click → Inspect on a visible element or go to Elements tab in Chrome Developer Tools and select wanted element)
   then go to Console tab and write:

       monitorEvents($0)
   

2. Now when you move mouse over this element, focus or click it, the name of the fired event will be displayed with its data.
   To stop getting this data, just write this to console:

   unmonitorEvents($0)

$0 is just the last DOM element selected by Chrome Developer Tools.

• monitor all events

    monitorEvents(document.body, 'mouse')
  

Get All Events with window

window.getEventListeners(window);
// or for a specific element
window.getEventListeners(document.body);

Re-Enable Right click

function enableContextMenu(aggressive = true) {
    void (document.ondragstart = null);
    void (document.onselectstart = null);
    void (document.onclick = null);
    void (document.onmousedown = null);
    void (document.onmouseup = null);
    void (document.body.oncontextmenu = null);
    enableRightClickLight(document);
    if (aggressive) {
        enableRightClick(document);
        removeContextMenuOnAll("body");
        removeContextMenuOnAll("img");
        removeContextMenuOnAll("td");
    }
}

function removeContextMenuOnAll(tagName) {
    let elements = document.getElementsByTagName(tagName);
    for (let i = 0; i < elements.length; i++) {
        enableRightClick(elements[i]);
    }
}

function enableRightClickLight(el) {
    el || (el = document);
    el.addEventListener("contextmenu", bringBackDefault, true);
}

function enableRightClick(el) {
    el || (el = document);
    el.addEventListener("contextmenu", bringBackDefault, true);
    el.addEventListener("dragstart", bringBackDefault, true);
    el.addEventListener("selectstart", bringBackDefault, true);
    el.addEventListener("click", bringBackDefault, true);
    el.addEventListener("mousedown", bringBackDefault, true);
    el.addEventListener("mouseup", bringBackDefault, true);
}

function restoreRightClick(el) {
    el || (el = document);
    el.removeEventListener("contextmenu", bringBackDefault, true);
    el.removeEventListener("dragstart", bringBackDefault, true);
    el.removeEventListener("selectstart", bringBackDefault, true);
    el.removeEventListener("click", bringBackDefault, true);
    el.removeEventListener("mousedown", bringBackDefault, true);
    el.removeEventListener("mouseup", bringBackDefault, true);
}

function bringBackDefault(event) {
    event.returnValue = true;
    typeof event.stopPropagation === "function" && event.stopPropagation();
    typeof event.cancelBubble === "function" && event.cancelBubble();
}

enableContextMenu();

$(document).unbind();

javascript: function enableContextMenu(aggressive = true) {
    void (document.ondragstart = null);
    void (document.onselectstart = null);
    void (document.onclick = null);
    void (document.onmousedown = null);
    void (document.onmouseup = null);
    void (document.body.oncontextmenu = null);
    enableRightClickLight(document);
    if (aggressive) {
        enableRightClick(document);
        removeContextMenuOnAll("body");
        removeContextMenuOnAll("img");
        removeContextMenuOnAll("td");
    }
}

function removeContextMenuOnAll(tagName) {
    let elements = document.getElementsByTagName(tagName);
    for (let i = 0; i < elements.length; i++) {
        enableRightClick(elements[i]);
        enablePointerEvents(elements[i]);
    }
}

function enableRightClickLight(el) {
    el || (el = document);
    el.addEventListener("contextmenu", bringBackDefault, true);
}

function enableRightClick(el) {
    el || (el = document);
    el.addEventListener("contextmenu", bringBackDefault, true);
    el.addEventListener("dragstart", bringBackDefault, true);
    el.addEventListener("selectstart", bringBackDefault, true);
    el.addEventListener("click", bringBackDefault, true);
    el.addEventListener("mousedown", bringBackDefault, true);
    el.addEventListener("mouseup", bringBackDefault, true);
}

function restoreRightClick(el) {
    el || (el = document);
    el.removeEventListener("contextmenu", bringBackDefault, true);
    el.removeEventListener("dragstart", bringBackDefault, true);
    el.removeEventListener("selectstart", bringBackDefault, true);
    el.removeEventListener("click", bringBackDefault, true);
    el.removeEventListener("mousedown", bringBackDefault, true);
    el.removeEventListener("mouseup", bringBackDefault, true);
}

function bringBackDefault(event) {
    event.returnValue = true;
    typeof event.stopPropagation === "function" && event.stopPropagation();
    typeof event.cancelBubble === "function" && event.cancelBubble();
}

function enablePointerEvents(el) {
    if (!el) return;
    el.style.pointerEvents = "auto";
    el.style.webkitTouchCallout = "default";
    el.style.webkitUserSelect = "auto";
    el.style.MozUserSelect = "auto";
    el.style.msUserSelect = "auto";
    el.style.userSelect = "auto";
    enablePointerEvents(el.parentElement);
}

enableContextMenu();