Viewing dynamaically generated code - javascript

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

Related

Screen readers and JavaScript print feature

I have written a JavaScript-based print feature for a web page. It extracts HTML from a hidden div on the page, renders it into a new window and triggers the print dialog.
The option is made available over a button with an onclick="printTheThing()" event. I know that for example screen readers have some caveats with JavaScript. I am wondering whether/how many people such as blind or vision-impaired I block from using this feature.
The implementation opens a new browser window and appends to its document:
function printTheThing() {
var dispSettings = "toolbar=yes,location=no,directories=yes,menubar=yes,"
+ "scrollbars=yes,width=550,height=400",
html = $('#theDivToPrint').html(),
printWindow = window.open("", "", dispSettings),
doc = printWindow.document;
doc.open();
try {
doc.write('<html><head>');
doc.write('<title>' + title + '</title>');
doc.write('</head><body>');
doc.write(html);
doc.write('</body></html>');
} finally {
doc.close();
}
printWindow.focus();
printWindow.print();
}
Update: This is what the button looks like:
<button type="button" onclick="printTheThing()">Print the thing!</button>
In addition, I am using CSS to replace the button by an image. I have tested the button with the Firefox plug-in "Fangs". It suggests that screen-readers will perfectly read out the original button text. But Fangs does not provide any interactivity so I cannot test the printing with it.
The Chrome extension shouldn't be relied on at all. You should test stuff with NVDA, which is free. I will guess that Google fanboys will say Chrome Vox is fine. Trust me, I have been working with AT for nearly 15 years.
Anyway, I would need to see the code for the button, not the JS... The JS looks fine. Some people have trouble with knowing there is a new window, however the print dialog should grab focus versus the window
to improve accessibility by using screen readers use W3C WAI-ARIA live regions, for more info see their recommendations and FAQ.
to test you can use the following screen readers:
on Windows - JAWS, NVDA
on Linux - orca (is not working with Chromium) + advice of Florian Margaine
you can also use AChecker to test on compliance of WCAG 2.0, Section 508, Stanca Act accessibility standards.
The best way is surely to try it out yourself.
There is a Google Chrome extension allowing you this: https://chrome.google.com/webstore/detail/kgejglhpjiefppelpmljglcjbhoiplfn
The way to render a printable page is to use #media CSS directives. That way you don't need to do anything special like pop-up another window or worry about accessibility: the content is simply printed correctly (and possibly very differently from the on-screen layout, if that's what you want).

How to view javascript generated html for Internet Explorer?

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).

Seeing HTML source changes after javascript has acted upon it, in Chrome

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"

How to get resultant HTML after executing all scripts?

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.

jQuery - Way to view jQuery generated html?

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

Categories

Resources