I am working on an open source plugin for the web mapping library Leaflet. The idea is to generate printable PDF documents from the map directly in the client browser. It's basic functionality works, but there is an issue in Google Chrome.
Depending of the document format and dpi settings, the script can take some time to fetch all the map tiles as images, convert them to data uris and add them to the document. In this case, the Firefox user interface doesn't respond for some seconds and then it shows the finished PDF. However, Chrome stops executing the script and shows me a bad smiley.
Aw, Snap! Something went wrong while displaying this webpage. To continue, reload or go to another page.
Normally, I would say that that is fine since there is a limitation due to processing power. But this actually happens for DIN A4 format at 300dpi, so I can't live with that. I have strong guess that this is not related to a bug in my code, because I can increase options step by step and at some level, Chrome stops executing the script.
How can I debug my code to find the bottleneck? How can I prevent Chrome from stopping my script?
Related
I am trying to create a 3d model viewing website for various student projects. Currently pulling from the 3js library to reference OBJs and MTLs on server. The idea is that you can click on the left box of each student wrap div to open a modal with a 3js file viewer.
This works 100% of the time the first time you view a model (first execution of render function), but opening and closing models will often result in MTLs being dropped, see here. Testing on multiple devices it seems that devices with faster internet connection/more processing power can actually load more files before corruption begins. In addition, not rotating the viewer seems to allow more files to be opened.
No error messages for the JS can be found in the Inspector. Messages sent from the 3js library files, however, show numerous errors any time a second/third/nth file is loaded without JS refresh. Putting in location.window.reload() in the exit function refreshes JS each time and fixes the error, but that causes a whole other set of problems.
The site with all source code and files can be accessed here: biszweb.
I will be able to provide more information is needed.
Please advise and thanks in advance.
Resolved. Certain parts of 3.js need to be reloaded after rendering a model. Simple fix would be to insert a js reloading script.
Is it possible to use C# to render an ASP.NET view on the server side and save it as a PDF, preserving all the visual elements that involve CSS and Javascript, exactly as it renders in Chrome? The Javascript includes the latest versions of the standard Bootstrap and d3 libraries, as well as code using d3 to draw SVG charts. The page's CSS heavily uses Bootstrap.
I've tried a few things including IronPdf, but it completely destroys the formatting no matter what options I have tried. The only good results I've been able to get are by actually viewing the web page in Chrome, trying to print it, and saving it as a PDF that way. I'm trying to basically get exactly the same results using backend C# code to generate the PDF, without any user interaction needed. Can this be done? If it's impossible to render perfectly as a PDF I would also be open to other visual file formats that preserve the appearance of the web page.
You can run any install of chrome in headless mode and send it a command to print:
chrome --headless --disable-gpu --print-to-pdf=file1.pdf https://www.google.co.in/
I did this a couple of years ago. I created a microservice that took a URI, a test javascript, and a massage script then returned a pdf.
Test Script:
The test script is injected into the page and is called repeatedly until it returns true. The script should verify that components are in a properly loaded state. (This could be skipped by simply using a long delay prior to printing the pdf)
Massage Script:
The massage script is not required. It is injected into the page to alter the javascript or HTML prior to printing the pdf.
I used this heavily to load the entire user JOM including all Angular data stores (NGRX) since the user context was not present in the server-side Chrome instance.
Delayed Printing:
Since this is not a feature supported by chrome, I made an endpoint on my server that would hold a GET connection indefinitely. A script referencing the endpoint was injected into each page to be printed. When the Test Script returned ready, the code would cancel the script request by changing the script tag src to an empty script file that would return. This would conclude the last item that Chrome was waiting on and the documentready event would fire thus triggering the chrome print.
In this way, I was able to control Chrome printing on complex authenticated pages at my server.
When I upload any changes in javascript files to my deployed site on Google cloud compute engine, the changes do not show up right away, if I load the js files in browser. The changes are physically there, validated by RDPing to the server. B
These changes sometime take 6 to 8 hours to show up in browser, and sometimes show up sporadically. What can I do to ensure that my changed js files take effect immediately on load?
I dont face this problem when I upload on my test server, which is not under cloud. Happens only on the google cloud server.
Try opening your builtin browser debugger (for example right-click on your page, if using Chrome, and click "Inspect"). Now select the Network tab. Now reload. Now look at the sizes of the files. If they are very small, then probably the browser loaded cached copies. You can verify this by checking the "Disable cache" option in the Inspector.
If it works correctly and the file updates right away when you have the browser cache disabled, then you need to investigate with your web server software to see how to cause it to invalidate caches. One mechanism you can look into is called "ETags."
What worked was invalidating the cloud cache for the file. Lesson learnt: always add version numbers to your js files.
I'm working on a headless browser based on WebKit (using C++/Qt4) with JavaScript support. The main purpose for this is being able to generate a HTML spanshot of websites heavily based on JavaScript (see Backbone.js or any other JavaScript MVC).
I'm aware that there isn't any way for knowing when the page is completely loaded (please see this question) and because of that, after I get the loadFinished signal (docs here) I create a timer and start polling the DOM content (as in checking every X ms the content of the DOM) to see if there were any changes. If there werent I assume that the page was loaded and print the result. Please keep in mind that I already know this is not-near-to-perfect solution, but it's the only one I could think of. If you have any better idea please answer this question
NOTE: The timer is non-blocking, meaning that everything running inside WebKit shouldn't be affected/blocked/paused in any way.
After testing the headless browser with some pages, everything seems to work fine (or at least as expected). But here is where the heisenbug appears. The headless browser should be called from a PHP script, which should wait (blocking call) for some output and then print it.
On my test machine (Apache 2.3.14, PHP 5.4.6) running the PHP script outputs the desired result, aka, the headless browser fetches the website, runs the JavaScript and prints what a user would see; but running the same script in the production server will fetch the website, run some of the JavaScript code and print the result.
The source code of the headless browser and the PHP script I'm using can be found here.
NOTE: The timer (as you can see in the source code of the headless browser) is set to 1s, but setting a bigger amount of time doesn't fix the problem
NOTE 2: Catching all JavaScript errors doesn't show anything, so it's not because of a missing function, wrong args, or any other type of incorrect code.
I'm testing the headless browser with 2 websites.
This one is working on both my test machine and in production server, while this one works only in my test machine.
I'm more propone to think that this is some weird bug in the JavaScript code in the second website rather than in the code of the headless browser, as it generates a perfect HTML snapshot of the first website, but then again, this is a heisenbug so I'm not really sure what is causing all this.
Any ideas/comments will be appreciated. Thank you
Rather than polling for DOM changes, why not watch network requests? This seems like a safer heuristic to use. If there has been no network activity for X ms (and there are no pending requests), then assume page is fully "loaded".
Im working on a video player at the moment (a flash one). Before the video starts, the player receives a manifest.f4m file. I would like to detect WHEN this file is requested and WHEN it actually arrives (ie the time for the server to generate it). I really have NO idea how to do it, but it should be possible using javascript because Firebug and even Google Chrome's console timeline are able to detect this "event".
Do you have any clue ?
Since it's in Flash, Firebug may not pick it up in the Net tab since those calls don't go through the browser's API. You may consider using Fiddler. It will show you just about everything.