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.
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.
Lets imagine I have a simple page. With the following content.
<form>
<input type="text" id="startText">
</form>
I have a chrome extension with an script that triggers on this page loading. I also have configured all the relevant permission in chrome (i.e. clipboardRead). The script that triggers on page load is called action.js. It currently has a single line of code:
document.getElementById("startText").value = "text";
I know that I can use the "execCommand('paste')" function to paste within a chrome extension. But I can't figure out how to modify the above code, so that it pastes the contents of the user's clipboard into the input element.
I would try something like:
document.getElementById("startText").value.execCommand('paste')
But that, unsurprisingly, does not work.
The clipboard can only be accessed via background pages, due to security reasons. The problem is that background pages cannot interact with the DOM, only content scripts can. Check out this gist, which solves this problem with messages passing between the background page and the content script.
As of 2014 and this bugfix, you can now use copy/paste directly in content_scripts, assuming you have declared the proper permissions in the manifest.
It's important to remember that execCommand('paste') does not return the contents of the clipboard, but actually triggers a paste action into the focused element and selection region of the document. Therefore, the code to paste into your input element would be:
document.getElementById("startText").select();
var didSucceed = document.execCommand('paste');
If you wish to capture formatted text, you will need to use a DIV contentEditable=true instead of a TEXTAREA.
If you would like to see a working example that uses the older method of using a background page, you can see my BBCodePaste extension.
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?
I'm trying to make a js app that reads and checks HTML/JS code inserted by the user. I'm using document.[some div].outerHTML to retrieve the full html contained in that element.
But, I noticed that IE10 (and other versions of IE) modify HTML returned by .outerHTML property. In particular, it changes the order of parameters of any element. For example:
Original code:
<a id="test" class="myclass" name="test" href="mylink">link</a>
Becames something like:
HTML returned by .outerHTML
<a name="test" href="mylink" id="test" class="myclass">link</a>
As you see, the name and href params are reordered.
The odd thing is that, if I inspect the code via "view source" on IE, the code is correct and not-reordered.
How come this happens only with .outerHTML? I tried with other browsers, and only IE seems to have this behavior.
Is there a way to retrieve same HTML as "view source" by JS?
Thanks in advance,