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.
Related
I am installing Selenium right now and tutorials say, that i need Firebug.
Unfortunnally on the download page (https://getfirebug.com/) it says:
The Firebug extension isn't being developed or maintained any longer.
We invite you to use the Firefox DevTools instead, which ship with
Firebug.next
Does it mean that i have to use Firefox DevTools to run Selenium now?
selenium not dependent on firebug. firebug is a tool to inspect element on page to help you get the CSS locator or xpath which used in selenium script to find element from page. now you can use the devtool to inspect element, like chrome's devtool.
You don't always need firebug. Right clicking an element in firefox or chrome will provide you with an option to inspect an element. From there you can right click on the HTML to copy the xpath and CSS, as well as see an element's ID, name, class etc. The tools can be found by pressing ctrl+shift+i in both chrome and firefox.
For Selenium, you don't need these tools but if you still want to you FIREBUG and FIREPATH Extensions then do one thing Install FIREFOX version 45 or below and uncheck the Automatic Update in Firefox.
Keep in mind as soon as you update the firefox these extensions will stop working
You can find details to stop automatic update on below link
https://www.technipages.com/enable-disable-automatic-updates-in-firefox
For selenium I use firefox 58. Firebug 2.0.19 is only compatible with Firefox 30 – 54. That's why I use the Mozilla Firefox ESR, Portable Edition 52.6.0 and Firebug to inspect elements. https://portableapps.com/apps/internet/firefox-portable-esr
Is there any way to find out which JavaScript functions are called when a page is loaded?
One way is to use alert but if a file is too big ( in my case 5000+ lines ), it would be too difficult to use alert.
I want to find out is there anything in FireBug or Developer Tools that shows the order in which functions are called
Thanks
By the way, thanks to the person who gave negative comment
The Simple Solutions(tedious for you if you have 5000+ line codes) To Your Queries is
Debbuging
There are many way you can debug Your Javascript code
A)The Chrome DevTools include a number of useful tools to help make debugging JavaScript less painful.|
The Sources panel lets you debug your JavaScript code. It provides a graphical interface to the V8 debugger. Follow the steps below to explore the Sources panel:
Open a site on chrome
Open the DevTools window.
If it is not already selected, select Sources.
B)You can use FireBug Chrome tool But i Beleive Chroe Debugger is handy
but Choose Opera For Optimum result
path
Internet Explorer 8 (Developer Tools - F12). Anything else is second rate in Internet Explorer land
Firefox and Firebug. Hit F12 to display.
Safari (Show Menu Bar, Preferences -> Advanced -> Show Develop menu bar)
Google Chrome JavaScript Console (F12 or (Ctrl + Shift + J)).
Mostly the same browser as Safari, but Safari is better IMHO.
Opera (Tools -> Advanced -> Developer Tools)
use window.onload is perfect to your request
window.onload = function(){
alert("the page is loaded!!!");
};
it was tested onload=function vs window.onload=function
window.onload // works in all tested browsers
onload // works in all tested browsers, faster than window.onload
so it can't fail... use it, for me is the best way
Live CODE
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
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..
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.