Retrieve CSS from page without reloading it - javascript

I made a very big mistake today, and accidentally deleted the entire CSS page for my website. I think I may be sick. I do have one page that uses the CSS open from before I deleted it. Is there I way I can get the css off of it? As soon as I refresh the page, it will be totally gone. The page I have open is in google chrome. I know I should have had it backed up.. all that stuff. But please, I might just start sobbing if I have to write the CSS all over again. Any help?

You can use a variant of the following code in the dev console:
var rc='';
for (var i = 0; i < document.styleSheets.length; ++i){
var ss = document.styleSheets[i];
rc += Array.prototype.map.call(ss.cssRules,function(el){return el.cssText}).join('') ;
}
rc should contain your CSS.
(Adapted from some code I use in an iOS app to capture CSS from an HTML page. The basic idea is to go through document.stylesheets, harvesting cssText from cssRules. See https://developer.mozilla.org/en-US/docs/Web/API/document.styleSheets.)

Unless you have a cached version, which should contain your css call, you wont be able to. You could try to right click and 'View Source', which would show you a link to your css file. If you click that link, it may give you a new window which will show you the text for your css.
Since the file no longer exists, it may not. Especially if you opened it locally.

If you had the Developer Tools open when you loaded the page, then this method should work for you. If you didn't have the dev tools open... then this may not work.
In the dev tools, go to the Network tab at the top of the dev tools window that opens. Next, locate your CSS file in the list of resources downloaded for the page. Click on it, and your file contents should show up in a pane to the right of that (you may need to click the Preview or Response sub-tabs on that pane to see it). You can highlight and copy/paste from here.
If you didn't have the dev tools open, the catch that makes this not work is that the Network tab is not necessarily, in my experience, populated with any resources.
An alternative is to search Chrome's temporary cache. I'm pretty sure the file name would be unmodified, so you could try executing a file search from the top level of Chrome's cache in the filesystem and see if it comes up.

Related

Opening popup in new tab

So I recently implemented a chrome extension to grab images in an active tab and extract them to a popup for downloading. I would like to give users the option to view the popup window (including the extracted images) in a new Chrome tab.
However, since the popup is created dynamically by appending children to the body of my popup.html, I'm not sure how to pass the HTML for my popup to the new chrome tab.
I tried using chrome.tabs.create({url: chrome.extension.getURL('popup.html#window')});
as found at Open chrome extension in a new tab
but this doesn't seem to be working. Any suggestions?
I'm also developing a Chrome Extension that involves saving down a user's browser data.
Since each time an Extension opens a page (such as popup.html in your case) it opens a new instance of it, the pages and their relevant activity will be independent from each other.
In short you will have to implement some storage. The silver lining is it's pretty simple. Everything you need from manifest to example functions is here:
https://developer.chrome.com/extensions/storage
In your case what I'd imagine you'd want to do is this:
When you pass image urls to your popup page you also save them as items in an array in storage.
Then your pop up page can load in the array as the list to set downloading (or preview depending on use case).
Then either users can delete items from the array, or they are deleted programatically once downloaded.
I can't really be more specific without knowing exactly what your extension is trying to do or how it works, but hopefully that's enough to set you in the right direction.

why does the html div not change even though the JS inserting content into the div has changed (and view source shows new JS)?

edit:
I've isolated the problem to the JS lib's use of local storage, which on a browser refresh restores the content from local storage wiping out new content changes (fine for production but not dev); original problem is stated below.
The problem:
I'm working on a html file and a JS file; the JS inserts content into the html div. I change what the JS file inserts and refresh the html, but the browser page div doesn't change. However, when I look at the page source and open the JS file from there, I do see the changes I made to the JS.
So it seems like the browser is loading the new JS. But the content div doesn't change.
Here is the JS, http://pastebin.com/NteJmUPz
And here is the html, http://pastebin.com/G8EBdAbQ
What I've tried:
I've tried emptying the cache, turning off cache in Chrome dev tools, hard refresh and clear cache in Chrome while dev tools is open, etcetera. Behavior is the same in Chrome and FF.
Even closing and reopening the browser (FF) doesn't work to show the new changes.
What works:
The one thing that does seem to show new changes is opening a new incognito tab in Chrome. But then I'm back to the same behavior and need to close and open the incognito tab to show changes.

Select of a section of a web page and output all js used there?

Is there an application that allows me to select a section of a web page, and then outputs all js used there? I've been told I can do this with Chrome Inspector, but haven't had any success so far.
Example:
On this page - http://preview.oklerthemes.com/porto/2.7.0/page-left-sidebar.html - there is a tabbed box in the sidebar. I want to easily grab all the JS/CSS needed for that box. I usually use Inspector to look at all the styles, and go and grab theme from each CSS file, but I don't know how to do this for the JS.
It's not quite clear from your question what you're asking.
Are you trying to see what JS causes writes or changes to a particular part of a web page? The easiest way would be to open the page with the element inspector, right-click a particular chunk of HTML and stick a breakpoint on modifications.
The next time a function causes any changes, the breakpoint will trigger and you'll be able to crawl up the call stack to see what the cause was.

Dropping a breakpoint into a Javascript file using Firebug

I'm debugging a Twitter Bootstrap dropdown menu (http://twitter.github.com/bootstrap/javascript.html) which isn't dropping down.
I'm assuming the Javascript isn't running but would like to check. My initial thought was to drop a breakpoint into bootstrap.js somewhere using Firebug. However, I can't see where to do this. If I click on the Script tab I just get a screen showing javascript.html which seems exactly the same as the HTML source code.
Any suggestions?
In the script tab, where you see 'javascript.html', click on it (click on javascript.html) and firebug will give you a popup list of all scripts the page is using. The one you want to debug will likely be found inside the assets folder there.

Getting the final/timed render of a URL

I am looking for a way to, give a URL, get the source of a webpage back after the JavaScript has been run on it. For example:
I have a webpage with a .
On loading the page, some JavaScript populates the div.
Viewing the source of the page through a browser will not give the information which is within the div.
As far as I know, in order for the browser to render the page the div must have been filled with (X|D)HTML which would mean that the source of the page after being rendered is still just nested markup, so theoretically there should be a "final" version of the page source.
I have considered using a rendering engine like WebKit or Gecko and somehow adapting these to do this, however this is a fairly large task and I don't really want to duplicate something which has already been done. Does anyone know of a way of performing this task.
Regards.
Update: I am aiming to use Selenium (as mentioned in the comments to the accepted answer) to do this automatically for several pages. My project is a web spider which by design needs to target a number of pages in which the content I am aiming to reach is not available until after the JavaScript has populated everything.
Such addons for Firefox as the WebDev toolbar, or Firebug have options like 'View generated source'.
As far as timing it goes, just about the only option you have is to have a snippet of javascript code. You could set a start-time as soon as is possible on the page-load, and check again when the page is completed (either for dom-ready or page completely downloaded). It's going to be highly variable however, and if you are trying to time it in order to improve the speed (which is good to know, and to do) - just getting Firebug + Yslow would be far more useful.
Within Firefox you can get the final rendered DIV by waiting the browser to finish rendering, then pressing ctrl-A to select all content on the page and finally selecting "Show selection source" from the right-click menu.
This shows you the manipulated/populated DOM-code of the page.

Categories

Resources