If using Firebug, we can click on the HTML tab, and click to expand each element to see the generated HTML code. Is there a way to expand it all or get a plain text file?
I just accidentally found out that there doesn't even need to be Firebug. We can just press CTRL-A (to select all) on the webpage, and then right click and choose "View Selection Source", then we will get a plain text file of the "current HTML code", even will see a <div> that is the Firebug panel that is before the <body> tag if Firebug is open. But it seems like a weird way to invoke this. Is there any other way?
(Update: generated HTML usually refers to the HTML after JavaScript changes the DOM. It is the current DOM tree instead of the original source code)
In Firebug's HTML tab, right-click the root node and select "copy HTML". Then paste to a text editor.
Without Firefox Add-Ons, you could use a bookmarklet like this:
javascript: var win = window.open(); win.document.write('<html><head><title>Generated HTML of ' + location.href + '</title></head><pre>' + document.documentElement.innerHTML.replace(/&/g, '&').replace(/</g, '<') + '</pre></html>'); win.document.close(); void 0;
With the Web Developer toolbar add-on, select View Source - View Generated Source. And if you want to view the original source, select View Source - View Source (or simply press CTRL-SHIFT-U)
Using the Firefox DevTools (integrated in FF since version 35) you can view the generated HTML opening the web inspector (CTRL-shift-C) and selecting the HTML tab.
You can copy the generated HTML by right clicking on <html> and selecting Copy inner HTML.
If you're looking for a programmatic solution, you can just feed the document into an XMLSerializer.
I don't know if I understood your question well, but here is something really simple and you won't need another addon.
Every browser has a native function to view the source-code of the actual page, just right-click and look for something that resembles "source" or "code".
In Firefox for example it's just "Souce-code", in Chrome it is "View Page Source" and so on.
That being said, Web Developer toolbar is indeed a great addon, especially if you do CSS too.
Related
The Situation
I need to automate the copying of a HTML link to the current page that
is viewed in the current Firefox Tab into other WYSIWYG editors. This
is not the same as copying just the plain-text of the URL, nor is it
the same as pasting just the plain-text of the web pages title. This
is also not the same thing as navigating to some other web page that
has the HTML link to the page of interest, selecting the text with the
mouse cursor, and typing CTRL-C to copy it into the current operating
systems clipboard (both Linux and Windows, should not make any
difference). Only the update to the clipboard is to be automated; the
pasting from the clipboard into the target application will be done
manually.
The desired use case is as follows:
The user browses to any web page from within Firefox.
The user types some user-specified key sequence that is not
in conflict with standard Firefox built-in key bindings.
Firefox will then do only part of what Copy Link Bookmarklet
does: Instead of opening up a new separate window/tab and
constructing and rendering the HTML for the link, and then
requiring the user to waste motion in selecting and copying the
link into the clipboard, the extension will then format the HTML
itself and copy that into the clipboard directly.
The user then selects any of the targets described below and
types CTRL-V to paste the formatted text.
The user then sees the link as a link in that target area, and does
not see anything literal like http://...
For example, if the webpage browsed to was http://www.google.com, and
the user clicked the user-defined key sequence, and if the user pasted
it into some Google Document, what they would see in that document is
not http://www.google.com nor would they see Google, but instead
would see what you would see when you read this in StackOverflow in a
web browser: Google
Now, there are Firefox extensions and bookmarklets that come close,
but they all involve no net reduction in mouse motion and/or key press
overhead, which is the most time-wasting aspect of this frequently
occuring use case. My searches for an existing extension turned
up nothing that exactly meets my needs (see Research section
below). Therefore, I think I may need to roll my own extension (or
modify an existing one), unless someone can point me to an existing
extension that provides this functionality.
The extension I have in mind should work in Firefox version 11 or
greater running on either Linux or any version of Windows. Only
Firefox and a suitable Firefox extension should be needed, and not any
other special software.
Targets of the paste should be:
GMail compose text areas
Google Documents
Microsoft Word documents
Microsoft Outlook compose text areas.
Any other WYSIWYG editor such as the Blogger post editor.
Notepad (in which case it is the web page title that is pasted only
and not the URL, or both the web page title and URL as separate
plaintext; either way).
About user-specified key bindings: If there was an extension already
that did the above but without providing the ability to bind a
keybinding to it, then I would expect to be able to use the keyconfig
extension extension to handle that aspect. Actually, that might
even be preferable; I don't know yet.
Research
Below are approaches I investigated that came close to what I want,
but did not exactly meet the need:
Hacking on Copy Link Bookmarklet won't work because, from what I can tell, there is no way to update the OS's clipboard from a bookmarklet, hence why I think that a Firefox extension is required.
In a Firefox extension, how can I copy rich text / links to the clipboard?
3 FireFox Addons to Easier Copy Links and Anchor Texts -- None of the extensions listed do what I want because they force you to use the right mouse button and navigate down one or two levels of context menu, which is wasted motion.
Copy Link Text (CoLT) -- CoLT also supports copying a hyperlink and it’s associated text as a rich-text formatted link, however it does not include a default keybinding. It looks like someone else is attempting to tie keyconfig to CoLT, which might be an option as a solution.
Copy URL Plus -- Looks like it has the copy-to-clipboard logic, but doesn't look like it has been maintained since Firefox 1.x timeframe.
I am answering my own question:
The CTRL-SHIFT-F11 binding will silently stop working if both keysnail and keyconfig are installed into the same Firefox browser. The fix for me was to simply uninstall keysnail as I don't use it.
I did not actually need to write my own Firefox extension, but I did
need to scrape out a bit of code that copies the richtext link from
the Copy Link Text (CoLT) extension and apply it directly as a
binding into the keyconfig extension as follows:
Install the keyconfig extension.
Restart Firefox.
After Firefox loads up, type CTRL-SHIFT-F12 to bring up the keyconfig configuration menu.
On the bottom of the page, click on the Add a new key button.
In the Name field, type in some suitable name such as Copy Rich Text Link to Current Page.
Type in the following chunk of Javascript code (This code I carved
out of the objCoLT.CopyBoth function inside the content/colt.js
file inside the Copy Link Text (CoLT) extension):
var url = content.document.location.href;
var text = content.document.title;
// Use the users selection instead of the title if text is selected:
var selection = document.commandDispatcher.focusedWindow.getSelection().toString();
if (selection != "")
{
text = selection;
}
var richText = "" + text + "";
var xfer = Components.classes["#mozilla.org/widget/transferable;1"].createInstance(Components.interfaces.nsITransferable);
xfer.addDataFlavor("text/html");
var htmlString = Components.classes["#mozilla.org/supports-string;1"].createInstance(Components.interfaces.nsISupportsString);
htmlString.data = richText;
xfer.setTransferData("text/html", htmlString, richText.length * 2);
var clipboard = Components.classes["#mozilla.org/widget/clipboard;1"].getService(Components.interfaces.nsIClipboard);
clipboard.setData(xfer, null, Components.interfaces.nsIClipboard.kGlobalClipboard);
Click Ok.
Back in the main Keyconfig dialog, <disabled> should be shown in the text field to the left of the Apply button.
Click in that text field, and type the keybinding you want to associate with it, such as CTRL-SHIFT-F11.
Click the Apply button.
Click the Close button to close the Keyconfig configuration dialog box.
To test this out, proceed as follows:
In Firefox, navigate to some arbitrary page.
Type in CTRL-SHIFT-F11 (or whatever keybinding you chose above).
Notice that no dialog boxes popup; that is intentional.
Open up Google Documents, and Create a new document.
Click in the new document, and type CTRL-V.
You should see the HTML/rich-text form of the link pasted in.
Click on the link and then click on the URL to the left of Change.
The browser should open up the original page corresponding to that URL.
I have been able to copy URL as HTML with the following bookmark:
javascript: navigator.clipboard.write([new ClipboardItem({ ["text/html"]: new Blob([`${document.title}`], { type: "text/html" }) })]);
Unfortunately in firefox the Clipboard write API still requires to set thedom.events.asyncClipboard.clipboardItem to true in about:config.
Several extensions exist that offer copying of title and URL but few seem to support Rich Text creation. The key is that the copied text needs to be formatted in html with a href and it needs to be copied as a text/html type.
The extension I went with in the end is CopyTabTitleUrl. (GitHub) It supports both requirements and also has a keybind feature along with a toolbar button that can also function as a single-click copy.
Set the Format option to:
${title}
Then Activate Extended Mode and make sure to check the "Copy in text/html format" option in Other. After that, using the format copy, the result can be correctly pasted into Office applications. And Stack Exchange evidently as the links above were created by the add-on.
Note that the Edge implementation of URL copying seems to be somewhat different still. With a default plaintext paste, Edge will just paste in the URL while this approach will of course paste unformatted HTML. But it's close enough.
This is a real 2%er but here goes, I have created a winform in VS2010 with Gecko 2.0.1-0.10 (latest release) webbrowser control, I am using a touch screen to navigate. Sometimes when clicking a hyperlink it will select text rather than navigate, on the DomMouseUp event I want to check to see if there is selected text, if so I want to see if it is a hyperlink and if it is, where that hyperlink goes to. I had a mess around with GeckoSelection but nothing looked obvious. I am looking for a way to see if what is selected within the web browser is a hyperlink, any thoughts?
I've worked it out : for anyone interested in such things, use DomFocus on the gecko control:
m_strInnerHtml = geckSel.ActiveElement.Parent.InnerHtml.ToString();
That will give you the innerhtml of the selected item, from here you can extract the href tag and get the url, navigate to it, hey presto :)
Update: An even better solution is to use (in DomFocus again)
m_strInnerHtml = geckoWebBrowser.Document.ActiveElement.GetAttribute("href");
This will return the actual hyperlink address, one thing to watch out for however is if you're on google for example and select the "Advertising" hyperlink at the bottom of the page, it may return "/advertisingpage/" which must be appended to the original url. Clicking a hyperlink away from google will return the full address however.
Very good behavior gives this call:
m_strInnerHtml = geckoWebBrowser1.Url.AbsoluteUri()
I have a project with a very standard layout so I suspect this is a common problem:
<body>
HEADER-CONTAINER DIV - includes superfish jQuery menu plugin but am open to other menu options if necessary.
CONTENT-CONTAINER DIV - depending on the page, contains several other jQuery plugins, HTML, javaScript, etc.
FOOTER-CONTAINER DIV
</body>
I'm looking for a elegant and well performing way to have a superfish menu click load the CONTENT-CONTAINER DIV with new content. The content contains both HTML and javaScript. I also want the solution to change the URL so if someone returns later to /my/page it will reload to the correct location (similar my understanding of Backbone.Router).
Any suggestions? If possible, please provide a link to a page loading into a div example and running any javaScript included in the load.
Superfish or not this is not really a problem. Whenever you add html to the page the browser will execute any javascript or load any javascript file this new html snippet will contain.
So when you click on your menu, you load (or generate) new html and replace your content div with this new content, the browser will execute the scripts.
You will have to rebind all events on that newly inserted content because jQuery will loose track of that.
I searched around and found the a decent example that shows how to take any #url and reload a div. Example found at http://thomasdavis.github.com/examples/restful-app/
So we have reached that stage in a web dev project where we need to see how things look in IE.
Sigh.
So the fabulous Firebug is not available for IE. But a lite version is - as a bookmarklet, and is apparently compatible with IE6+. But how the how the hell do I add a bookmarklet to IE8?
I am unable to drag and drop to the Favourites bar (is this the same as bookmarks?). I can't add it through the Favourites add option as it contains "illegal" characters.
So how do I do this? All I want to do is inspect the DOM.
Thanks
this is how I did it (IE 8.0.7600.16385 on Win7):
Go to some Firebug Lite page (http://getfirebug.com/firebuglite).
Click the "add to Favorites Bar"
button on the Favorites Bar.
This
will give you a bookmark to
http://getfirebug.com/firebuglite.
click on the "Firebug Lite" link in Firebug Lite page (http://getfirebug.com/firebuglite).
properties poup will be open. Copy the URL within the popup
Right click on your new bookmark and choose Properties.
Paste the URL into the URL box and close.
If you hover over the new bookmark, it should show javascript:(function(F,i,r,e,b,u,g,L,I,T,E)... etc instead of the link.
Please use this in your jsp
<script type="text/javascript" src="https://getfirebug.com/firebug-lite-debug.js"></script>
and you are done.
I am creating a Firefox extension that is somewhat similar to Firebug. There is a panel (or vbox) at the bottom of the browser that allows users to specify colors to certain Html elements. When they click the OK button, I would like these colors to get updated on the current web page.
I have my JavaScript working when I click the button (i am just throwing an alert), however when I change that JavaScript to change the css or styles of an element (by either using document.getElementById or jquery), nothing changes.
Is there something with Firefox extensions that I am missing? Any help is appreciated.
Let me know if you have any questions. Thanks
https://developer.mozilla.org/en/Extension_Frequently_Asked_Questions#Accessing_the_document_of_a_webpage_doesn%27t_work
You want content.document.getElementById() and similarly for every other construct you use.