I lookong for some IE or Firefox extension, which allows to browse html source, corresponding to data, shown in browser window right now.
I have large web application with alot of code, generated by JavaScript. I need to extract real HTML code, which I see in browser window right now (View source function shows only code loaded from server, not generated by JS). Most of JavaScript debuggers can show DOM model from browser memory, but I'am need something more friendly, like printable HTML. Does anybody know tools or plugins for IE (preferred) or Firefox?
Firefox's Web Developer extension will allow you to do this. After you install it, just select View Source->View Generated Source.
FireBug for Firefox will display the HTML corresponding to what you see in the browser window right now (that is including any modifications made in JavaScript).
You can use
javascript:document.write("<xmp>"+document.documentElement.innerHTML+"</xmp>");
in IE to view the generated source.
Paste the above and execute in address bar of IE.
Related
We can see the source after the javascript has run for a single element by right clicking on that element and clicking 'inspect element'.
Firefox lets us see the full page source by through view source -> view generated source.
How can we do this in chrome? That is, how can we see the full page source after javascript has run in chrome?
This can't be done natively in Chrome, but the View Rendered Source extension does this and also compares the rendered source to the raw source. You can also access extension via right click.
Trying to embed a pdf on my website like so:
<iframe src="filename.pdf" type='application/pdf' frameborder="0"></iframe>
The website is a rails site, and currently I'm only running it on a local server.
The problem is that the pdfs render with a toolbar on top and a sidebar with my adobe creative cloud account information, as seen in the picture below (the actual content of the pdf displays in the white box under the toolbar and to the left of the sidebar)
How can I get the pdf to render alone, without the menu and sidebar?
If you allow the browser to choose how the PDF gets rendered, you're never going to be able to create a consistent experience for your users unless you are in a controlled desktop environment.
If you are looking for a consistent experience, use pdf.js to render the PDF in the browser.
If you are in a controlled environment and all of your users have a browser/viewer combination that will let the browser show PDF using the Adobe Reader plugin (as your screen shot shows) then you can use the "open parameters" at the end of the URL to control what gets shown. See the documentation at the link below.
http://www.adobe.com/content/dam/Adobe/en/devnet/acrobat/pdfs/pdf_open_parameters.pdf
That said, don't count on that solution to work for very long. Most modern browsers are not allowing the viewer plugins to function anymore and the rest are moving in that direction.
Searching more into stack, try that:
https://stackoverflow.com/a/2105095/7741129
For more detailed informations:
http://blogs.adobe.com/pdfdevjunkie/web_designers_guide
I think it's better use some kind of JS stuff just in case of cross-browser issues, like related into first link. Solutions like https://pdfobject.com/ it's helpful to get the job done. Look:
PDFObject 2.0 detects browser support for inline/embedded PDFs. (In
case you were wondering, your browser supports embedded PDFs. You
lucky dog, you!)
If you're working with dynamic HTML, such as a single-page web app,
you may need to insert PDFs on-the-fly. However, PDF embedding is not
supported by certain browsers. If you insert markup without first
checking for PDF support, you could wind up with missing content or a
broken UI.
The PDFObject utility helps you avoid these situations by detecting
support for PDF embedding in the browser; if embedding is supported,
the PDF is embedded. If embedding is NOT supported by the browser, the
PDF will NOT be embedded.
By default, PDFObject 2.0 inserts a fallback link to the PDF when the
browser does not support inline PDFs. This ensures your users always
have access to your PDF, and is designed to help you write less code.
The fallback link can be customized, or the option can be disabled if
you prefer.
PDFObject 2.0 is npm-ready. Modern web apps use npm to manage packages
and dependencies. PDFObject 2.0 is registered with Node Package
Manager (npm) and can be loaded dynamically.
PDFObject also makes it easy to specify Adobe's proprietary "PDF Open
Parameters". (Be warned these parameters are only supported by Adobe
Reader, most PDF readers will ignore the parameters, including the
built-in PDF readers in Chrome, Internet Explorer, and Safari. Read
more below.)
Can you save an edited HTML in the inspect element, to the browser? After I hit refresh, the web page goes looking back to normal and I want to keep it edited on my browser only for life.
You could press CTRL+S to save the page itself. But I suppose that is not what you want?
If it's a html from a page on the web you cannot. The only other solution (and I use it sometimes) is to create a local Chrome / Firefox extension that alters the DOM via Javascript.
If it's a html present on your disk you can do it with DevTools on Chrome.
you can do something like save un html code on notepad and save it as html or edit html code from inspect but those solutions will make static web page and there is no way to make it dynamic only if you change the source code of web page
In my end the webpage looks good but in my client's end the page doesn't load properly or just the vertical lines show up without the text and images.
Link to the website : http://www.krishnaprasad.me/Iadmire.html (Inactive now).
The website looks fine in all browsers for my client except Google Chrome that too in normal mode.
I've used Foundation 5 framework for developing this site. If it's an issue with browser's extensions/plugins at my client's side, can I automatically disable that?
Let's start with the easy part: You cannot disable a plugin or extension from within JavaScript (if that's what you meant by automatically disabling). The only way that I know of to disabling those is for the user to actually open the Extensions page in their Browser Settings and manually disable those.
You can, however, detect the presence of problematic plugins or extensions in JavaScript and, for example, redirect the user to another page where you ask them to disable those plugins.
I've taken a look at the page and I found the culprit: One of elements had an id of adcontent, which I am guessing is black-listed by either Chrome or one of the plugins.
I believe that if you could change that id to something else, and adjust the CSS appropriately, the issue should be fixed.
I followed the approach mentioned in how to emulate a mobile (android) browser on desktop
to project the mobile webpage's properties on desktop chrome browser. I was successfully able to do that but now I have some queries as mentioned below, please let me know your inputs on that
a) How to use the "Select element option" of chrome developer toolbar to view an element's property for a mobile webpage. In normal desktop chrome browser we have the web page displayed and below that the developer toolbar is displayed and we can easily spot the element using a pointer but with mobile webpage displayed on desktop chrome browser i am not able to use this option as the webpage is not displayed.
b) I tried to copy the xpath and other things from the displayed HTML (HTML of mobile webpage on desktop chrome browser) but it gave me an error that "You need to install a Chrome extension that grants clipboard access to Developer tools". I installed one such extension named: "Auto Copy" but then also I was not able to copy. Please let me know how to go about it.
Thanks a lot in advance,
Namit
For (B) – Judging from the discussion when that message was introduced, it sounds like you need to roll your own simple custom extension to enable clipboard access. Here's a sample manifest.json – I haven't tested it out myself, but it looks pretty straightforward. The extension development Getting Started guide explains how to turn a file like this into a working extension and install it locally.