Is there any way to add a time delay to a script/asset loading in the Google Chrome Browser via the Chrome Developer Tools? Or to block a script loading entirely?
The reason I want to do this is to see how a site performs when a script/asset suffers from delayed loading or failed loading.
In Chrome Developer Tools when you are in the Network you can add custom throttling. You can specify download and upload speed as well as request latency. But this will apply to all resources and not only to a specific one.
--- edit ---
For delay individual URLs on any page, you can use a chrome extension (since it can intercept browser requests). I use https://chrome.google.com/webstore/detail/url-throttler/kpkeghonflnkockcnaegmphgdldfnden
If the asset is a third party or hosted on a different domain, there is a Chrome plugin that's designed to test what you are calling loading delays, that are also called SPOF (Single Point Of Failure). It might not be very intuitive at first use, but it's very helpful :
The plugin is called SPOF-O-Matic and can be found here: https://chrome.google.com/webstore/detail/spof-o-matic/plikhggfbplemddobondkeogomgoodeg
Following solutions have nothing with Chrome Devtools but they work.
If you don't mind redirects then you can try Slowwly or deelay.me.
Other alternative for non-windows OS is Comcast.
You can do it by combining multiple resources.
I use http://www.deelay.me/ to generate the delayed url.
I then combine it with requestly extension (https://requestly.io/) to create a host replace rule to target a specific resource
This devtools extension can fit your requirement, Its a Chrome/Firefox devtools extension that can simulate http request delay for any configurable URL.
Chrome devtools extension webstore
You can use Requestly Browser Extension or Desktop App to modify your network requests. Delaying/Throttling scripts is one of the use-cases amongst many already supported in Requestly.
Here's how you can do it. Once you install Requestly, Use the Delay Request feature.
Create New Rule & Select Delay Rule Type
Define URL (or URL Pattern) and the delay value
This article explains 3 different approaches to add delay/throttle APIs (or network requests). However, in your case Requestly extension based approach should work best.
PS - I built Requestly.
Related
Is it possible to simulate changing network latencies (within a range) for different requests via chrome?
E.g. for testing what happens when the order of ajax responses differs.
DevTools technical writer here. We have network throttling in the Network panel:
But that creates a steady throttled state. As of Chrome 68 we don't have any feature for randomizing the amount of throttling within a given range.
You might be able to achieve this using Puppeteer.
I think it would possible, creating an extension and use the Chrome debugger and Network domain
you can use this Chrome/Firefox devtools extension that can simulate http request delay for configurable URL
Chrome devtools plugin
I need to log the information shown in network tab to a file. I can do it by firing network tab first and then exporting it to a file. But is it possible to run the network tab and exporting it to a file in the background automatically whenever the Chrome is opened?
Is it possible to do?
It depends on your requirement. If your extension involves DevTools, and therefore it is open, you can use the chrome.devtools.network.getHAR() method to get the network traffic. You don't need to navigate to the Network tab.
However, if you want to access the network data without DevTools being opened, this API will not work, as it's only exposed to the DevTools instance. There are a couple of possible options.
Option 1
You could use the chrome.webRequest API to intercept each request/response and append whatever data you want/can to an object. You could then use the chrome.downloads API to download the data. In your case, you could use a data URI.
var url = 'data:application/json;base64,' + btoa(data);
chrome.downloads.download({url: url, filename: 'notQuiteAHAR'json'});
I haven't tested this in practice, and I'm not too sure if you can determine when all requests are done before calling the download.
Option 2
Use the more low level chrome.debugger API, as per the comment by #wOxxOm. The debugging protocol only allows one instance of the debugger at a time, so this will only ever work if you don't have DevTools running. The API exposes a lot more than the chrome.webRequest API, but requires a bit of work to get all the data you need.
There's a repository called chrome-har-capturer, which uses the debugging protocol. Of particular interest is har.js, which uses the events found in the debugger API to manually construct the HAR. The purpose of the library is for remote debugging purposes, but I believe you can use the debugger API in an extension, and so you could probably use aspects of this repository.
As suggested by Gideon Pyzer, HAR Recorder uses chrome debug protocol to record HAR and generate a har file (without opening devtools). If you want a variation, you can fork and make changes on it.
I have a personal chrome extension that always runs in development mode. I need it to communicate with a public extension (execute one of its function to be more specific).
Is there any way to get background page of the other extension so I can do this?
I also tried modifying source code of the other extension manually but then chrome show it as corrupted and ask me to reinstall it
Not really, no.
You cannot inject scripts into chrome-extension:// origin of a different extension, and attaching a debugger there (without whitelisted, private APIs) is going to be tricky (custom launch flags), if at all possible. Note that there's a feature request to allow that.
As suggested by wOxxOm, your best bet is to create a personal copy of the other extension (if at all possible); perhaps adding hooks for External Messaging or merging your code in.
Basically what I need is a way to automatize the result of the following operations:
open a new tab;
open the Network tab in the developer tools;
load an URL;
select "Save All as HAR".
Often, proposed solutions involves the use of PhantomJS, browsermob-proxy, or pcap2har; those won't fit my case since I need to work with SPDY traffic.
I tried to dive into the Google Chrome Extensions API and indeed I managed to automatize some tasks, but still no luck for what concerns the HAR files generation. Now this method is particularly promising but I still can't figure out how would I use it.
In other words, I need something like this experiment from the Google guys. Note the following:
We used Chrome's remote debugging interface with a custom client that starts up the browser on the phone, clears its cache and other state, initiates a web page load, and receives the Chrome developer tools messages to determine the page load times and other performance metrics.
Any ideas?
Solution
For the curious, I ended up with a Node.js module that automates such kind of tests: chrome-har-capturer. This also gave me the opportunity to dig deeper into the Remote Debugging Protocol and to write a lower-level Node.js interface for general-purpose Chrome automation: chrome-remote-interface.
The short answer is, there is no way to get at the data you are after directly. The getHAR method is only applicable to extensions meant to extend DevTools itself. The good news is, you can construct the HAR file yourself without too much trouble - this is exactly what phantom.js does.
Start Chrome with remote debugging
Connect to Chrome on the debugging port with a websocket connection
Enable "Network" debugging, you can also clear cache, etc - see Network API.
Tell the browser to navigate to the page you want to capture, and Chrome will stream all the request meta-data back to you.
Massage the network data into HAR format, ala phantom.js
...
Profit.
For a head start, I have a post that with sample Ruby code that should you get started with steps 1-4: http://www.igvita.com/2012/04/09/driving-google-chrome-via-websocket-api/
By now there's a browser plugin to do that: https://github.com/devtools-html/har-export-trigger
It uses the WebExtensions DevTools API and I got it to work with both Firefox and Chrome.
See my code for Chrome here: https://github.com/theri/web-measurement-tools/blob/master/load/load_url_using_chrome.py#L175
Automatically installing the plugin in Chrome is a bit more complicated than in Firefox, but feasible - I extracted the plugin archive locally and then link to it in chrome_prefs.json (see same repository).
Not sure if it helps, HAR Recorder uses chrome debug protocol to record HAR and generate a har file (without opening devtools). If you want a variation, you can fork and make changes on it.
I have begun using Google Chrome as a primary browser, but I miss my Evernote extension, which can clip a web page directly to the local Evernote application. Is it possible for me to write an extension in Chrome that can do this?
Yes it is possible, through NPAPI, but your local application should be prepared for external communication. Code running in an NPAPI plugin has the full permissions of the current user and is not sandboxed or shielded from malicious input by Google Chrome in any way.
All this is described here:
http://code.google.com/chrome/extensions/npapi.html
To avoid the NPAPI way, another idea would be to communicate with a custom local http server binded to localhost and send requests to it.
Disclaimer: Never tried it but theoretically it should work.
I don't think chrome allows this, simply because it would be dangerous to let plugins have extended priviledges, they even run in an extra, low-rights thread and only communicate with chrome itself through pipes.