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.
Related
For my Trac plugin, I have made an export script which converts contents to a different format. The result is an HTML code.
When I click the link, some browsers open the HTML code in a new tab, while others offer to download it as a .print file, depending on their specific settings I think. Opening this .print file shows the same HTML page as opening it directly, but locally instead of from the server.
How can I force it to always open in a new tab?
I think it might be a mimetype issue. If it is, which mimetype can I use to tell the browser to open the HTML code directly? I am currently using text/html as mimetype.
EDIT: some more info
To give some more insight, adapting from a comment of mine below:
I do not create the link myself. The link is provided by Trac, the bug tracking software the plugin is for, and what I do is implement the method that creates the HTML code and let it return the HTML code along with the mimetype. Trac then returns the HTML code either as a file, or as a new tab, when clicking on that content conversion link. What I am searching for is a possibility to specify in the HTML code or mimetype that it gets opened in a new tab directly.
Maybe there is some kind of mimetype specifying the (HTML) text as an HTML web document instead of HTML file (if that distinction even exists).
Or an HTML/XML header or doctype specifying whether it gets downloaded or opened by a browser. I think the browser need to get that information from somewhere.
Or maybe there is an option to set in Trac.
I hope these ideas of mine about what could exist can help those of you who are versed with either or some of these to find a solution. I could not find a solution through my research yet.
If you have a link that "directly" opens (not in a new tab) and you want it to open a new tab, one way of doing it is
This will create a blank page, then paste the link there automagically and thus you will have a new tab with the desired page.
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.
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>');
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.)
As the title states, I am wondering if there is a method to obtain the generated HTML code of a page. Obviously I can inspect the page with web developer tools (browser built-in, or external program) and get it, but I would really like to do it automatically. Perhaps using Fiddler's API it could be possible?
Thanks!
"Source" doesn't get altered by JavaScript after page load, it's the document object model (DOM) generated from the source that gets altered. It is this DOM that is then translated to the GUI, and is altered with every change as long as the page is not re-loaded.
The DOM is not a string of HTML code, it is an in-memory hierarchical object representation of the page. The browser does not maintain an up-to-date, flat-file representation of the DOM as it gets altered, which is why when you "view source" you only ever see what was originally sent to the browser over HTTP.
The node-for-node representation of the page/DOM, in developer tools such as Firebug is the closest you'll get to a re-generation of the source code (AFAIK) without building some new tool yourself.
You may be able to write a script in Python that would take a variable (the URL) and insert it after a command that would download the webpage, such as wget.
Googling it, I have found this to parse HTML files: maybe you could wget the index.HTML and use one of these:
How do you parse and process HTML/XML in PHP?