How to toggle inspect tools using js?

Question

I am trying to make a button which will toggle chrome developer/inspect tools. This may sound silly but I just want to know if it is possible to do.

btn = document.querySelector('#test')
btn.addEventListener('click', () => {
  jQuery.event.trigger({ type : 'keypress', which : 123 });
  
  console.log('open inspect window')
})

$('body').keypress(function(e) {
  alert(e.which);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<button id='test'>Toggle Dev Tools</button>

I tried triggering f12 key which is an shortcut to dev tools, but it didn't work (i dunno why).

What I think is keypress won't work on function keys, therefore we need keydown which is working for some reason. I changed 'type' to 'keydown' instead of 'keypress'

If anyone could help or explain that would be really helpful

As far as I can see, this is not possible. – Jonah C Rowlinson Jun 30 '21 at 10:04 — Jonah C Rowlinson, Jun 30 '21 at 10:04

score 5 · Accepted Answer · answered Jun 30 '21 at 10:08

I am trying to make a button which will toggle chrome developer/inspect tools. This may sound silly but I just want to know if it is possible to do.

No API is provided that would make this possible.

I tried triggering f12 key which is an shortcut to dev tools, but it didn't work (i dunno why).

Events don't bubble outside the document and into the browser UI.

How to toggle inspect tools using js?

1 Answers1