How can I copy dynamically generated source HTML from the web? - javascript

For design purposes, I want to copy the exact HTML that is created by some JavaScript after the page loads. Firebug shows me what's going on, of course, but I really just want some static text that I can copy and paste at will.

The "View Source" menu of the Web Developer Firefox Add-on offers the "View Generated Source" tool.

That can be done with the innerHTML or outerHTML properties. Or just in Firefox, select the part you want the source code from and select View Selection Source from the context menu.

You can copy the HTML out of firebug (or the IE8 developer toolset) into your favourite text editor.

In Google Chrome, choose Inspect Element, then you can right click and "Copy as HTML"

For IE/firefox, following bookmarklet works:
https://www.squarefree.com/bookmarklets/webdevel.html#generated_source
For google chrome, right click on any element and choose 'Inspect Element' option. It will show the position of element in DOM. Now right click on '
For opera, right click on any element and choose 'Inspect element'. This will start opera dragonfly. In dragonfly window, Click on 'Expand the DOM tree' button (first button with a dot and two arrows) and then 'export the current DOM panel' button (second button)
In IE, open the webpage and press F12 to open developer tools. Click View->Source->DOM(page) or shortcut Ctrl+Shift+G in developer tools window. This will show the complete currently visible DOM.
For firefox, alternative is Web developer toolbar extension and choose View Source->View Generated source in it.

you could also write a perl script with the Library mechanize.

Related

Safari Developer menu - show executed JS on event

Is there a way in the Safari Developer menu to show triggered/executed JS functions/code on events on a web page (for instance a button is clicked)?
Yes, it posible, first you have to enable the Inspect Element:
here a tutorial:
Choose Safari > Preferences, and click Advanced.
At the bottom of the pane, select the “Show Develop menu in menu bar” checkbox.
then open the Inspect Element and go to the 'Sources' tab
here you will see the Breakpoints and start play.

Inspect element without right clicking in Chrome

When I inspect html/css on a website, I usually open the chrome developers panel ctrl+shift+I → right click context menu "inspect" so I can highlight that class
however, sometimes I'm trying to inspect an element that is sensitive to "right clicks" events , e.g. if I right click an item on the website functionality changes
Example:
so I can't inspect an element
Normally I inspect elements like this (e.g. stackoverflow)
How do you inspect an element without using the right click button?
Normally I would have to just dig through the chrome developer's panel elements and just go one by one to find said element, which takes a really long time
I must be missing something important here about chrome's inspect element tools.
Could someone enlighten me here a better workflow / maybe chrome extension tools?
Try pressing ctrl+shift+c. This will open the dev tools in element selection mode, allowing you to left-click on elements to jump straight to them in the elements view.
You can press Ctrl+Shift+C to enter a mode where you can mouse over elements and it will inspect it. With your mouse over the element you want to inspect, just press Ctrl+Shift+C again and your element will be selected in the developer panel.
You can open the dev tools on a different windows and refresh your page or use firebug.
or use Firefox

How to view and copy to clipboard javascript generated source within an iframe from a web browser?

A website has iframes. One iframe has javascript generated source which I would like to copy to clipboard.
I tried using FF web developer, but "View Generated Source" only shows me the source of the main iframe. And "View Frame Source" only shows the static source, not JS generated.
An example is on fiddle.tinymce.com - how to copy to clipboard the generated source of the lower frame containing the editor?
Use Chrome.
You can right-click and choose "Inspect elements" to see the actual HTML.
In Chrome, press F12 and look at the Network tab. This will show you a list of the files that were downloaded with the page. Right-click on the file you want and you can open it in a new tab and easily grab the source from there.
In any browser (Chrome, FF, IE), go to Inspector mode. Then right click on the root of the document, choose "copy HTML" or something similar, each of the above browsers has one option that copies to clipboard the whole html of the current state of the document, with changes made by Javascript.

Using Firebug to show DOM Hierarchy

I am currently using FireBug to debug my javascript and HTML code. I was wondering if anyone knows of a feature where I can mouseover my generated web-page and it will display the DOM hierarchy of where my mouse is currently located. So if I have nested floating div elements. And I mouseover one of the divs, it will show the ID of that div, the id of its parent, the id of its parent's parent etc.
Doesn't clicking the inspect button (second from the top-left on Firebug) do something a lot like that?
google chrome, right click and select 'inspect element'. It brings up the dom tree with the clicked on element highlighted
I am not sure of this is what you are looking for. When you rightclick and use "Inspect Element", you will see the DOM and everything else in firefox.
Right click, Inspect Element also works in Firefox / Firebug
You can also use F12, Ctrl + B in IE 9.
This FireFox extension does exactly that
Web Developer Extension
You can set it to outline elements as you hover over them and it will display their info, as well as their position in the dom tree.

firefox view source code

I noticed that the source code shown in Firefox appears to be incomplete. I have the latest version. When using the Firebug plugin to look at a webpage, I am able to find elements which are simply not recognized by Firefox.
This is for a automated script I am working on.
I am wondering several things:
Why is a firefox plugin able to recognize elements Firefox is not?
Is there a way to pass the source from Firebug engine to Firefox, or any other viable workaround which would enable Firefox to recognize all of the elements on the page?
My guess is that these "hidden" elements have been created by javascript after the page load, but I'm not really sure.
I'd say Firebug is displaying what's in the DOM (i.e. what is in the page at the instant you are looking at it), while View Source is displaing the source that has been received from the server (i.e. what is in the page at the first instant it's displayed).
If you want to see the "source" from the DOM, maybe the Web Developper Toolbar Extension can help : from what I remember, it provides a "view generated source" option.
For No.2
Open Any Page, and Press Ctrl+A or Select All, and right click, click View Selection Source, You should able to see any html nodes as you see in Firebug.
Your guess is correct. "View source" reveals exactly what the server has passed down to the client. What Firebug shows you is the "rendered source code", which is taking the current DOM state, and rendering it back into a HTML representation, that may or may not look very much like the actual HTML code written.
Your question is unclear.
The View Source command displays the raw HTML that was downloaded from the server.
Firebug's HTML tab shows the elements that are currently on the page.
Any changes made by Javascript will show up in Firebug (which gives a live view), but not in View Source. (Because they weren't in the HTML that was downloaded from the server)
Firefox's View Selection Source command, which appears only when some text is selected, shows the live source from the DOM and should show exactly what you see in Firebug. (Except that it won't update after you click it, so if the DOM changes again, you'll need to click it again to see the change)
To see the source for the entire page, you can press Ctrl+A, then right-click and click View Selection Source.
If theis doesn't answer your question, please elaborate.
Firefox shows the source code as it comes from the server, any alterations to it via JavaScript will not show up. Firebug keeps track of the changes to the document and updates the source code.
Doing Ctrl-U or View | Source will just give you the static HTML document that is returned by the server.
What you probably want to look at - and what you are seeing in Firebug - is the rendered DOM. If you install a Firefox addin such as Web Developer you will be able to view the rendered DOM - i.e. the HTML dynamically rendered in javascript and the actual document the renders in the browser.

Categories

Resources