Open Safari / Google Chrome developer tools programmatically from JavaScript

javascript google-chrome safari webkit developer-tools
ELLIOTTCABLE picture ELLIOTTCABLE · May 21, 2013 · Viewed 7.3k times · Source

I'm looking for a way to open the WebKit “developer tools” from a script attached to a web-page. I need solutions for both Google Chrome and Safari, that will open the developer-tools pane if it's not already open, and (hopefully, if you can figure out how) also switch to a particular tab/section of said pane upon opening.

(Use-case, if anyone's interested: I want to open the console.log output-window if there's been an error and a developer is looking at the page; this particular page will be the output of some JavaScript unit-tests.)

I'm setting a bounty on this question because it's obviously one that hasn't been answered to anyone's satisfaction before, and the answer is a hairy one. Please don't answer it unless you have a real answer that both: 1) works in both browsers, and 2) doesn't require private extension APIs that won't work from a static web-page.

See (related, but specific to Chrome, and extensions): Can I programmatically open the devtools from a Google Chrome extension?

Answer

Mathieu Amiot picture Mathieu Amiot · Jun 4, 2013

Simply: You can't.

The Dev Tools are not sandboxed (unlike any web page), thus granting sandboxed environments the power to open and control an unsandboxed environment is a major security design flaw.

I hope this answers your question :-)

Related questions

Get the real width and height of an image with JavaScript? (in Safari/Chrome)

I am creating a jQuery plugin. How do I get the real image width and height with Javascript in Safari? The following works with Firefox 3, IE7 and Opera 9: var pic = $("img") // need to remove these in of case img-element has …

Read More
Video auto play is not working in Safari and Chrome desktop browser

I spent quite a lot of time trying to figure out why video embedded like here: <video height="256" loop autoplay muted controls id="vid"> <source type="video/mp4" src="video_file.mp4"></source> <…

Read More
Force a reload of page in Chrome using Javascript [no cache]

I need to reload a page using JavaScript and ensure that it does not pull from the browser cache but instead reloads the page from the server. [As elements of the page will have changed in the interim] On IE …

Read More