I am doing a webpage with some javascript and I change several elements in the dom.
Anyway I am not able with chrome nor with firefox (and firebug) to see the up to date dom source code (of course the rendering in the browser is fine).
Namely, if I add some stuff in my page (let's say a list) with the javascript, I can see the list appearing in my browser but not in the source code with any of the tools I have.
Is there any tool to do that?
Am I missing something?
Thanks.
In Firefox, you can add the Web Developer Extension: http://chrispederick.com/work/web-developer/
Within it, there is a View Generated Source action. It allows you to see the source after DOM additions via Javascript.
Although, you should be able to view the changes in Firebug and the Chrome Consoles
I think that makes sense. HTML added by JavaScript will not necessarily show when viewing source, but developer tools like Firebug and Chrome's Developer Tools should allow you to see it.
If you're worried about it not showing up because of Search Engine Optimization stuff, adding JS isn't the way to add the content, as search engine bots will not see the JS-generated content.
When you do a view source you don't see the updated DOM. you can see updated DOM with tools like firebug, did you try firebug? its a firefox add-in..
Related
I'm trying to find a way to view the generated source using IE 10. With the Chrome dev tools and Firebug I can see the HTML source post JavaScript/AJAX operations but in IE 10 the view source command and dev tools both only show the downloaded source.
I'm building a single page javascript web app and am running into an issue in the generated source that only happens in IE. Using something like ChromeFrame or punting on the issue is not an option. I need to find and fix the root issue that is causing it in IE.
Do you all know of a different set of dev tools or a toolbar that is produced for IE 10 that will allow me to inspect this elusive generated html?
Thanks!
Just press F12. If the DOM was manipulated via AJAX, you'll need to use the blue refresh button per the comments below.
I use alert(document.documentElement.outerHTML) to achieve this
Is it possible to show on page source ( ctrl+U ) the HTML elements I've added in JavaScript and jQuery codes?
No.
The page source will always show you the HTML retrieved from the server.
Inspect the generated DOM tree instead, e.g. with Firebug (Firefox) or the Developer Tools (Chrome, Safari).
Nope, you just can see it on you firebug, developer tools, etc...
No, but ever modern browser has a way/extension to see the current sourcecode (actually, the DOM tree), i.e. including everything done by JavaScript.
Depending on the browser (i like chrome / firefox / safari for this) you want to look at developer tools. In firefox you can use firebug, in chrome it's Developer Tools and in Safari you have to turn on Developer menu through preferences. In all three cases, you want to look at the DOM inspector.
I have a simple question here. I know with jQuery you can dynamically append HTML elements in the DOM by doing stuff like
$('').append('<p>Test</p>');
But my question is, why don't these elements actually appear visually in the code (when you View Source in your browser for example).
Please experts, let me know why. Thanks
The original source never changes. Only the DOM changes.
You can see an HTML visualization of DOM changes using your browser's developer tools.
You should be aware that when you manipulate the DOM, you're never manipulating HTML. The HTML visualization offered by the developer tools is an interpretation of the current state of the DOM. There's no actual modification of HTML markup.
Because View Source only shows the HTML that was sent to the browser originally. There are ways of seeing the changed HTML though - Firebug in Firefox, F12 developer tools in IE or Chrome. Selecting some HTML and right-clicking "View Selection Source" in Firefox will also work.
The "View Source" only shows the source the server sent at the time the browser requested the particular webpage from the server. Therefore, since these changes were made on the client side, they don't show up on the "View Source" because they've been made after the original page has been delivered.
To view the live source of the page, you can use the Web Inspector view in webkit browsers, or Firebug in Firefox. These keep track of any changes to the DOM and update the source which you can see.
There is a option in web developer tool (Firefox addon) "View generated source" which will give you the whole source code which is generated after you made changes.
view source->View generated source
There are times when dev tools in IE/Firefox/Chrome don't keep up with your DOM. That just means you are dealing with some code worthy of a jedi - or that Darth Vader left it there for you to debug.
I currently use Chrome/Firefox for my web development.
Is there a plugin, or am I just another way, where you can view the HTML source AFTER all jQuery plug-ins have run? I just want to see what and how jQuery modified the HTML?
Firebug will show the state of the DOM as it is in the current point in time:
(source: getfirebug.com)
There is a much easier way to do this without installing any plugins:
Ctrl-A to select all content on the page, and right-click "view source"
(only works in firefox of course)
In Firefox:
Use the web developer tool by Chris Pederick. Go to View Source -> View Generated Source.
Using this same tool, highlight elements you would like to see the generated source for and then right click to see View Selection Source.
Or, you could use the Firebug tool, to inspect the elements on the page.
You'll need to use Firebug for that (in Firefox, obviously). It actually tracks the page's current DOM, instead of displaying the original source.
Right click and select 'Inspect element'. That will show you the HTML after it has been loaded in Chrome.
For Firefox: Install firebug, then you will see the 'inspect element' option.
firebug for firefox will pick up changes to the DOM.
I am using DebugBar in IE to view the DOM. But after I modify the DOM with jQuery I can not see the new or modified DOM with DebugBar. How Do I view the modified DOM?
Not sure about IE, but the Firebug extension for Firefox lets you view the changes and even displays then in a really user friendly way. Even if you must test in IE, you can always switch to using Firefox when you really need this functionality in developing your code.
Searching around I also found this piece of info for IE7:
IE7Pro just right click and choose View
Generated Source.
There are few options as listed on IE Team's blog.
http://blogs.msdn.com/ie/archive/2005/05/10/416156.aspx
I found out that I can view the modified DOM with DebugBar and with MS Internet Explorer Developer Toolbar after refreshing or reloading the DOM
You can use IE "Developer Tools," available in IE8 by default (F12 to launch) and available in IE7 via download from Microsoft. In the developer tools window, after pressing refresh, you'll see the in-memory version of the DOM in the HTML tab.