Edited answer: In most browsers, there is a function called "Inspect" or "Inspect element" that opens up the developer tools. This allows you to use many different tools, like changing the DOM, running JavaScript, finding the sources of linked files, change the CSS and other things. This tool set can be used to mess around, but also for other purposes, like cheating on online tests. That is the reason that many schools have blocked this functionality from the students. Being a avid learner and programmer, I decided that I would use other methods. I am wondering whether or not I could use JavaScript to open the Developer tools panel, even though I am guessing that JavaScript can't react with the browser, only the page. If there is a JavaScript alternate for the developer tools menu, please tell me about it. Thank you for your time, I really hope that I get question asking back. For anyone wondering, I am only really able to interact with a page through bookmarklets.

Edited answer: In most browsers, there is a function called "Inspect" or "Inspect element" that opens up the developer tools. This allows you to use many different tools, like changing the DOM, running JavaScript, finding the sources of linked files, change the CSS and other things. This tool set can be used to mess around, but also for other purposes, like cheating on online tests. That is the reason that many schools have blocked this functionality from the students. Being a avid learner and programmer, I decided that I would use other methods. I am wondering whether or not I could use JavaScript to open the Developer tools panel, even though I am guessing that JavaScript can't react with the browser, only the page. If there is a JavaScript alternate for the developer tools menu, please tell me about it. Thank you for your time, I really hope that I get question asking back. For anyone wondering, I am only really able to interact with a page through bookmarklets.

• javascript
• bookmarklet
• inspect-element

• What is "force inspect" of an element? How has your school blocked that thing? – halfer Commented Oct 25, 2019 at 6:00
• they have blocked inspect element. I am wondering if I can force inspect elemnt to open. – user12156952 Commented Oct 25, 2019 at 18:34
• Is it a custom browser that won't open the Developer Tools panel? What browser is it? Can you try the appropriate keyboard shortcut for Developer Tools for that browser? Can you install another browser? – halfer Commented Oct 25, 2019 at 19:19
• related: Can I programmatically open the devtools from a Google Chrome extension?, Open Safari / Google Chrome developer tools programmatically from JavaScript – starball Commented May 3, 2023 at 4:21

3 Answers 3

here you go

javascript:(function()%7B(function() %7Bvar x %3D document.createElement("script")%3Bx.src %3D "https%3A%2F%2Fcdn.jsdelivr%2Fgh%2FSnowLord7%2Fdevconsole%40master%2Fmain.js"%3Bx.onload %3D alert("Loaded Developer Console!")%3Bdocument.head.appendChild(x)%3B%7D)()%7D)() 

paste into url section of bookmark and name it what you want.

If it's a custom build Chrome version and they disable or even remove the tool, then there is nothing you can do.

Chrome interface is not under control of Javascript, which is only for render. You can access (if is enabled) using hotkeys (Ctrl+Shift+J or I), F12, right click elements or access via the interface.

Try creating a bookmark and calling it 'Inspect Element'. Then assign this code to the URL part of creating the bookmark:

javascript:void(myDiv=document.createElement('div'));void(myBody=document.getElementsByTagName('body')%5B0%5D);void(myDiv.style.background='url(http://www.andybudd./images/layoutgrid.png)');void(myDiv.style.position='absolute');void(myDiv.style.width='100%');void(myDiv.style.height='100%');void(myDiv.style.top='0');void(myDiv.style.left='0');void(myBody.appendChild(myDiv));