All geek questions in one place

Take a screenshot of Chrome with Chrome Developer Tools?

Can I get a screenshot of an open window using the Chrome development tools remote debugger?

For example, I connect to a remote debug port, and I have this code that gives 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 debugger connection at http: // localhost: 9222 )

Then I load my destination URL as follows:

  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 above code works fine and first gives a window and then loads the URL. Ideally, the next thing I would like to do is to capture a screenshot of the downloaded web page. Right now, these browser windows are accessing the Xvfb Virtual Desktop, and I can use the ImageMagick import tool to capture a screenshot of the target window, but only if it is in the foreground.

This is a problem because this application is designed to run in parallel with several windows appearing on the virtual desktop. Any window that overlaps my target window will just give me a black screenshot, since Xfvb only displays what is visible.

I also learned the API link, chrome.tabs.captureVisibleTab. No luck, he does not record what is not visible.

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

(for reference, my ImageMagick import command is as follows)

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

Where I open the URL http://www.google.com in my Chrome browser using loadPage () above. It works fine as long as the appearing Google Chromium window is unobstructed and has focus. Drop another window above its part and I will get a big black area that has not been displayed.

Thanks!

+6
source share
3 answers

Chrome Remote Debug Protocol now supports Page.captureScreenshot

Here is an example in a 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 )

+4
source

If you need a Java based solution, use cdp4j to display the 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

0
source

Source: https://habr.com/ru/post/907077/

More articles:


All Articles