Grab a screenshot of Chrome using Chrome Developer Tools?

Question

Is it possible to grab a screenshot of an open window using the Chrome Development Tools remote debugger?

For example, I'm connecting to the remote debug port and I have this code which pops an empty window:

   private void sendWindowPop(int width, int height) throws
IOException {
       hsc.send("{\"method\": \"Runtime.evaluate\", \"id\": "
               + hsc.nextInt()
               + ", \"params\": {"
               + "\"expression\":
\"window.open('about:blank','name','toolbar=0,scrollbars=0,"
               + "location=0,status=0,menubar=0,resizable=0,width="
               + width
               + ",height="
               + height
               + "');\""
               + "}}");

(hsc is my connection to the debugger at http://localhost:9222)

Then, I load up my target URL with this:

    private void loadPage(String uriString) throws IOException {
       hsc.send("{\"method\": \"Page.open\", \"id\": " +
       hsc.nextInt() + ", \"params\": {\"url\": \"" + uriString + "\"}}");
       hsc.waitFor(ChromeNotifications.PAGE_LOADEVENTFIRED, DEFAULT_TIMEOUT_MILLIS);
   }

The code above works fine, and first pops a window and then loads the URL. Ideally, the next thing I would like to do is grab a screenshot of the loaded web page. Right now, these browser windows pop into an Xvfb virtual desktop, and I can use ImageMagick's import tool to grab a screenshot of the target window, but only if it's in the foreground.

This is a problem, since this application is designed to run in parallel with multiple windows popping into the virtual desktop. Any window overlapping my target window will just give me a black screenshot, since Xfvb only renders what's visible.

I also looked into the API reference, chrome.tabs.captureVisibleTab. No luck there, it doesn't capture what's not visible.

Is there a way, using the remote debugger, to grab a screenshot of an open window?

(for reference purposes, my ImageMagick command for import is this)

    DISPLAY=:0.0 import -window "Google - Chromium" screenshot.png

Where I open the URL http://www.google.com in my chromium browser using loadPage() above. It works great as long as the "Google - Chromium" window that pops is unobstructed and has focus. Drop another window over part of it, and I get a big black area that was not rendered.

Thanks!

Answer 1

Chrome Remote Debugging Protocol now supports the Page.captureScreenshot function

Here is an example in coffee-script

screenshot: (name, callback)=>
    safeName = name.replace(/[^()^a-z0-9._-]/gi, '_') + ".png"
    png_File = "./_screenshots".append_To_Process_Cwd_Path().folder_Create()
                               .path_Combine(safeName)

    @chrome._chrome.Page.captureScreenshot (err, image)->
      require('fs').writeFile png_File, image.data, 'base64',(err)->
         callback()

(snippet from https://github.com/TeamMentor/TM_4_0_Design/blob/Issue_80_Jade_Cleanup/QA/API/QA-TM_4_0_Design.coffee#L54)

Answer 2

Try the Aviary Screen Capture

Check this site too:

http://www.webdesignerdepot.com/2011/08/25-must-have-chrome-extensions-for-web-designers-and-developers/

Answer 3

If you need Java based solution use cdp4j to capture full page screen.

public static void main(String[] args) throws IOException, InterruptedException {
    SessionFactory factory = new Launcher().launch();

    Path file = createTempFile("screenshot", ".png");

    try (Session session = factory.create()) {
        session.navigate("https://webfolder.io");
        session.waitDocumentReady();
        byte[] data = session.captureScreenshot();
        write(file, data);
    }

    if (isDesktopSupported()) {
        getDesktop().open(file.toFile());
    }

    factory.close();
}

Screenshot.java