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.
Related
I am newly working on a fairly old system, which uses ColdFusion if it matters. In various places, it uses Ajax.Updater for server requests which return new HTML (.cfm) fragments to update the specified element with. This HTML also includes JavaScript via <script>'s and inline event handlers, ie. <button onclick=...
The question is how can I go about debugging this code?
HTML (and .cfm) documents typically show up in the sources tab and can be debugged like normal JS, but in both Chrome and Firefox, the fetched HTML is not showing up. I can clearly see the new html being fetched in the network tab, the new elements are rendered and appear in the elements tab, and the actual JavaScript is clearly running as expected; it just doesn't show up in the debugger.
Does fetched code simply never go to the debugger? Is it because the fetched html is a fragment? Is there some other known way to debug code from Ajax requested HTML?
When I use Firefox developer tools to edit the body of a webpage, the page buttons either disappear or stop functioning like in the example below. This does not happen in Chrome and all the buttons work fine as they suppose to.
here are the steps that lead to the problem:
I go to the webpage that I need to work with, then I need to edit a few things in the page so I press Ctrl+Shift+C to open the dev tools, right click on <body> then Edit As HTML and change what I need to change and apply it and it works just fine with Chrome but in Firefox and other browsers the buttons stops working or disappear.
Here's the link to the example page. (This is only an example not the real page I'm working with, because the real one is in Arabic and requires more steps.)
This is because the Firefox DevTools obviously do the same as when you copy the outer HTML and then execute this
document.body.outerHTML = `*copied HTML*`;
inside the DevTools' console.
That's why all the event handlers as well as iframe contents are gone after you finish editing the HTML, e.g. in this case you can't edit the code at the left side and there is no output shown at the right anymore.
The Chrome DevTools seem to do something smarter here and recognize what has changed and only update those parts when you save the HTML. Therefore the output on the example page is still visible afterwards and the code can still be edited.
I've filed an enhancement request for that, so the behavior in this case can get improved.
I was doing some modifications in javascript on some website in Google Chrome to see what changes appear on the web page.
What I observed that I am not able to see the complete javascript code on the element tab in developer tools. The same code exists on the Source tab able to modify that but those modification doesn't work at it doesn't work once DOM is loaded. This is the screenshot of what I am getting:
It is in HTML edit mode and this script is part of html page.... at
the end, it is not a complete script.
ScreenShot:
Is there any way to get it complete in element tab or any other way to modify script?
If you right click on the tag and select "Edit as HTML", you'll be able to access the whole script, without the hyphenation.
You won't be able to change Javascript code through the source tab and expect it to run your new code on reload. If you want to run Javascript on a website with Google Chrome Developer Tools, I'd suggest using the console tab and adding the code you'd want to run on the website. It won't save, but it's essentially the same as injecting Javascript to run on a website.
Trying to automate some tasks on a private web application. When I use a right click > Inspect Element on a form field for example, I am shown the Inspector panel, and the HTML element is shown, with its id right there. Problem is, if I run a
document.getElementById('theId_shown_on_the_inspector');
on the console, I just get null back. This web application relies on Java by the way.
Is there anything you can think off that may throw some light on this weird behavior? Basically I need to be able to automatically populate some fields and click on some buttons, but I cant if I am not able to detect them.
As shared by Jaromanda X, the page has iframes loading content from other URLs. Since I was working with GreaseMonkey, I did not include these URLs in the list of #includes, and using the Firefox console was not working either because you have to select and load those iframes into context (again as indicated by Jaromanda X).
Firefox provides enough details about the iframe URLs which to include in the GreaseMonkey script.
This has been a problem for a long time and I've never found a solution for it and while other questions on here are similar, they are not exactly what I'm seeing.
The problem is that the SOURCE used to step through the code does NOT refresh on every page load. Yes, I have disabled the cache - but it is not the browser cache that is the problem, it is the DEBUGGER SOURCE cache.
In my webapp (Struts2 and Tomcat), I have the main page with title bar and left the menu. The center content is an iframe that loads all the appropriate JSPs. I use one 'action' for most of my navigation with different results displaying different pages. The problem is that the NAME in the chrome debugger SOURCES pane does not change as I navigate. The actual page changes, but since the name doesn't change, Chrome does NOT bring the new source into the debugger window. So what happens is if I have 'debugger;' on line 200 in the page being loaded, it stops, and shows the 'source' - but its the OLD source at line 200, not the actual source that is running! If I right-click on the old source file in the SOURCES pane, and "Reveal in Network panel" the real source is shown here as it really was loaded from my server, BUT the debug source does NOT change.
Question: How do I get around this bug in Chrome and force the source to reload in the debugger display?
UPDATE: No, this is not the same as that other question. The answer by David Fahlander seems to fit what I'm saying. The ACTUAL javascript source IS refreshing and is shown correctly in the RESOURCES and NETWORK panes. But in the SOURCE pane where actual debugging is done, the new source is NOT refreshed. And its hard to debug code you cannot see!
Maybe try the old fashioned method of adding an URL query parameter with, say current time in ms? Something that your app will ignore, but Chrome will treat it as a new page? e.g. https://example.com?time=1594125425508