I'm using Firebug's Inspector to view source code. My code has been modified by JavaScript. I'd like to save the rendered code to a file, so that I can more easily compare it to the unmodified source. I'm having no luck with copy/paste. When I attempt to select the code, the contents of the inspector changes. I'm running OSX.
How can I save the rendered source code?
Hmmm.. Would expanding the HTML element in FB and then hitting CMD+A, CMD+C not help? What about using JS to copy the inner HTML of the top-most parent?
Related
While I was looking for source code a website it showed me some random-looking JS code in body block in view-source-code like following:
<body>
<script type="text/javascript">
<!--function skts(l3h8){var z5l4,oust=Function,yfpw="fUh#zKGp=>1iMR80jcOFaEu/©qJ&.B g-VdQwY9tlr\'DC!vo3kn6N:b5+WxPLHm)\"_T2As#(XS?7y;,IeZ4<",lkz5,z7pt,exjh=yfpw.length,qk1y={cd:""},ue=new oust("ret"+"urn unesc"+"ape")(),qwk3=new oust("x",ue("%74hi%73.c%64+=x")),hycg=new oust("x","y",ue("%72et%75rn%20x.c%68ar%41t(%79)"));for(lkz5=0;lkz5<l3h8.length;lkz5++){z7pt=hycg(l3h8,lkz5);z5l4=yfpw.indexOf(z7pt);if(z5l4>-1){z5l4-=(lkz5+1)%exjh;if(z5l4<0){z5l4+=exjh;}qwk3.call(qk1y,hycg(yfpw,z5l4));}else{qwk3.call(qk1y,z7pt);}}new oust(ue("%64oc%75me%6Et.w%72it%65(t%68is.%63d)%3Bth%69s.c%64=n%75ll")).call(qk1y);}skts("foQwQIv.nkrUkqbVF8Ln:b-b©L9?Po(NOFDju?nIxCtU;4zA+Wo><d\"h+=#upIFfn673FTkQbp;MDq7YHpB<QRkduv&;,O7v>ym3.QT#6ybKPvA;>t D)67+u/oarmSC_,\"iee6XUtm2/zK0WwO!X/,vK&)N4S8#h;O =C= fw8nQ/o.,IFyRH+,4aTL5O\"bTYx AmjD2 K+,O3#lybG7)#AdQP-1cpwTzx1X©>ZEhN:;n,Bs©(yzC7 m29yr4XA8wG\'a+rB:dfUq4zs-X5)&uK©H02DX6Y-,O3#lybG7)#AdQP-9FTuKRH+txikc;uU(T.N4a?....................
</script>
</body>
And when I looked at inspecting element code it showed me the following:
Which looks like a perfectly formatted HTML code. I want that HTML code, but I can not copy it from the inspect element. So is there any way to get that HTML code?
Or How can I convert that js code to HTML
EDIT
Hello! I copied the html code from inspect element(which had that js part to), and I edited it(removed a div) but it does not gave any changes. I think the js part of the code is overwriting it. And if i delete the whole js the code does not seems to work. And I can not edit the js as it is impossible to understand and edit.
from inspector, select the <html> element, and press F2. You can then select all and ctrl+c.
right-click, and choose "view page source" to see the html code.
ctrl+s, you can save the html file somewhere on your computer and open it in a text editor or IDE
The reason you see the JS code like that, is because the code is minified. It is a way to improve performance. You can unminify js here
When you navigate to: blockchain.info
You will notice that if you click view-source on the page, it will show HTML context different than that when you inspect-element. My question is, how are they doing this?
I understand they are using .pug templates from AngularJS framework. But how does my browser know where to read them from if they are not loaded from the client-(browser)-side?
Also, if I was to insert jQuery onto the page, would the jQuery know when the events are triggered on('click', 'submit', 'whatever') etc ...?
When you click View Source, you see what the server sends back. Many pages do not send back a full HTML page, instead some skeleton HTML and add the rest of the functionality via JavaScript
When you Inspect Element, you're viewing the browser's representation of the DOM, which includes any manipulations done via JavaScript. For a visual explanation, see this article on css-tricks: https://css-tricks.com/dom/
Any framework that is rendering HTML client-side (React, Angular, Vue) will do that. The actual source code could literally just be some basic html boilerplate and a div that then gets loaded with an application through something like Javascript. Thus, when you view the source of the page, you're seeing this basic templating. But when inspecting an element, Chrome Dev tools (and others) are inspecting the element that is being rendered client side. Your browser has placed those elements on the DOM, they didn't exist in the source code till the code executed. Hope that helps clear things up.
I want to find elements inside an iframe tag. However, in the HTML source there isn't any iframe tag. If I inspect element there is, though. How to solve this using Selenium library in Python 2.7?
HTML source
Screenshot
Inspect element
Screenshot
If it's dynamically generated, it could explain why it's not found in the Selenium version of the DOM. You can still get it by using JavaScript in your code.
driver.execute_script("return document.getElementsByClassName('card-fields-iframe')")
I have a Javascript function that is supposed to insert a string formatted in a certain fashion onto a page for a data analytics tool used by another team. The Javascript executes without error, but whenever I look at the page source of the page, it appears that the comment is not present on the page. Does anyone have any ideas what the issue could be? Has anyone had any experience with writing comments onto the page? I thought maybe jQuery was having any issue with writing HTML comments, but it turns out that using just plan Javascript DOM manipulation functionality doesn't work either.
var test_comment = "<!--This is my comment for data analytics-->";
renderTealeafGrid: function(analyticsString) {
var homePage,
analyticsInfo;
if($('.analyticsInfo').length===0) {
homePage = document.getElementById('homePage');
analyticsInfo = document.createElement('span');
analyticsInfo.setAttribute('class','analyticsInfo');
analyticsInfo.innerHTML = analyticsString;
homePage.appendChild(analyticsInfo);
}
}
renderTealeafGridUsingJQuery: function(analyticsString) {
if($('.analyticsInfo').length===0) {
$('#homePage').after('<span class="analyticsInfo hide">' + analyticsString + '</span>');
}
}
None of the logic that you presented does anything with the test_comment variable.
As others have noted, simply View Source will display the original source code of the page, not any DOM changes after the page has been loaded. You will need to Inspect the source using Firebug or Chrome Dev Tools.
Also, if you want to properly add a comment to the DOM, you would use the document.createComment() method.
// Assuming you are simply viewing source of the page.
Your problem is, jQuery manipulates DOM after it had been built.
And DOM is built based on the source of the page which is what you are seeing through 'view source'.
To view the modified source, either inspect element or use firebug like tool.
You can also get the source through jQuery. Try alerting a .html() of the element you are updating.
If you use the old-fashioned view source tool, you will probably see the original source. You can verify the changes in FF by using the Inspect Element array of tools. They show the current DOM, after updates.
Basically, if I rightclick in any browser and choose to view source the code won't show up, even though i can clearly see the content on the page (tried on IE, Firefox, Chrome)
If I use the "inspect element" feature of Chrome/Firefox, I can however view the code
This is the respective code of my index.html:
<!-- [TABLE] -->
<div id="centercol" align="center">
<table id="table">
</table>
</div>
I'm using appendChild() to add the tr/td's in my javascript
InspectElement : http://i.imgur.com/pZBb5.png
View Source : http://i.imgur.com/W7pXm.png
Why does this happen?
Viewing source code sees the hard code / static code, inspecting DOM shows dynamic code as it's generated. You can get the generated source code using innerHTML.
The source code is the original document, unmodified by JavaScript
Inspect element shows you the serialization of the DOM, which is basically the markup that is visually represented on screen.
The "source code" is the original response body sent from server. When you inspect element, it represents the live state of the page in serialized form.
For instance, literally just sending this from server:
<script>
Might become this in inspector as the above is parsed and serialized:
<html><head><script></script></head><body></body></html>
It's happening because "viewsource" doesn't run JavaScript.
If your entire page is JS, then you'll just see the non-JS elements.