Is there any way to see the page in Firebug or other software after the content of a div has been replaced with ajax?
Yes, that's exactly what Firebug will show you: the current state of the DOM. Same with Chrome's developer tools.
Sure, you can inspect the DOM with FireBug which always shows the DOM at its most recent state (and of course accounts for AJAX updates):
yes
firebug marks the changed div in yellow and you can see the html dynamic updates in the html view
Related
How do you debug panel's html?
I think the DOM inspector should allow you to do this.
https://addons.mozilla.org/en-US/firefox/addon/dom-inspector-6622/
https://developer.mozilla.org/En/DOM_Inspector
Although it doesn't have a console, you can use the inbuilt Scratchpad (Shift+F4) to run some js manually. You need to enable access to chrome-scope first though. More info here: https://developer.mozilla.org/en/Tools/Scratchpad#Using_Scratchpad_to_access_Firefox_internals
If you mean, how do you inspect html elements in a Panel using Firefox dev tools or Firebug, the answer is unfortunately that you cannot do this - those tools do not support panels at this time.
Well, it seems there is no really a way to do it in the panel.
So the best way is to use a tab instead of a panel. In it theres no problem to easily inspect HTML.
Some minor shifts and quirks of panel can be dealt with later, by 'try and see' method.
I have a project with a very standard layout so I suspect this is a common problem:
<body>
HEADER-CONTAINER DIV - includes superfish jQuery menu plugin but am open to other menu options if necessary.
CONTENT-CONTAINER DIV - depending on the page, contains several other jQuery plugins, HTML, javaScript, etc.
FOOTER-CONTAINER DIV
</body>
I'm looking for a elegant and well performing way to have a superfish menu click load the CONTENT-CONTAINER DIV with new content. The content contains both HTML and javaScript. I also want the solution to change the URL so if someone returns later to /my/page it will reload to the correct location (similar my understanding of Backbone.Router).
Any suggestions? If possible, please provide a link to a page loading into a div example and running any javaScript included in the load.
Superfish or not this is not really a problem. Whenever you add html to the page the browser will execute any javascript or load any javascript file this new html snippet will contain.
So when you click on your menu, you load (or generate) new html and replace your content div with this new content, the browser will execute the scripts.
You will have to rebind all events on that newly inserted content because jQuery will loose track of that.
I searched around and found the a decent example that shows how to take any #url and reload a div. Example found at http://thomasdavis.github.com/examples/restful-app/
If using Firebug, we can click on the HTML tab, and click to expand each element to see the generated HTML code. Is there a way to expand it all or get a plain text file?
I just accidentally found out that there doesn't even need to be Firebug. We can just press CTRL-A (to select all) on the webpage, and then right click and choose "View Selection Source", then we will get a plain text file of the "current HTML code", even will see a <div> that is the Firebug panel that is before the <body> tag if Firebug is open. But it seems like a weird way to invoke this. Is there any other way?
(Update: generated HTML usually refers to the HTML after JavaScript changes the DOM. It is the current DOM tree instead of the original source code)
In Firebug's HTML tab, right-click the root node and select "copy HTML". Then paste to a text editor.
Without Firefox Add-Ons, you could use a bookmarklet like this:
javascript: var win = window.open(); win.document.write('<html><head><title>Generated HTML of ' + location.href + '</title></head><pre>' + document.documentElement.innerHTML.replace(/&/g, '&').replace(/</g, '<') + '</pre></html>'); win.document.close(); void 0;
With the Web Developer toolbar add-on, select View Source - View Generated Source. And if you want to view the original source, select View Source - View Source (or simply press CTRL-SHIFT-U)
Using the Firefox DevTools (integrated in FF since version 35) you can view the generated HTML opening the web inspector (CTRL-shift-C) and selecting the HTML tab.
You can copy the generated HTML by right clicking on <html> and selecting Copy inner HTML.
If you're looking for a programmatic solution, you can just feed the document into an XMLSerializer.
I don't know if I understood your question well, but here is something really simple and you won't need another addon.
Every browser has a native function to view the source-code of the actual page, just right-click and look for something that resembles "source" or "code".
In Firefox for example it's just "Souce-code", in Chrome it is "View Page Source" and so on.
That being said, Web Developer toolbar is indeed a great addon, especially if you do CSS too.
I am using Firefox and i have a page which has an Tag.
The contents embedded within this tag cannot be seen from normal "View Page source" option. So i installed Firebug plugin and i can get see the contents using Firebug. My issue is, i cannot script any of these elements using FireWatir. Anybody has any ideas how to do this using Firewatir? Your help would be greatly appreciated.
You can only script the iframe's page if it comes from the same domain. If so, you can access the iframe's document by doing iframe.contentDocument. You can also access the iframe's window by doing iframe.contentWindow:
https://developer.mozilla.org/en/HTML/Element/iframe
Watir and FireWatir should not have problems with frames. Take a look at Frames page at Watir wiki for more information.
You did not say what is the problem. Some relevant HTML and your Watir code would help.
I would also suggest that you post this at Watir list too.
I am creating a Firefox extension that is somewhat similar to Firebug. There is a panel (or vbox) at the bottom of the browser that allows users to specify colors to certain Html elements. When they click the OK button, I would like these colors to get updated on the current web page.
I have my JavaScript working when I click the button (i am just throwing an alert), however when I change that JavaScript to change the css or styles of an element (by either using document.getElementById or jquery), nothing changes.
Is there something with Firefox extensions that I am missing? Any help is appreciated.
Let me know if you have any questions. Thanks
https://developer.mozilla.org/en/Extension_Frequently_Asked_Questions#Accessing_the_document_of_a_webpage_doesn%27t_work
You want content.document.getElementById() and similarly for every other construct you use.