I have an HTML document with inline javascript which adds some <div> elements. The elements appear on the screen, but I can't see any change in the HTML source after the elements have been added. I use the latest version of chrome, and I do "View" -> "Page Source".
Seeing changes in the HTML would really help for debugging!
Right-click on the element and select "inspect element"
Use firebug when using Firefox
For Chrome there is built in tool(use Ctrl+Shift+I)
Use Firefox, install web developer and choose "view source"=>"view generated source"
Related
I found this website https://samy.pl/ and even with my HTML knowledge I can't find the source of his site?
If you type "view-source:" before the website it should bring up the source but it doesn't?
He blocked most or all ways to inspect his source.
How is this possible?
You can actually see the sourcecode using Internet Explorer, or Safari with IE 11 set as useragent.
I'm not certain how he does it, but it is some kind of JavaScript that checks some flag in Chrome that tells him whether or not the inspector is open, and if true he removes the body and updates page so everything disappears.
Using IE and inspecting the source should give you the answer :)
I am looking for a way in IE to view the html source generated from jQuery code.
Ex.
HTML:
<div id="myDiv"></div>
jquery:
var wrapper = $("myDiv");
var generated = $("<div>Hello world</div>");
wrapper.append(generated);
I'd like to be able to examine and hopefully tweak the source generated by appending the generated element, not in Chrome or Firefox, but in IE 8 (where the problem is). I think that IE Developer Tools only shows the downloaded source, not what is generated.
Thanks.
Try going to the HTML tab in IE developer tools and press the refresh icon (next to the save icon), it will show the latest DOM.
Example:
Go to script tab and do:
document.body.appendChild( document.createElement("div") );
Then go to the HTML tab and hit the refresh icon and open the body tag, it should show the appended div now.
I recommend Firebug Lite - http://getfirebug.com/firebuglite (it's Firebug for IE, sort of)
You should get Firebug Lite. You can check the code that jQuery does and much more.
Anyway, I recommend that you put Google Chrome Frame compatibility on your site, it will eliminate plenty of problems with your site (with the people that have Google Chrome Frame installed).
How to get effective HTML after executing all scripts?
Actually scripts are adding and modifying control and css in the page. I would like to see html of resultant display as a static page. Is there any way to get this?
Edit: Suppose if background image is added using javascript, How can i see in Html OR css?
Please try to get this before giving answer.
One way would be to use Firefox with the Firebug extension.
Firebug is an extension for web developers. Among other things, it offers an "HTML panel":
The HTML panel displays the generated
HTML/XML of the currently opened page.
It differs from the normal source code
view, because it also displays all
manipulations on the DOM tree.
[...]
A similar solution for MS Internet Explorer would be the Internet Explorer Developer Toolbar.
Note that both solution are browser-specific. There is no way to get the resultant HTML independent of the browser used, because this HTML only exists in the working memory of the browser (so you cannot, say, sniff it on the network).
Use the firebug plugin for firefox, with it you can 'view generated source'.
This is a javascript approach. Unfortunately, it doesn't work perfect. For example, it doesn't include the contents of textarea's.
document.documentElement.innerHTML
Another way is selecting everyting (Ctrl + A) and choose 'View selection source' from a context menu.
The Web Developer Toolbar addon for Firefox has a 'View Generated Source' button that let's you do that. It's under the 'View Source' Menu of the toolbar.
It presents manipulated document as a static source, like what the "View Source" option does, but with modification by the Javascript.
Is there a way to view the jQuery (or Javascript) generated HTML - for example, see the jQuery-modified source of a page that uses a number of prepend()'s html()'s etc.?
Use Firebug to look at the current DOM, although it is an interpretation of the HTML.
You can inspect the page with firefox addon FireBug though:
(source: gnucitizen.org)
In addition to Firebug as the other answers suggest, you can also use the built-in Chrome developer tools:
To access the tools you can do it the same way as Firebug, just right click and select Inspect Element.
Download the Web Developer plug-in for FireFox. Then Right click on the page, the select Web Developer -> View Source -> View generated source
how can I view the code that I have dynamically created with jquery/Javascript?
In most browsers, right-clicking on a page, and clicking "Inspect Element" will let you view the markup of said page.
This markup will include any that was generated using JavaScript and/or jQuery.
Note: Due to the lack of detail in the question, I assumed that you wanted to view the markup of a page, after it was rendered by the browser.
Edit: Please see Quentin's answer, as they provided links to information about the developer tools provided with some major browsers.
you can use jQuery's text() function:
$("div.someClass").text(code_to_display);
var div = document.createElement("div");
div.id = "myDiv";
document.body.appendChild(div);
Look at the Elements tab in Chrome Dev Tools (or similar in other browsers) and scroll to the bottom of the <body></body> tag to see the new element.
Most browsers have developer tools, which include a DOM inspector, built-in. They can usually be triggered by selecting something along the lines of "Inspect Element" from the context menu inside the viewport.
Opera
Safari
Firefox
Edge
Chrome