Is there a way to (without inspecting elements via chrome dev tools) resend the http request that displays a pages's source code?
I load some dynamic HTML, and it looks fine in my inspector, but I'd like to see it in the source code view. Is there a way to tell my browser to resend the source but with the dynamic html included?
Nope.
The devtools browse the dom, not the source. If you manipulated the dom with js, it will no longer match the source.
Requested workaround:
Open devtools
Right-click the <html> element and select 'Edit as HTML.'
Hit Ctrl+A followed by Ctrl+C
Open your editor of choice and paste code
This will be a snapshot of the dom.
You can view the source code of ajax/xhr requests (if that's what you're looking for). Try Chrome using the dev tools. Go to the Network tab, turn on the recording button, then make your ajax call. It should pop up on the left. You can then use the "Response" tab to see the actual source code that was sent to you.
You can also right-click a network request and do "Replay XHR" to re-send your ajax request. Your script probably won't process it, though.
I'm not sure if this is exactly what you are looking for, if it isn't, can you clarify? "Dynamic HTML" is a bit ambiguous.
(FYI The DOM is source code that has been modified by the browser. The original source code is under right click > view page source.)
Related
import requests
ip = requests.get("https://ifconfig.io/ip").content
print(ip)
if i run this code the output is b'1.1.1.1\n'
but if i press f12 on the actual page i can see there's an html code.
so what's happening exactly? why i don't recive the html stuff like <head>, <body> and other thing, and why it's in byte?
i also tried to download the page (just pressing ctrl+s) and i downloaded a .txt file with only written 1.1.1.1
What you're seeing is a side-effect of the web browser's dev tools. When examining a web page using dev tools, the browser shows its "fixed up" DOM instead of the raw HTML returned by the server. This may include closing HTML tags which were not properly closed, or in your case, the browser creates and injects its own HTML template for styling the text/plain HTTP response. Printing the document.body from the console shows the styling applied:
<body><pre style="word-wrap: break-word; white-space: pre-wrap;">[IP]
</pre></body>
Whereas right-clicking the page and selecting "View Source" shows just the IP address.
Don't rely on the Elements tab in the dev tools if you want to see the literal response from the server. Instead you can go to "Sources" and select the page, Network > Response for the correct HTTP request, View Source, or use curl (although there's no guarantee that the server won't change the response based off the user-agent).
The element inspector in your browser shows a represention of the document that the browser has built to show you the contents of the text file.
It does not show you the page source.
If you load an HTML document it wouldn't show you the page source either, it would show you a representation of the document after error recovery, normalisation and JavaScript had been applied.
See view-source:https://ifconfig.io/ip for the actual source code of the page.
I have a problem with this page!
when entering it, you can right-click and view the source code via, say, chrome and see the articles with their links..etc. However, when pressing on "المزيد" and viewing the source code again, the source code of the new articles does not appear. Only the source code of the previous articles does.
What would you recommend to solve this problem?
I have pressed on view page source code on google chrome, but nothing appeared regarding the new articles.
The View source option only shows the source code of a page as it was delivered from the server. It does not take modifications performed using JavaScript into account.
The button mentioned in your question loads more content and inserts it into the page programmatically using JavaScript.
You need to use the Elements tab of Chrome Developer Tools to see programmatically inserted HTML code. Right-click anywhere on the page and choose "Inspect", or press Ctrl+Shift+I or F12 on Windows. (Shortcuts on other platforms may vary.)
I just tried something rather trivial: get the source code of a web page (by saving it) and count how often a certain phrase occurs in the code.
Turns out, it doesn't work if that page uses Polymer / web components. Is this a browser bug?
Try the following: Go to http://www.google.com/design/icons/ and try to find star_half in the code (the last icon on the page). If you inspect the element inside of Chrome or Firefox, it will lead you to
<i class="md-icon dp48">star_half</i>
but this won't be in the source if you copy the root node or save the html to disk.
Is there a way to get the entire code?
Reason for this behavior is probably how source viewing( and source saving as well?) works for browser and because shadow roots are attached to web components on the client side.
When you press ctrl-u on a web page, browser essentially does a network call again on the same url to fetch a copy of what server returned when you hit that url.
In this case, when this page renders, browser identifies the component icons-layout and then executes code to attach a shadow-root to this node. All of this happens when your page reaches the client(browser).
When you are trying to save this page, you are saving what server returned not current state of the page. You'll see same behavior if you fire up chrome console and try to save an icons-layout node.
Is there a way to get the entire code?
I don't know how to do it from browser but phantomjs provides a way to save client side rendered html.
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 have recently started using Senchs extJS.. when we see the source file it only displays what ever is the written code, but what the style has applied or any script that added later is not there in the "View Source"
Same for AJAX, when we load anything in any container, it is not there...
but if we're using Chrome and we inspect the element, it show everything....
WHY this behavior?
View Source in browsers typically only displays the downloaded source without running anything at all (including any JS that would modify the DOM). In fact, at least Chrome will create a separate request when you view source to get that code.
As for the reason why, I'm not sure exactly. This is just the standard and is the way that "view source" has worked for long before I was ever a web developer. It is similar to doing a raw HTTP request (i.e. you just get the source; nothing runs to change it). The term "Source" indicates the origin of what you have received, unmodified (think "source code.")
Because that's just how it works. View source only shows the page when it was first served up to the browser.