How to show JavaScript output in page source code - javascript

In my web page i have use some JavaScript and its works fine and result shows what i needed. but when i go to view page source i have seen only JavaScript code but can not see the output. Below is my code.
var link = document.createElement('link');
link.setAttribute('rel', 'canonical');
link.setAttribute('href', location.protocol + '//' + location.host + location.pathname);
document.head.appendChild(link);
</script>
This code woks good. when i click on "Inspect" on Google chrome i can see the its works. but an not see the output when i click on "View page source".
Can any one tell me how to show the output result in source code??

The view page source context menu option only show whats rendered from the server side. It does not contain whatever rendered on the client side.
If you want to see client side rendering you use inspect element.

In Chrome, if you right-click the element and select "Inspect" the current DOM will be shown in the developer tools Elements panel. It will resemble HTML from "view page source," and include any changes you have made to the DOM via JS.

View Source and Inspect Element are two browser features that allow developers to look at the HTML for a particular page.
view simply shows the HTML as it was delivered from the web server to our browser or client side.
When we inspect an element in Chrome developer tools (using the right-click menu or F12), we are looking at the current state of the DOM tree after:
HTML error correction by the browser or HTML normalization by the browser or DOM manipulation by JavaScript

Related

setAttribute behavior on HTML content, JavaScript

Initially I have the following
<a id="myLink" href="#amazinglinktonowhere">My initial link</a>
After I load my webpage, I'm able to get the attribute href and text value to change and update the link to point to Google with new text "It's not the same text anymore" and if I click on it, I'm redirected to the Google page. So probably everything works. But if you check my HTML source code, the link still remains the same.
Why? How can I change it? Is it the normal behavior of setAttribute? And even when I change the content with link.innerHTML = 'blabla'
My Code:
var link = document.getElementById('myLink');
link.innerHTML = "It's not the same text anymore";
var href = link.getAttribute('href');
link.setAttribute('href', 'https://www.google.fr/');
<a id="myLink" href="#amazinglinktonowhere">My initial link</a>
As I wrote in this answer, View Source only shows you source code. That is, it shows you the code as you originally wrote it (or at least, how the server sent it, and generally servers send it as-is).
In your case, you are using JavaScript to update the page as it is running. Your source code remains unchanged. The page itself has its own state, which can be manipulated to your heart's desire. We need to update the state of the page to do all sorts of fancy things, like animations, dropdown menus, play videos, and other interactive features. None of these things change your original code, and by association, they won't change what you see via View Source.
If you want to see the result of your code changing the page in realtime, you should instead use the Inspector / Elements pane in your browser.
Firefox Inspector
Chrome Elements

jQuery href attribute addition visible in Firebug but not in the source code

It may be trivial, but I have following code that is dynamically adding some href attributes to an <a> element, with important variables that are passed to php generated page in a pop-up window.
jQuery(document).ready(function(){
var url = jQuery("a.special-links").attr("href");
var data = "?iframe=true&width=800&height=350&format=popup";
jQuery("a.special-links").attr("href", url + data);
});
When inspected the page with Firebug, the <a> element got the url href properties right, but link does not work. When I inspect the code looking at source code, I see that href data part was in fact not added!
Is this runtime problem or something else ? Thanks for clues...
You do no see the changes when you view source of the page because when you view source you are viewing the actual HTML document that was downloaded by the browser when you loaded the visited the URL. This can NEVER be changed by javascript.
When you write javascript you change something called the Document Object Model aka the DOM. This is an in memory data structure built by the browser as a result of parsing the HTML document. This is what firebug enables you to inspect.

DOM insertion into source

Im trying to insert data into the DOM with:
$("#item_384_week_49").append("test");
<td id="item_384_week_49"></td>
Works great, but the data is only displayed not inserted into the DOM.
Is there a way to do that, so that the source code contains the inserted data?
EDIT
Im trying to work with docraptor to create pdf and excel files.
One of the methods to do so i to refer to a web page and the page then gets converted. http://docraptor.com/documentation#referrer_based
If i have the above jquery working to insert data, the data wont be displayed in the generated file.
If the above adds data to the source code, can someone please explain to me why the data isn't displayed when the page is called?
Browsers take source code and use it to build a DOM, that DOM can then be manipulated but the source code is the source code, not a live representation of the current state of the DOM.
Use a DOM viewer if you want that. Most browsers have one built in these days, Firefox has the Firebug extension.
The data is displayed in itself means it is inserted into DOM.
Most of the browsers display the source (via view-source) as received by them from the server initially.
Use FireFox->Firebug combination to inspect the DOM and you will see all the dynamic additions to the DOM.
It is actually inserted. Are you using the "View source" option in the browser? Because the "View source" option will display the source downloaded from the server, not the modified one by javascript. You could see the changes in the source with the "Inspect element" option on the right click (depending on your browser, this is in the latest FF with Firebug and Chrome).

how to get fully computed HTML (instead of source HTML)?

Given a webpage that uses lots of javascript to generate its HTML, how can I get the final computed HTML being parsed by the browser instead of the source HTML? In other words, presume a page has lots of tags surrounding javascript functions that, when called, return some HTML. When I view the source of the page, I see the script function call, not the HTML it produces.
How could I get all of the HTML produced by a webpage?
I've noticed that Firebug appears able to see the HTML instead of the scripts, but it doesn't appear to have any way to save the whole page, only little segments of it.
Update:
Thanks for all the answers. However, I'm still not getting the HTML I see in Firebug's console with any of those techniques. For my example page, I'm using the 'Info' tab of my own Facebook profile. If you view source on that page, you'll see lots of scripts with the title 'big_pipe.onPageletArrive()'. However, if you look at it in Firebug, each of those function calls renders out to HTML. I tried the right-click on the tag in Firebug, the View Generated Source in the Webdev Toolbar, and the Chrome suggestion, but they all give me the script call, not the HTML.
Any other ideas?
Update 2:
When I said each of those functions renders out to HTML in Firebug, I wasn't quite correct. They only render out if I select them in the page and right click->Inspect Element. Then it appears to render it out. So maybe my question has become how do you get Firebug to automatically render out all of the HTML so you can select and save it? (Or I'm open to any other solution for grabbing this HTML).
With Firebug's HTML tab, you can right click on the <html> element, and click "Copy HTML".
You can do the same thing with Developer Tools in Chrome/Safari.
The Web Developer Toolbar for Firefox has a "View Generated Source" option which provides this functionality.
with (window.open("")) {
document.open("text/html");
document.write("<!--\n"); //for live version delete this line
document.write(opener.document.documentElement.outerHTML.replace(/</g,"<").replace(/>/g, ">"));
document.write("\n//-->"); //for live version delete this line
document.close();
document.title = "DOM Snapshot:" + opener.document.title;
focus();
}
Open console
copy paste the above code and execute
it opens an empty page,
now inspect the page with right click or f12,
copy outerhtml of the comment
paste wherever you want
optionally remove the comment at the start and end
If you want a live version that is clickable, then simple leave out the comment tags in the above code.
document.getElementById('awesomeness').textContent = document.documentElement.outerHTML.replace(/<\/\w+>/g, (e) => e + '\r\n');
<div id="awesomeness" style="overflow:scroll;width:100%;height:100%;white-space:pre;"/>
so yea, use that...
I was having problems with a page generated by Javascript: the content would only render if the page was scrolled down, so the copied HTML was incomplete. This happened to me with all suggestions based on Chrome.
This issue was solved by the following trick:
Open a console, then type a zoom that will render the entire page (or desired contents), e.g.
javascript: document.body.style.zoom = 0.1
Copy the HTML as per other suggestions, e.g.
copy(document.querySelector('html').outerHTML)
When pasting, search the text for "zoom", then revert the value to "1", save the HTML.
It is not possible generally. Here is excerpt from my bookmarklet which relies on non-standard outerHTML:
with (window.open("")) {
document.open("text/html");
document.write("<PRE>");
document.write(opener.document.documentElement.outerHTML.replace(/</g,"<").replace(/>/g, ">"));
document.write("</PRE>");
document.close();
document.title = "DOM Snapshot:" + opener.document.title;
focus();
}
Note: DTD is missing and not retrievable at all.

Is possible to debug dynamic loading JavaScript by some debugger like WebKit, FireBug or the IE8 Developer Tool?

From my recent question, I have already created some JavaScript functions for dynamic loading of a partial view. But I can't debug any dynamic loading JavaScript. Because all of the loaded JavaScript will be evaluated by the "eval" function.
I found one way to create new JavaScript by using the following script to dynamically create the script into the header of current document. All loaded scripts will be displayed in the HTML DOM (and you can use any debugger to find it).
var script = document.createElement('script')
script.setAttribute("type","text/javascript")
script.text = "alert('Test!');";
document.getElementsByTagName('head')[0].appendChild(script);
By the way, most debuggers (IE8 Developer Toolbar, Firebug and Google Chrome) can’t set breakpoints in any dynamic script. Because debuggable scripts must be loaded the first time after the page is loaded.
Do you have an idea for debugging when using dynamic script content or a dynamic file?
Update 1 - Add source code for testing
You can use the following xhtml file for trying to debug someVariable value.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Dynamic Loading Script Testing</title>
<script type="text/javascript">
function page_load()
{
var script = document.createElement('script')
script.setAttribute("id", "dynamicLoadingScript");
script.setAttribute("type","text/javascript");
script.text = "var someVariable = 0;\n" +
"someVariable = window.outerWidth;\n" +
"alert(someVariable);";
document.getElementsByTagName('head')[0].appendChild(script);
}
</script>
</head>
<body onload="page_load();">
</body>
</html>
From answer, I just test it in FireBug. The result should be displayed like below images.
Please look at the "dynamicLoadingScript" that is added after page load.
But it is not found in the script tab of FireBug
Update 2 - Create Debug Breakpoint in dynamic loading script
Both of the above images show inserting "debugger;" statement in some line of the script can fire a breakpoint in the dynamic loading script. However, both debuggers do not show any code at breakpoint. Therefore, it is useless to this
Thanks
It would also be possible to use chrome for the same. Chrome has a feature where you can specify a parser attribute and make the piece of dynamic JS appear as a file which can then be browsed to and break points set.
the attribute that needs to be set is
//# sourceURL=dynamicScript.js
where dynamicScript.js is the name of the file that should show up in the script file browser.
More information here
Paul Irish also talks about it briefly in his excellent talk on Tooling & The Webapp Development Stack
Try adding a "debugger;" statement in the javascript you're adding dynamically. This should cause it to halt at that line regardless of breakpoint settings.
Yes, It is (now) possible to debug dynamically loaded JavaScript using Google Chrome!
No need to add extra debugger; or any other attribute for dynamically loaded JS file. Just follow the below steps to debug:
Method 1:
My tech lead just showed a super-easy way to debug dynamically loaded Javascript methods.
Open Console of chrome and write the name of the method and hit enter.
In my case, it is GetAdvancedSearchConditonRowNew
If the JS method has loaded then it will show the definition of the method.
Click on the definition of the method and the whole JS file will be opened for debugging :)
Method 2:
As an example, I'm loading JS file when I click on a button using ajaxcall.
Open network tab in google chrome dev tools
Click on a control (ex. button) which loads some javascript file and calls some javascript function.
observe network tab and look for that JS function (in my case it is RetrieveAllTags?_=1451974716935)
Hover over its initiater and you'll find your dynamically loaded JS file(with prefix VM*).
Click on that VM* file to open.
Put debugger whereever you want in that file :D
I'm using google chrome for that purpose.
In chrome at scripts tab you can enable 'pause on all exceptions'
And then put somewhere in your code line try{throw ''} catch(e){}. Chrome will stop execution when it reaches this line.
EDIT: modified image so it would be clearer what I'm talking about.
I think you might need to give the eval'd code a "name" like this:
http://blog.getfirebug.com/2009/08/11/give-your-eval-a-name-with-sourceurl/
If you do, I think it's likely the debugger approach from "update 2" should work then.
UPDATE: the syntax for sourceUrl has been changed (# is replaced by #) to avoid errors on unsupported browsers (read: IE). Details
Using Chrome(12.0.742.112) with the code you provided plus a debugger statement like this
script.text = "debugger;var someVariable = 0;\n" +
"someVariable = window.outerWidth;\n" +
"alert(someVariable);";
works for me.
I need to modify some JavaScript (limiting scope of all jQuery selector to current partial >view div) before execute it.
May its more tangible if you bind the selector change to an event on your partial view instead of creating script elements in the html body ( doesnt feel right ).
You could do something like this
(function(j)(
var limiting_selector = '';
j(".partial_views").bind('focusin over',function(e){
limiting_selector = j(this).attr('someattr') // or j(this).data('limiting-selector')
}).bind('focusout out',function(e){
limiting_selector = '';
});
// And then go on with
// j(limiting_selector+' .someclass')
))(jQuery)
This code would always add a limiting selector to all jQuery select operations done while the mouse is in a certain element given the HTML isnt to messed up.
(Still seems hackerish, may be someone has a better solution)
cheers
In Firebug, you should be able to see that script after the page is loaded and the script is injected. When you do, you can set a breakpoint in the appropriate place, and it'll be preserved when you refresh the page.
Dynamicly loaded Javascript still has to be parsed by the browser this is where WebKit, or FireBug debugger is sat so it's subject to the debugger no matter what, i think this is the same for the developer tools in IE8,
So your code is subject is to the debugger so where your getting a problem will not be in that file or text if it does not error
The other thing is script.text = "alert('Test!');"; is not valid so it wont work in all browsers what you want is script.innerHTML = "alert('Test!');";
even though its innerHTML it means code inside the HTML Tags not the HTML inside just the most use people use it for this so it gets explained wrong
EDITED FOR UPDATE TWO
And on Second update using Chrome i did this
go to about:blank
Open the console up and past in
var script = document.createElement('script')
script.setAttribute("type","text/javascript")
script.innerHTML = "alert('Test!');debugger;";
document.getElementsByTagName('head')[0].appendChild(script);
then it will break and open the script tab with about:blank shown (nothing to see)
Then on the right hand side show the call stack list, then click on the second (anonymous function) and it will show you.
So on your file you will have a (anonymous function) that is the code your running and you will see the break point in there. so you know your in the right one.
Using Google Chrome (or Safari) Developers Tool, you can run JavaScript line by line.
Developer Tool > Scripts > Choose which script you want to debug > pause sign on the right side
Or set breakpoints by click the line number
One option I like to use it adding a console.log('') statement in my code. Once this statement appears in the console a line number is associated with it. You can click that number to go to the location in the source and set a breakpoint. The drawback to this approach is that breakpoints are not preserved across page reloads and you have to run through the code before you can add a debugger.

Categories

Resources