I'm trying to debug an issue on a single page web app that is rendered using javascript. I'm mostly unfamiliar with how the page was built.
Is there a way that I can detect how a particular element is being rendered, or at least when it's being added to the page?
I'd like to set a break point for when the item is created or added to the DOM, or first rendered in the page.
I'm open to any solutions that preferably work in Chrome, like the Chrome Developer Tools, or a debugging bookmarklet, etc.
I am trying to create some simple tutorials, which involve people using the console in chrome. Ideally I would like to build them in a codecademy style - so instead of saying 'browse to this element in the console' and the user having to go to a separate demo page and do this, it would be built into one page.
So, I would have the tutorial, and then an iframe containing the demo page. I need the console to be open in the iframe page (and stay contained within it), but still be usable.
I know in chrome you can change which iframe you are viewing in the dev tools, and if needs be I will simply instruct users to do that, but I feel it would be more effective / smoother if the console was actually within the iframe and was automatically there.
Is there any way to do this?
Thanks in advance.
I am working on a webpage crawler and find that my target webpage whose url is like
http::/www.xxxxx.com/main.aspx?View=xxxxBrandName=xxxxIsSsoLogin=xxx
And when I try to look at the source of this webpage, I find that there are many different
html sources if I right click on different positions and the result is also different if I click View->Source in IE (I can only use IE to open this website).
I am very new to HTML so I can't tell what happened exactly. Any one can give me any clue on this?
On chrome right click + inspect element and go to the sources tab, there you can browse through all the sources. Furthermore on Firefox you can use firebug to do similar things.
It's hard to say what exactly is causing the different results when you view source but it is possible that the page just has a lot of random crap e.g. add-ons, plugins etc.
How is it possible to modify this bookmarklet which activates the webclip app-mode so that iOS will display it in 4 inch fullscreen?: http://cl.ly/text/1H1b3E3K3T0V
I've already read about the changes you need to make in html when optimizing a page but I didn't get it right with this script.
I suspect that adding the meta tag "apple-mobile-web-app-capable" after the page had loaded is not going to work. Safari is likely not expecting this to change after the fact and therefor is not watching for a change. In other words, I would predict that you can't use a bookmarklet to do what you are trying to do in such a direct manner.
I suspect that adding the "apple-touch-startup-image" will work because Safari is not checking for this information until the user chooses to create a home screen shortcut.
As a possible work around to the problem, you might consider is somehow trying to recreate the page using the modified HTML. The bookmarklet might modify the DOM like above, then create a new blank tab with window.open() and set its contents equal to the current document.documentElement.outerHTML. This is just a suggestion off top of my head and I have not tested it.
I noticed that the source code shown in Firefox appears to be incomplete. I have the latest version. When using the Firebug plugin to look at a webpage, I am able to find elements which are simply not recognized by Firefox.
This is for a automated script I am working on.
I am wondering several things:
Why is a firefox plugin able to recognize elements Firefox is not?
Is there a way to pass the source from Firebug engine to Firefox, or any other viable workaround which would enable Firefox to recognize all of the elements on the page?
My guess is that these "hidden" elements have been created by javascript after the page load, but I'm not really sure.
I'd say Firebug is displaying what's in the DOM (i.e. what is in the page at the instant you are looking at it), while View Source is displaing the source that has been received from the server (i.e. what is in the page at the first instant it's displayed).
If you want to see the "source" from the DOM, maybe the Web Developper Toolbar Extension can help : from what I remember, it provides a "view generated source" option.
For No.2
Open Any Page, and Press Ctrl+A or Select All, and right click, click View Selection Source, You should able to see any html nodes as you see in Firebug.
Your guess is correct. "View source" reveals exactly what the server has passed down to the client. What Firebug shows you is the "rendered source code", which is taking the current DOM state, and rendering it back into a HTML representation, that may or may not look very much like the actual HTML code written.
Your question is unclear.
The View Source command displays the raw HTML that was downloaded from the server.
Firebug's HTML tab shows the elements that are currently on the page.
Any changes made by Javascript will show up in Firebug (which gives a live view), but not in View Source. (Because they weren't in the HTML that was downloaded from the server)
Firefox's View Selection Source command, which appears only when some text is selected, shows the live source from the DOM and should show exactly what you see in Firebug. (Except that it won't update after you click it, so if the DOM changes again, you'll need to click it again to see the change)
To see the source for the entire page, you can press Ctrl+A, then right-click and click View Selection Source.
If theis doesn't answer your question, please elaborate.
Firefox shows the source code as it comes from the server, any alterations to it via JavaScript will not show up. Firebug keeps track of the changes to the document and updates the source code.
Doing Ctrl-U or View | Source will just give you the static HTML document that is returned by the server.
What you probably want to look at - and what you are seeing in Firebug - is the rendered DOM. If you install a Firefox addin such as Web Developer you will be able to view the rendered DOM - i.e. the HTML dynamically rendered in javascript and the actual document the renders in the browser.