How to re-enable right click so that I can inspect HTML elements in Chrome?

Question

I am looking at a web page which has overwritten the right-click button so to display its own popup HTML element.

This prevents me from using Chrome Developer Tools to inspect elements.

Does anybody know a JavaScript snippet I could inject from the Chrome Console to re-enable the right-click?

I am okay to break the existing 'right-click' functionality, so to be able to inspect the HTML elements easily.

if you use firebug for firefox you can still highlight elements with the mouse... I know it means using Firefox but it might be helpful. — Joshua Smickus, Jan 24 '14 at 14:31
@Teemu Firebug Lite is available on Chrome. Not sure why you'd need to use it over the default tools though. — James Donnelly, Jan 24 '14 at 14:35
@JoshSmickus The question is tagged with [google-chrome], also OP asks how to use _Chrome developer tools_ to inspect elements. — Teemu, Jan 24 '14 at 14:59

score 95 · Accepted Answer · answered Jan 24 '14 at 14:45

If they have just changed the oncontextmenu handler (which is the most straightforward way to do it), then you can remove their override thus:

window.oncontextmenu = null;

Otherwise, if it is attached to individual elements, you can get all the page's elements, and then remove the handler on each one:

var elements = document.getElementsByTagName("*");
for(var id = 0; id < elements.length; ++id) { elements[id].oncontextmenu = null; }

Or, it seems you can turn off such scripts; via an extension in Chrome or an option in Firefox - in the advanced box for javascript options, switch off 'Disable or replace context menus'.

score 70 · Answer 2 · answered Jul 29 '17 at 07:07

70

Tested in Chrome 60.0.3112.78.

Some of the above methods work, but the easiest in my opinion is:

Open dev tools (Shift+Control+i).
Select the "Elements" tab, and then the "Event Listeners" tab.
Hover over the elements/listener. A "Remove" button will show up.
Click "Remove".

E.g. see photo.

answered Jul 29 '17 at 07:07

Vagelis Prokopiou

2,285
19
14

This actually works great, but I'd add a step between 1 and 2, to use the selector tool (arrow) top left corner, to select the element from the web page first. Then pop over to Elements Event Listeners and remove the click or in my case, the contextmenu events. Then can right click and do whatever you want. – Daemon42 Apr 06 '23 at 01:24

score 46 · Answer 3 · edited Jul 27 '21 at 12:36

This bookmarlet works in Google sites/Youtube as of Aug 2019 (tested in Chrome and Firefox):

function enableContextMenu(aggressive = false) { 
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) { 
var elements = document.getElementsByTagName(tagName); 
  for (var 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();

For peskier sites, set/pass aggressive to true (this will disable most event handlers and hence disable interaction with the page):

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) {
 var elements = document.getElementsByTagName(tagName);
 for (var 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();

score 35 · Answer 4 · answered Aug 31 '19 at 20:53

I built upon @Chema solution and added resetting pointer-events and user-select. If they are set to none for an image, right-clicking it does not invoke the context menu for the image with options to view or save it.

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) { var elements = document.getElementsByTagName(tagName); for (var 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();

It worked, thanks. This is really more aggressive than the solution in [top answer](https://stackoverflow.com/a/21335527/14928633). — kirogasa, Apr 01 '23 at 11:26

score 24 · Answer 5 · answered Jan 24 '14 at 14:31

24

Easiest thing to do is open the dev tools by pressing Cmd + Opt + I (Mac) or F12 (PC). You can then use the search (magnifying glass, top left on the dev tools toolbar) to select the element.

answered Jan 24 '14 at 14:31

nick

3,521
3
22
32

4

or can do Ctrl (Cmd) + Shift + C to open directly the 'element selection' functionality – Titi Oct 21 '16 at 13:21

score 18 · Answer 6 · answered May 05 '16 at 03:53

18

you can use following code for re-enable mouse right click.

document.oncontextmenu = function(){}

and you can use shortcut key (Ctrl+Shift+i) to open inspect elements in chrome in windows OS.

answered May 05 '16 at 03:53

shiyani suresh

778
12
12

1

This works like a charm! If you have to do this often like me, you can add it as a bookmarklet: Create a new bookmark, and put as URL: javascript:(document.oncontextmenu = function(){})() Now, each time you have a page that bugs you, just click the bookmarklet and done. – nico gawenda Sep 14 '18 at 11:55

score 7 · Answer 7 · answered May 25 '16 at 07:07

7

Another possible way, when the blocking function is made with jquery, use:

$(document).unbind();

It will clear all the onmousedown and contextmenu events attributed dynamically, that can't be erased with document.contextmenu=null; etc.

answered May 25 '16 at 07:07

jeanadam

419
5
5

same for me, some code did a re-bind: `$(document).bind("contextmenu",function(e){if(!$('#easyy').length)e.preventDefault();});` – Master of Celebration Nov 07 '18 at 13:28

Serg · Answer 8 · 2016-10-21T13:18:36.830

7

You could use javascript:void(document.oncontextmenu=null); open Browser console and run the code above. It will turn off blockin' of mouse right button

edited Oct 21 '16 at 13:18

answered Oct 21 '16 at 11:45

Serg

71
1
2

score 3 · Answer 9 · answered Jul 02 '20 at 15:58

3

On the very left of the Chrome Developer Tools toolbar there is a button that lets you select an item to inspect regardless of context menu handlers. It looks like a square with arrow pointing to the center.

answered Jul 02 '20 at 15:58

Achim

49
3

score 1 · Answer 10 · answered Jun 02 '19 at 06:53

1

Hi i have a shorter version. this does same as a best answer. (it works on chrome 74.03)

document.querySelectorAll('*').forEach(e => e.oncontextmenu = null)

answered Jun 02 '19 at 06:53

Yasuhiro Nakayama

49
4

score 1 · Answer 11 · answered Dec 30 '20 at 02:43

1

Open inspect mode before navigating to the page. It worked.hehe

answered Dec 30 '20 at 02:43

eeshtox

21
1

score 1 · Answer 12 · answered Jul 31 '22 at 14:24

1

Not quite answering the question, but you can use ctrl/cmd + shift + c to start an "inspect on hover" mode in chrome.

answered Jul 31 '22 at 14:24

Att Righ

1,439
1
16
29

score 1 · Answer 13 · edited Jun 27 '23 at 10:42

I tried many of the solutions above, but the following worked fine for me:

$(document).unbind();

This code will unbind all event handlers that were attached to the document using the on() method. This can be useful if you need to remove a specific event handler or if you want to start fresh with a new set of event handlers.

To run this code, you will need to open the developer tools in your browser. In Chrome, you can do this by pressing Ctrl+Shift+I. Once the developer tools are open, switch to the console tab. Then, paste the code above into the console and press enter.

The code should execute without any errors. If it does, you should see a message in the console that says All event handlers unbound. This means that the code has successfully removed all event handlers from the document.

I hope this helps! Let me know if you have any other questions.

Welcome to SO! This question is most likely partly or entirely written by an AI. Please read Stack Overflow's guidelines on AI content: https://stackoverflow.com/help/gpt-policy — , Jun 23 '23 at 00:26

score 0 · Answer 14 · answered Mar 17 '15 at 14:38

Disabling the "SETTINGS > PRIVACY > don´t allow JavaScript" in Chrome will enable the right click function and allow the Firebug Console to work; but will also disable all the other JavaScript codes.

The right way to do this is to disable only the specific JavaScript; looking for any of the following lines of code:

Function disableclick
Function click … return false;
body oncontextmenu="return false;"

score 0 · Answer 15 · answered Apr 20 '16 at 08:58

I just visited this site and it really bugged me,

apparently there are a couple ways to disable the mouse click:

1)

<script language="javascript">
document.onmousedown=disableclick;
status="Right Click Disabled";
function disableclick(event)
{
  if(event.button==2)
   {
     alert(status);
     return false;    
   }
}
</script>

and

<body oncontextmenu="return false">

...

in this case what you will have to do in the dev tools is :

document.removeEventListener("onmousedown",disableclick);
document.oncontextmenu = function(){}

2)

using flash as a content wrapper - no solution here except taking a screenshot

3)

some sites want to prevent downloading images via right click -> save image as

so what they do is put this:

<div style="background-image: url(YourImage.jpg);">
   <img src="transparent.gif"/>
</div>

which is a transparent image spreding on the full width and height of the screen all you need to do is go to the elements inspector and find the div and delete it.

In my case #1 did the trick

score 0 · Answer 16 · answered Jul 18 '17 at 21:14

0

The way I solved this was delete the event listeners on the page. After I did that, I was able to copy the text and paste it in to my processor of choice.

answered Jul 18 '17 at 21:14

Jeremy

1

score 0 · Answer 17 · answered Feb 09 '20 at 11:34

0

If the page you are on has a text or textarea input, click into this input (as if you want to enter text) then right-click and select 'Inspect element'.

answered Feb 09 '20 at 11:34

tno2007

1,993
25
16

score 0 · Answer 18 · answered Jan 14 '21 at 18:20

0

If none of the other comments works, just do, open console line command and type:

document.oncontextmenu = null;

answered Jan 14 '21 at 18:20

Amos Isaila

286
3
14

score 0 · Answer 19 · edited Oct 04 '22 at 12:58

0

Press Ctrl+Control+F12
Then select Elements > Event Listeners > Remove contextmenu events

edited Oct 04 '22 at 12:58

Dobromir Kirov

934
4
16

answered Sep 28 '22 at 23:40

ro0ti

1
2

score -1 · Answer 20 · answered May 29 '19 at 02:32

-1

The easiest way I found is to open the webpage in Read mode (browser that supports read mode like Safari, Firefox etc) and then copy as usual

answered May 29 '19 at 02:32

Liju John

1,749
16
19

score -4 · Answer 21 · answered May 04 '16 at 06:02

Just Press F12

Go to Sources

There you will find Enable right click. Click on it.

Under this you will find web_accessible_resource.

Open it in this you will find index.js.

Press Ctrl + F and search for disabelRightClick. There you will find

        var disableRightClick = false;

this line. Replace this line with

        var disableRightClick = true;

Just press Ctrl + s

!! Done. Now your right click is enabled !!

How to re-enable right click so that I can inspect HTML elements in Chrome?

21 Answers21

Linked