is there any way to output the html from google chrome developer tools? - google-chrome-devtools

I have a website that uses javascript to change the HTML dynamically based on input. I use google developer tools to examine the HTML at any particular moment in the lifetime of the page. Is there any way easy way to output the HTML from the elements tab to a file or to the clipboard (so that I can run it thru a validator for debugging)? Control + A does not allow me to select all of the HTML.

You can Copy the <html> element as HTML:
... but you can do this easier at the console:
copy(document.documentElement.outerHTML);
Note that neither of these will copy the doctype. Also this is the serialization of the live DOM which could be totally different than the markup you served. But you know that.

Related

Template-based PDF renderer for flutter web

I am writing a Flutter web application that needs to have a customizable template for printing reports: inside the template there will be some placeholders that must be replaced with data at the moment of printing. The "printing" itself will be done by having the user download and open a PDF file, then print it through the browser, the OS or anything else, but that's beyond the scope, at the moment.
The default template would be something like this, where <BUYER_DATA> and <TRANSACTION_DATA> will be replaced with the data of the transaction the user is printing, along with some other "technical" tags (i.e., the page number and the pages count):
Header with site name
727 Chester Rd New Trafford, Stretford
Manchester
<BUYER_DATA>
01-12-2022 14:40
<TRANSACTION_DATA>
AppName - TM 2022
Page <PAGE_NO> of <PAGES_COUNT>
The user is allowed to edit this template in any aspect (boldness, size, colors, etc), provided that the tags related to the data are not removed from it.
So, to achieve this, I added a WYSIWYG html editor inside a page in order to save the template as an HTML-formatted string. And this works fine: only then I realized that the well-known flutter printing library doesn't support conversion from HTML directly to PDF on web, and all my plans began to crumble.
I then tried to discover if there's some other way to achieve the same by replacing the HTML template with something else, like markdown, but it seems that there's nothing that could help me.
The question is: anybody knows of a package capable of converting from HTML, markdown or such, directly into PDF?
I just need to know so I can stop googling around and decide to write my own parser for the HTML and convert it into a series of Widgets of the before-mentioned printing package.

How to get the whole code of a HTML element in Developer tools?

I'm looking for possibility to export or just copy the whole code of a HTML element, targeted with Developer Tools. With whole code I mean not only HTML (this option is good visible in context menu), but corresponding CSS and JS code too.
I found a Chrome extension, which claims to copy HTML and CSS, but it isn't reliable in its core function and doesn't copy JS at all.

is it possible to view a question with a browser before importing it to Moodle?

I have created a XML file using R-exams out of just a single exercise to be imported to Moodle. I would like to view it before uploading it in the Moodle question bank. I tried to open it with Firefox and I can see some code but not the output and a message appear saying that the XML file does not seem to have a style sheet associated to it. Is there a way to find this style sheet and to see how the question comes out just using a browser like Firefox or Chrome?
To emulate how the R/exams exercises are converted to HTML by exams2moodle() and how Moodle displays mathematical content, it's best to use
exams2html(..., converter = "pandoc-mathjax")
In recent versions of R/exams the resulting HTML file then automatically loads the MathJax Javascript that enables correct rendering of mathematical content in all modern browsers (including Google Chrome). See also http://www.R-exams.org/tutorials/math/ for some general advice about math in HTML.
To the best of my knowledge there is no tool that would quickly display Moodle XML files in such a way that you can easily assess them.

How can I "drill down" into a website using Perl's WWW::Mechanize

I have used the WWW::Mechanize Perl module on a number of projects and it's helped me out a lot.
I am trying to use it on a different site and I can't "drill down" into the content of the site.
The site is https://customer.bookingbug.com/?client=hantsrecyclingcentres#/services
I have tried figure out what the URL would be to get content shown in the resulting HTML, such as bb.d570283b87c834518ba9.css, bb.d570283b87c834518ba9.js and version.js
I tried to copy the resulting HTML into this posting, but used all sorts of quote and code sample combinations and it wouldn't display properly.
Does anyone have any idea how I "navigate" this site using this Perl module please?
WWW::Mechanize is a web client with some HTML parsing capabilities. But as you clearly noticed, the information you want is not in the HTML document you requested. Either download the correct document (whatever that might be), or do what the browser does and execute the JavaScript. This would require a JavaScript engine. The simplest way to achieve that is to remote-control a web browser (e.g. using Selenium::Chrome).

Making Word document embedded in a web page editable or read-only

I'm embedding some Word documents into our web page using iframe like this:
<iframe src="ftp://ftp.example.com/www/uploads/Image/test.doc" width="100%" height="400">
Alternative
</iframe>
The problem is that the embedded Word control allows the user to edit the documents and shows an icon to save them, but doesn't actually save anything. Is it possible to setup Word to save edits back to the FTP server? If not, is there someway we can make the document read-only so the user doesn't get the idea that they can make changes? We're using IE7 and Word 2003.
(I just asked a related question about getting Word to save to a FTP server: Possible for Word to edit documents directly off an web server without Sharepoint?)
You can use ActiveX component like EDraw OfficeView or UltraOffice to embbed office and give you few control against the save and edit the document. You can also send it back to server for save.
There are a number of solutions to your problem, the easiest in my oppinion is a commercial app: https://crocodoc.com/. Developers have unlimited preview time but production use requires a license, don't know if thats an option in your case? To get this working in IE7 you will also need http://html5boilerplate.com/ together with http://code.google.com/p/html5shiv/.
Not sure if this solution will remain free but it is at the moment: https://cloudconvert.org/page/api. They provide an api to convert documents to html, you could write a script to convert docs to html on upload and then store html to show on site.
Another good option is http://www.phpdocx.com/ they have a conversion plugin to convert docx to HTML, pdf and such.
As for making your existing solution read only, i read somewhere you can do it with the method below but i am unable to test as i am on a mac and currently have no access to a machine with IE right now.
<object id="msword" width="100%" height="100%" classid="clsid:67F2A879-82D5-4A6D-8CC5-FFB3C114B69D" data='[insert document name].doc'>
<PARAM NAME="src" VALUE="file:////[insert full document path here].doc" >
<PARAM NAME="readonly" value=true>
</object>
Hope these suggestions help you with your project!
I would recommend converting the file to an mht file. this will provide cleaner lines when shown in the browser and prevent the user from editing or saving the file.