Page of the site, built on a client-side xml + xsl technologies, some browsers like Firefox, Google Chrome, etc.. save the file as pure xml. Without the xsl and css. As a result, saved the page looks horrible. Is it possible to force the save page as html?
If you use Firefox's save dialog (6.0.2), you can see that one of the options is Web Page, Complete. This means that just like normal XML, it also finds all the other linked documents (like CSS files for example) and saves them in the appropriate directory for offline browsing.
If your browser has this feature, then you can see it in its save dialog. Otherwise, it simply doesn't have it.
In Chrome: open F12 to bring up developer tools. Go to Elements tab and right click on html-element and select Copy../Copy element in context menu. Paste into you text editor of choice and save it as an html page.
Related
I have a local copy of a webpage saved as HTML. I want to convert this HTML file into an output similar to the output of the "reader view" found in modern web browsers.
Is there any tool I could use for this (UNIX-like or Windows)? Preferably I want to use is on a collection of local HTML files.
Thanks in advance.
jmt
There is an option that more or less does that: disable CSS. You will then get only the markup, not the makeup. Next, copy and paste the article text. To disable CSS in Chrome, see https://www.techwalla.com/articles/how-to-disable-css-in-chrome. In Firefox, click View > Page Style > No style.
I'm creating a extension and here is what I want to do.
I have site "www.aaa.com" and the extension I developed can read and navigate DOM element by javascript. However, when I click the extension icon, I'd like get and read the HTML source from "www.bbb.com".
The current page is "www.aaa.com", but want to get the source of "www.bbb.com" in the current page.
How can I do this??
The Chrome "Inspect element" HTML editor is very easy to use with lots of cool features, I love the collapsible elements, highlighting, and live updates so I can see exactly what's happening. Usually when I'm writing I'll create an empty file and open it in Chrome so I can start there. Unfortunately I have to copy everything to the document whenever I want to save and if I accidentally click on a link I lose everything. Is there an extension or something I can use to save the file (Maybe even to google drive?) I've recently accidentally lost a bunch of work a couple times in a row so I need to change something. I've tried brackets, atom.io, shiftedit, and codepen but none of them have the convenience and features of Chrome's console.
Thanks
You can use the Workspaces feature to work with files from DevTools so changes will persist to your computer automatically. Works with all source file types.
Check out Snippets in Chrome DevTools. The code snippets are stored in the browser, and you can run them on any page/site. I find them very useful myself.
You see the DOM in the "Elements" panel. The page may have JS that changes the DOM Tree.
So what you see in the Elements panel is not the source HTML. Therefore you can't just change things in the elements panel and save the changes to your HTML file.
I am working in Chrome developer tools and looking for a way to show HTML entities by default.
The view I see is this:
Whereas, the view I need is this:
Does anybody know how I can enable the view I need?
I know there is a theme engine for Chrome but is there an existing feature that fits my needs?
Thanks guys ;)
I had this same question and discovered that with chrome, right-click > View Source code, shows the pure un-decoded(un-evaluated) html entities while the right-click > inspect option seems to evaluate them... may help someone:)
In Google Chrome the correct way to see the actual source of the document that is currently loaded is to click the Sources tab and choose the file from the tree on the left. If you have a unique string on the line that you're searching for, you can press Ctrl-Shift-F to search all files for that string.
RightClick -> View Source is incorrect because it reloads the document, which may cause unexpected behaviour.
Inspect Element is incorrect because it displays the current DOM, not the HTML source.
You can't: The DOM Inspector shows a view of the DOM, not the source code.
The HTML has already been parsed and the entities converted to characters in text nodes.
The Inspector shows an HTML-like view because it is easy to understand. It doesn't reflect the original source code.
Browsers have an explicit "View Source" feature if you want to see the source code.
In my Google Chrome extension, I need to be able to get the current page HTML, including any updated Ajax HTML (unlike the browser's View Source command, which doesn't update it).
Is there a way to get it as a string in my Extension?
Suppose my extension is a right-click context menu called "View Actual HTML Source" which should print the current HTML to the console, or maybe count the number of certain tags there. I wasn't able to find an easy answer to this.
You can get the current state of the DOM as HTML programmatically using document.documentElement.innerHTML
Or just use Developer Tools
I followed the exact solution here, and this gave me the Page Source HTML:
Getting the source HTML of the current page from chrome extension
The solution is to inject the HTML into the Popup.