My eventual goal is to find all resources that the webpage is attempting to load, stop them from loading, and then list them (so that the user can see what the webpage tried to load). Can anyone help me get started with the necessary JavaScript that I'll need to both stop the page from loading and print the resources? I'm just kind of lost on what the first step should be.
Take a look at webrequest for chrome extensions:
https://developer.chrome.com/extensions/webRequest
I would suggest to create a callback for onBeforeRequest() and then checking what resources are being fetched and loaded.
You can cancel a particular web request from this callback.
Related
A test which works perfectly well locally with selenium webdriver is timing out when run remotely on saucelabs.com. The same test works for Chrome (both local and on sauce).
From the client code's side, the click in the following code is never returning:
var someLink = await driver.findElement(By.className('some-class'));
await someLink.click()
I'm using jest for the test framework with at 60 second timeout, so on the client end, I get that timeout error after a minute.
When I log into sauce and look at the list of commands it processed I see:
POST elements
With parameters:
{"using":"css selector","value":".some-class"}
And the returned body is:
[{"ELEMENT":"2"}]
So that succeeds and finds the link. I then never see a click event on that element. Prior click events, and navigation commands are successful.
When I watch the video playback of the session, I see it click the given link and the new page load in Firefox, but the spinner (actually a little dot going back and forth) in the top right never stops.
I can't reproduce with Firefox myself, or even through the manual testing on Saucelabs where you can control the browser and VM through the web.
I'm wondering if there's some synchronous code that's running that just isn't resolving. But I can't figure out how to find that out. The developer tools don't appear to have any way to show currently blocking code.
When page is being loaded, Selenium is waiting for document.readyState to be complete.
Sometimes loading of some resource might stuck - when it tries to get big file and connection is poor, when resource is not reachable because of proxy, when service that provides this resource is down, and so on.
I had the same problem with Firefox and solved it using eager page load strategy.
With this load strategy Selenium will wait for document.readyState to be interactive - some resources might not be loaded, but main elements of the page are loaded and you can interact with them in common way.
DesiredCapabilities caps = DesiredCapabilities.firefox();
caps.setCapability(CapabilityType.PAGE_LOAD_STRATEGY, "eager");
is it possible to reload the content of the viewport without reloading the whole inspector.
I would like to make some changes to a javascript file in the debugger then reload the page to see the temp changes I have made (on load), before I commit to the file and upload. Where I'm working at the moment there is caching I can't get round so I have to wait a minute or two to see what my changes do on load.
I have found the page I want to work with under source and can save changes, but really need to see some actions that are fired on the loading of the page.
Is this possible?
Thanks
you can't do that with chrome debugger tool. each JS resource will reload on page load so you will loose your change.
you can proxy tools like Fiddler which will allow you to load script from your local machine while loading a third party website. You can create a copy on your own machine and then use fiddler to intercept the call for that file and send your local copy instead
So, I have wordpress site that was infected by javascript virus, that calls redirect to another site. There is a set of js files.
How to know where javascript calls redirect? What browser tools can use for this?
There are a couple of things you can do.
You can go though javascripts files content which should be encrypted basically using base64_encode so you might get it bit hard to understand code pattern.
You can use the Event Listener Breakpoint -> Load - unload and then when it breaks in the 3rd party library, right click and select Blackbox Script. The next time you play through the code, it should only break in your own code (assuming there are no other 3rd party libraries to blackbox).
Another option is to go to the Network tab and check the Preserve Log checkbox. This will persist all requests between page loads/navigation, so that you will be able to find the network request
For Firefox check this : https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor
I want to develop a Chrome extension that scrapes data off the page, but this can happen only after all of the pages ajax finish loading their remote content.
Is this possible?
In general, you can't detect when all scripts are finished loading. It is fairly common for a page to wait a couple seconds after the 'onload' event to request an additional round of scripts -- for example, if you want to delay-load ads but don't want to slow down the initial page rendering.
However, extensions do have a flag to run at "document_idle". This flag supposedly makes Chrome wait until the page is "idle" before injected the extension's script. It would not, however wait for a delay-loaded script and it may not even wait for a slow XHR.
More information can be found at http://developer.chrome.com/extensions/content_scripts.html
I think you can't do that, but if you want to check if a particular external script is loaded you can check this:
Verify External Script Is Loaded
I am creating a complete ajax application where there is one base page and any pages the user navigates to within the application are loaded via ajax into a content div on the page. On the base page I include the various scripts that are needed for every page within the application (jQuery, jQuery-UI, other custom javascript files). Then on the various pages with the application I include a script or two for each page that contains the logic needed for just that page. Each of those script files have something that executes on the page ready event. The problem is that every time the user navigates to page1, the page1.js file is loaded. So, if they visit that page 10 times, that script is then loaded ten times into their browser. Looking at the Chrome script developer tools after running around the site I see tons of duplicated scripts.
I read somewhere about checking to see if the script has already been loaded using a boolean value or storing the loaded scripts in an array. But, the problem with that is that if I see the script is already loaded and I don't load it, the page ready function doesn't get fired for the page's javascript file and everything fails.
Is there an issue having the javascript file loaded over and over when the user visit the same page multiple times?
I did notice looking at the network traffic that every time we visit the page, the script is requested with a random number parameter (/Scripts/Page1.js?_=298384892398) which causes the forced request for the script file every time. I set the cache: true settings on the jQuery ajaxSetup method and that removed the parameter from the request and thus the cached version of the javascript file was loaded instead of actually making a separate HTTP request for it. But, the problem is that I don't want all the ajax requests made to be cached as content changes all the time. Is there a way to force just javascript files to be cachced but allow all other ajax requests to be not cached.
Even when I forced caching on all requests, the javascript file still showed up multiple times in the developer tools. Maybe that isn't a big deal but it doesn't seem quite right.
Any advice on how to handle this situation?
About your first question:
Every time you load a JavaScript file, the entire content gets evaluated by the browser. It solely depends on the content if you can load and execute it multiple times in a row. I'd not consider it a best practice to do so. ;)
Still i'd recommend that you find a way to check if it was already loaded and fire the "page loaded" event manually within the already present code.
For the second question: I'd assume that the script is intended to show up multiple times when including it multiple times. To give an advice on how to not cache the loaded JS i'd need to know how you loaded the code, how you do AJAX and the general jQuery setup.
After doing some more research it looks like it is actually just a Chrome issue. When you load a script via AJAX you can include the following in your code to get it to show up in the the Chrome developer tools
//# sourceURL=some-script-name
The problem is that when you navigate away from the page, the developer tools keeps the script around, but it is actually not longer referenced by the page.