Skip to content

Example of using Browser's Developer tools while using AsyncChromeDriver, AsyncOperaDriver and AsyncFirefoxDriver

Notifications You must be signed in to change notification settings

ToCSharp/BrowsersDevToolsExample

Repository files navigation

We do not need to proxy Chrome DevTools WS traffic from Chrome 63

https://developers.google.com/web/updates/2017/10/devtools-release-notes#multi-client
This project is OUT OF DATE
The opportunity of using Browser's Developer tools while using AsyncChromeDriver, AsyncOperaDriver is good.
And you may further use this project. But it opens unnecessary WebSocket server (we need remove this). Someday I do it if you ask in Join the chat at https://gitter.im/AsyncWebDriver/Lobby

BrowsersDevToolsExample

Example of using Browser's Developer tools while using AsyncChromeDriver, AsyncOperaDriver and AsyncFirefoxDriver.

Look video: https://youtu.be/dNMuoeDmEME
Run built Example in release tab.

When we open Chrome or Opera BrowserDevTools, WebSocket server starts to proxy WS traffic. So your firewall will ask you for permission. By default WebSocket server and http proxy server for DevTools frontend accepts only local connections. So it is safe.

Join the chat at https://gitter.im/AsyncWebDriver/Lobby

AsyncChromeDriver connects to Chrome DevTools through WebSocket, so we can open WS proxy and route AsyncChromeDriver and one more Chrome window with DevTools through this proxy. They will work in parallel.

   asyncChromeDriver = new AsyncChromeDriver(new ChromeDriverConfig().SetDoOpenBrowserDevTools());
   webDriver = new WebDriver(asyncChromeDriver);
   await asyncChromeDriver.Connect();

Then we can open one more Chrome DevTools in Opera for example.

   asyncOperaDriver = new AsyncOperaDriver();
   await asyncOperaDriver.Connect();
   await asyncOperaDriver.Navigation.GoToUrl(asyncChromeDriver.GetBrowserDevToolsUrl());

Http traffic for Chrome DevTools goes from first Chrome window, but we can also proxy it to change some DevTools frontend files (take them from local dir).
To do it you can save http traffic first.

   asyncChromeDriver = new AsyncChromeDriver(
       new ChromeDriverConfig()
       .SetDoOpenBrowserDevTools()
       .SetWSProxyConfig(new ChromeWSProxyConfig { HTTPServerSaveRequestedFiles = true })
       );
   browsersToClose.Add(asyncChromeDriver);
   webDriver = new WebDriver(asyncChromeDriver);
   await asyncChromeDriver.Connect();

Then change some files. Or take DevTools frontend from chromium project. And enable http proxy.
It will try to find file in local dir, or load it from Chrome.

   var dir = tbDevToolsFilesDir.Text;
   if (string.IsNullOrWhiteSpace(dir)) dir = Directory.GetCurrentDirectory();
   dir = dir.TrimEnd('\\');
   if (dir.EndsWith("\\devtools")) dir = Path.GetDirectoryName(dir);

   asyncChromeDriver = new AsyncChromeDriver(
       new ChromeDriverConfig()
       .SetDoOpenBrowserDevTools()
       .SetWSProxyConfig(new ChromeWSProxyConfig { DevToolsFilesDir = dir, HTTPServerTryFindRequestedFileLocaly = true })
       );
   browsersToClose.Add(asyncChromeDriver);
   webDriver = new WebDriver(asyncChromeDriver);
   await asyncChromeDriver.Connect();

Try to save http traffic localy. Open inspector.js file, search for "className":"Network.NetworkPanel", change "order" to 7 near it, save.
Then open AsyncChromeDriver as shown in last code. NetworkPanel will be the first.


Developer tools for opened Developer tools

Developer tools opens in full Chrome window, so you can open Developer tools for opened Developer tools. :) Or in code:

   asyncChromeDriver = new AsyncChromeDriver(new ChromeDriverConfig().SetDoOpenBrowserDevTools());
   asyncChromeDriver.BrowserDevToolsConfig = new ChromeDriverConfig().SetDoOpenBrowserDevTools();
   browsersToClose.Add(asyncChromeDriver);
   webDriver = new WebDriver(asyncChromeDriver);
   await asyncChromeDriver.Connect();
   tbDevToolsRes.Text = "opened";

BrowserDevTools as AsyncWebDriver

asyncChromeDriver.BrowserDevTools is AsyncChromeDriver, so we can interact with BrowserDevTools as AsyncWebDriver with some difficulties, because tabs behind shadowRoots. Look example:

  var wd = new WebDriver(asyncChromeDriver.BrowserDevTools);
  var el = await wd.ExecuteScript(shadowFind + "return recursiveFindById(document, 'tab-sources', [])[0];") as AsyncWebElement;
  await el.Click();

Firefox BrowserDevTools also accessible, but here difficulties because they are in XUL:

  await asyncFirefoxDriver.BrowserDevTools.JavaScriptExecutor
    .ExecuteScript("frames[0].document.getElementById('toolbox-tab-netmonitor').click();");

About

Example of using Browser's Developer tools while using AsyncChromeDriver, AsyncOperaDriver and AsyncFirefoxDriver

Resources

Stars

Watchers

Forks

Packages

 
 
 

Languages