Back in 2017, Google has announced Multi-client remote debugging support on Chrome v63 and above. Multi-client remote debugging support opens up interesting opportunities for integrating other tools with DevTools. Multi-client support enables multiple chrome extensions to use chrome debugger API on the same tab.
The debugger in Chrome is a standalone client implementation of the Chrome Dev Tools Protocol. Chrome DevTools is a set of web developer tools built directly into the Google Chrome browser. DevTools can help edit pages on-the-fly and diagnose problems quickly, which ultimately helps you build better websites, faster. Protocol Monitor in Chrome Developer Tools displays the underlying requests and responses happening over the DevTools protocol.
Selenium 4 alpha versions come up with the much-anticipated native support for Chrome Dev Protocol landed via the “DevTools” interface.
Initializing DevTools Session:
Applications do have different sets of functionalities on geographic locations or certain application works only on certain geographic locations. Emulating the geo-locations for developing or testing the applications are a huge concern at times. Setting the Geo-Location is easier using chrome dev tools protocol now.
setGeolocationOverride event under the Emulation domain overrides GeoLocation position with user-provided latitude, longitude, and accuracy. Loading a web application post this will emulate user-provided Geo-Location in it.
Traditionally, we mock API responses using separate toolsets. Chrome dev tools help capture API responses on the fly for the request that web application makes.
To test, we need to enable the Network domain using the enable method. This enables tracing and helps the client to monitor network events.
To validate the response received from backed, we need to use responseReceived method which captures HTTP responses whenever it is available.
Emulate Network Conditions:
We can emulate different network types (i.e) connection types like cellular2g, cellular3g, cellular4g, ethernet, etc using emulateNetworkConditions event under the Network domain with different latency and throughput.
Modern-day applications do capture a lot of user’s behavior, authentication information, etc in form of cookie information in browsers. It is important to check any sensitive information is present in the cookie or not. Doing this check manually against every action or the navigation user perform in the application is painful.
To retrieve all the cookie information set by application in the browser, we use getAllCookies method under the Network domain.
clearBrowserCookies does clear all the cookies that the application has saved.
Sample code snippets are available here.
As we’ve seen, Chrome DevTools which is one of the most useful web developer tools, allows you to get comprehensive information about the page and requests. In the next part of our tutorial, we will discuss mocking the network responses, capturing performance metrics, emulating devices, timezones, etc… Stay Tuned! 😉