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.
Related
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've got a problem getting the "real" source code from a website:
http://sirius.searates.com/explorer
Trying it the normal way (view-source:) via Chrome I get a different result than trying it by using inspect elements function. And the code which I can see (using that function) is the one that I would like to have... How is that possible to get this code?
This usually happens because the UI is actually generated by a client-side Javascript utility.
In this case, most of the screen is generated by HighCharts, and a few elements are generated/modified by Bootstrap.
The DOM inspector will always give you the "current" view of the HTML, while the view source gives you the "initial" view. Since view source does not run the Javascript utilities, much of the UI is never generated.
To get the most up-to-date (HTML) source, you can use the DOM inspector to find the root html node, right-click and select "Edit as HTML". Then select-all and copy/paste into your favorite text editor.
Note, though, that this will only give you a snapshot of the page. Most modern web pages are really browser applications and the HTML is just one part of the whole. Copy/pasting the HTML will not give you a fully functional page.
You can get real-time html with this url,bookmark this url:
javascript:document.write('<textarea width="400">'+document.body.innerHTML+'</textarea>');
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.
I know this question is weird, but anyway I want to know it,
In web browsers or generally we can know the page source of a url, but I had some page source (HTML Code) and now I don't know the url of that page source. Can we generate a url from that page source or is there a way or anything that we can do to get a url from the page source?
When I searched I am getting page source from a url, so I am asking here.
If #Wex is headed in the right direction with his answer and based on your comment then I'll answer with this.
You can get the "Web Developers Toolbar" add-on for FireFox which has an option to "View Generated Source"
this is the same a selecting the whole page and using "View Selected Source" in FF. This will give you the DOM of that page including javascript render code.
If you're asking if there is a way to get the original url from source code the answer is no. Why? Because Google doesn't search the source code, it searches content. There also could be a thousand different websites that use pieces of that code.
In Chrome, you can view the source of any webpage by preceding the url with view-source:. As far as I know, this is the only browser that allows you to do this; Safari and Firefox for instance, shows the source in a popup window which can't be accessed in a regular window.
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.