Open Safari / Google Chrome developer tools programmatically from JavaScript

Question

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 1

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 :-)

Answer 2

You cannot directly use the Chrome's Dev Tools from your web pages. It is bundled with the browser.

But you can use it like a regular web application. Go to Chrome Developer Tools, then go to Contributing. You will find help on using Dev Tools for your app.

Setting up

• Install Chrome Canary on Mac OS / Windows or download the latest Chromium build from the Chromium continuous builds archive on Linux
• Clone Blink git repo from https://chromium.googlesource.com/chromium/blink.git
• Set up a local web server that would serve files from WebKit/Source/WebCore/inspector on some port (8090)

Running

• Run one copy of Chrome Canary with the following command line flags: --remote-debugging-port=9222 --user-data-dir=blink/chromeServerProfile --remote-debugging-frontend="http://localhost:8090/front_end/inspector.html". These flags cause Chrome to allow websocket connections into localhost:9222 and to serve the front-end UI from your local git repo. (Adjust the path to chromeServerProfile to be some writable directory in your system).
• Open a sample page (eg www.chromium.org).
• Run a second copy of Chrome Canary with the command line flag: --user-data-dir=/work/chromeClientProfile. Open http://localhost:9222. Among the thumbnails you will see the sample page from the other browser instance. Click on it to start remote debugging your sample page.
• The DevTools web page that opens is served from the remote-debugging-frontend in the first browser instance, which serves from the git repo your local filesystem. Debug this Devtools Web page and edit its source like any other web app.

I hope this is what you need.