How to check complete source code in IE and Mozilla - html

I am stuck at really strange issue.I am working on a application which uses sitemesh.
The current page on which I am working have following structure
Decorator (main.html)
-Inner HTML page with 3 tabs (menu.html)
- Tab 1 (add.html page for Tab1)
- Tab 2 (edit.html page for Tab2)
- Tab 3 (dispaly.html page for Tab3)
For each tab href is defined which links to corresponding page i.e. add.html,edit.html or dispaly.html, Which are dispalyed under tab.Like
<a href="/myApp/request/form/AddForm/1761?menuId=app.approve.new" title="Add Request">
So I deal with 3 html pages on a single screen.
In IE or Mozilla when I selct any tab and go to view source option it just dispaly source code for decorator i.e. main.html,inner page i.e. menu.html but I cann't see the source code for selected tabs html file i.e. for add.html/edit.html/dispaly.html.
Its really strange for me. I need to check complete source code.
Is there any way to check complete source code ?

If you're using Firefox there's the option to "View Generated Source" from the Web Developer Toolbar.
This will bring up all source code currently being used in the page, whether natural or generated by some form of client-side script, etc.
UPDATE
For IE, you may find that the Internet Explorer Developer Toolbar has similar functionality.

Related

Why can't I click a link to open a file from an MVC web page

I've got a simple MVC web page that pops up a dialogue box with a list of hyperlinks to files. They're properly prefixed with "file://" and the links work properly if copied to the clipboard and pasted into a browser window. However, from within the dialogue, clicking on the linked files returns... nothing.
Nothing at all happens. The behavior is identical in Firefox, Internet Explorer, and Chrome. No warnings, errors, etc.
Visually my dialogue looks like this:
If I "inspect element" on one of the links, for example, the top one for "javascript notes.txt", it looks like this:
This IS a valid hyperlink. As mentioned above, I can copy the link into the address bar of a browser and the linked file opens fine. I can also copy the full HTML of the element into notepad, wrapped in tags and save as an .html file, and the link works just fine from there. The links just don't work in the dialogue--from any browser.
I'm displaying the links in a Kendo grid currently. Thinking that might be a problem, I got rid of the grid temporarily and tried displaying them in a plain HTML . Same problem--clicking on the links produces no result at all.
Am I fighting something deeper here? Like, I'm using a jquery dialogue to show the list. do jquery dialogues do something to block hyperlinks from working?
TIA for any help.
As per Amy's comment on the original question, browsers seem to block the file:// links when opening from a page retrieved via http. The workaround I implemented came from the excellent article linked below: I coded a simple action method in a controller that returns not a view but a File, and changed the hyperlinks to invoke that controller method via http. Works like a charm.
see: http://rachelappel.com/upload-and-download-files-using-asp-net-mvc/

How to view HTML source without refreshing the page in Chrome

I need to view all source HTML in plain text in one place. I need it from an already loaded page. CTRL+U (View Source) refreshes the page. The page I'm trying to view can only be accessed via proper form submit. What I really want is for CTRL+U to not refresh the page.
I need the HTML source of an already loaded page added to my clipboard.
I think none of the other answers really answer your question.
You want the exact response from the server, not the current DOM, and you want it with the exact request headers that was sent the first time.
To do so, open the Chrome Dev Tools and select the "Network" tab.
The very first request should be the page you requested. Click it and select the tab "Response" on the right side to get the exact response the server gave you.
Right click-> inspect element anywhere you want to see the html, it still show the code of all the page ans you can modify the value of html/css directly in it.
The only answer is the one Dor1000 provided himself in a comment:
dev tools, elements tab, right click html tag, copy, copy outer html.
He wants the current HTML (after javascript or any other modifications, not the original source HTML).

data not loaded fully in HTML

I am trying to create a scraper using vb6, my technique is to search the html page with get between 2 text function.
the function is tested and working correctly for all the sites, except a new site that I tried to use the same technique with it and failed.
The problem is the html is not showing the data, piece of the html as below:
<tr>
<td valign="top" nowrap="nowrap" class="label">Company Name:</td>
<td><span class="search-custom" id="synopsisDetailsOppNum"></span></td>
</tr>
the value should appear between the span tag above, but it's not appeared inside the HTML as above code.
The website is using javascript to manage the data.
I have tried also to use wait function, may the data appear with the HTML, but failed too.
Is there any solution to get the value, even with vb.net as I can update my code
that website is using JavaScript to add data to the webpage and such manipulation will not show up on the page source
The follwoing is quoted from JavaScript & jQuery: The Missing Manual by David Sawyer McFarland
One problem with using JavaScript to manipulate the DOM by adding,
changing, deleting, and rearranging HTML code is that it’s hard to
figure out what the HTML of a page looks like when JavaScript is
finished. For example, the View Source command available in every
browser only shows the web page file as it was downloaded from the web
server. In other words, you see the HTML before it was changed by
JavaScript, which can make it very hard to figure out if the
JavaScript you’re writing is really producing the HTML you’re after.
For example, if you could see what the HTML of your page looks like
after your JavaScript adds 10 error messages to a form page, or after
your JavaScript program creates an elaborate pop-up dialog box
complete with text and form fields, it would be a lot easier to see if
you’re ending up with the HTML you want. Fortunately, most major
browsers offer a set of developer tools that let you view the rendered
HTML—the HTML that the browser displays after JavaScript has done its
magic. Usually the tools appear as a pane at the bottom of the browser
window, below the web page. Different tabs let you access JavaScript
code, HTML, CSS, and other useful resources. The exact name of the tab
and method for turning on the tools panel varies from browser to
browser: • In Firefox, install the Firebug plug-in (discussed on page
477). Open a page with the JavaScript code you wish to see and open
Firebug (Tools→Firebug→Open Firebug). Click the HTML tab in the
Firebug panel, and you’ll see the complete DOM (including any HTML
generated by JavaScript). Alternatively, you can use the Web Developer
toolbar in Firefox to view
both the regular HTML source, and the generated HTML. • In IE 9, press
the F12 key to open the Developer Tools panel, then click the HTML tab
to see the page’s HTML. In the case of IE9, the HTML tab starts by
showing the downloaded HTML (the same as the View Source command). But
if you click the refresh icon (or press F5), the HTML tab shows the
rendered HTML complete with any JavaScript-created changes. • In
Chrome, select View→Developer→Developer Tools and click the Elements
tab in the panel at the bottom of the browser window. • In Safari,
make sure the Developer menu is on (choose Safari→Preferences, click
the Advanced button, and make sure the “Show Develop menu in menu bar”
is checked. Then open the page you’re interested in looking at, and
choose Develop→Show Web Inspector. Click the Elements tab in the panel
that appears at the bottom of the browser window. • In Opera, choose
Tools→Advanced→Opera Dragonfly. (Dragonfly is the name of Opera’s
built-in set of developer tools.) In the panel that appears at the
bottom of the browser window, click the Documents tab.
so the scraper won't download the page after the JavaScript finished it will get what it looks before any the JavaScript manipulation
you can watch Michael Schrenk talking about Screen Scraper Tricks: Extracting Data from Difficult Websites
http://www.youtube.com/watch?v=NtffxCi8aq4

Getting the generated sourcecode of a page in notepad

Is there any way of getting the source code of an HTML browser-page that is showing when i click inspect element(in chrome of firefox) and put it in a notepad(automatically) or maybe accessing it automatically somehow.
I do not want the original sourcecode but the one that is generated after all the javascripts have already run.
I would like to use the code afterwards in another web page and parse it...
later edit: i can actually click the html in the inspect element and click copy html but i need for a nother site to automatically acces this information because i will try reloading the site at regular intervals and need to constantly get the new html
With Firebug's HTML tab, you can right click on the element, and click "Copy HTML".
See also this post:
how to get fully computed HTML (instead of source HTML)?
press ctrl+u then it will display source code of html page then go to file menu and save it as html file in your system. then you can open it in html or another editor like netbeans /dreamviewer/notepad. I suggest you to open it in netbeans or dreamviewer will be better then open it in notped.
thanks.
You can use the web developer plugin for Firefox or Chrome. It gives you the generated source of a page.
In Opera , Right Click -> click on Inspect Element -> right click on <html> tag -> click on Edit Markup, from there you can copy the entire HTML code.
Edit -> In Oprea, right click on the page -> click on Source -> a new tab opens , in the menu bar of newly opened tab you have option 'Save' , from that option you can save the html code as .html , .txt.
Hope this helps you.

Firebug source and Mozilla Source difference

I have PHP generated HTML.
Firebug shows me this source:
<div class="module-header"><div class="module-header2"><div class="module-header3"><h3 class="module-title" style="visibility: visible;"><span>Մարդկային</span> ռեսուրսներ</h3></div></div></div>
Mozilla Source shows me another HTML for that part.
<div class="module-header"><div class="module-header2"><div class="module-header3"><h3 class="module-title">Մարդկային ռեսուրսներ</h3></div></div></div>
Actually this part should work as link. But doesn't...
Firebug is showing you the actual page content at that exact moment, whereas "Show Source" is showing only the static HTML that got downloaded from the server.
If JavaScript is making any changes to the page, the two will be different. In this case, it looks like JavaScript is removing your link and hiding the h3 element.
I see a style="visibility: visible; in Firebug's source. Are you sure you are not messing with the HTML via Javascript and some .show() .hide()?
Firefox's Source is the way to go for static HTML -> There is no rendering difference from what you see in your browser window and the source you see with Right Mouse BUtton > View Source, but (there always is a but) if you change the source dynamically - e.g. via JS when hovering over one link it hides some other part of the website - the Firefox "View Source" will be wrong and not reflecting these dynamic changes - these you will only be able to see with Firebug.
Maybe you can try a different browser and see if it is working there as a link?
Javascript might interact with your page and could hide the link because of some pre-condition. Maybe you want to turn off Javascript and see if your link is working then?