Where I can see the output of javascript debug when wkhtmltopdf runs in debug mode (--debug-javascript)
4 Answers
Another (I would say easiest) means of debugging javascript in WKHTMLTOPDF is to download QT Browser, the underlying browser used by WKHTMLTOPDF, and to inspect the javascript execution for your page from within the browser.
You can download it from here
Instructions on debugging javascript in QT here
You can basically debug your JavaScript in QT Browser just as you would in Chrome or Firefox.
12 Comments
kohloth
Great answer. I just did this and found that I had a syntax error in my Javascript that was not picked up by Chrome or Firefox. I had an object literal that did not use the function keyword. i.e.
var myObj = { foo(bar, baz) { /* function code here */ } }, which should have been var myObj = { foo: function(bar, baz) { /* function code here */ } } The QtWeb browser threw these up for me to see easily in the console.
CShark
@kohloth Glad I could help!
Jim Rubenstein
Thank you so much for this answer. I wish I could upvote more than once, or send you more rep. I spent hours trying to track an issue down with Highcharts and wkthmltopdf, lots of trial and error, and this suggestion changed my perspective and got me to a place where i could find the actual issue. Thanks. So. Much.
Pandi_Snkl
Thanks Lot.., It works. In my case a lambda function(()=>{}) work in chrome & Firefox, but did not work in Qt Browser.
Bret Weinraub
Drag, QT is falling over and can't get up on Mohave
|
Rendering test.html
<!DOCTYPE html>
<html>
<head></head>
<body>
BODY
<script>
console.log('Hi!');
</script>
</body>
</html>
like this
wkhtmltopdf test.html test.pdf --debug-javascript
should return something like this
Loading pages (1/5)
Warning: :0 Hi!
Resolving links (2/5)
Counting pages (3/5)
Printing pages (5/5)
Done
Comments
Although Daffy Punks answer is correct, I had an additional idea some weeks ago, that helped me a lot. This I want to share: Show it inside PDF
When rendering the layout for PDF I put an additional (hidden) DIV #pdf_errors
And very early in source - if #pdf_errors is here - I let point console output to fill this div, and on error - I show it. Its not really debugging, but at least I see now what was going wrong.
Source in coffeescript, my plain javascript times are long gone ...
if ($pdf=$("#pdf_is_here")).length
for type in ["log","warn","error"]
do (type) =>
console[type]= (a...) =>
$pdf.append("<div class='#{type}'>#{s}</div>") for s in a
window.onerror= (messageOrEvent, source, lineno, colno, error) =>
$pdf.append("<div class='critical'>#{messageOrEvent}</div>")
$pdf.show()
$pdf.hide() # just in case css is not here
2 Comments
soger
This was a good idea, I tried it using jquery, unfortunately all I got was: "Script error."
halfbit
@soger: Yes, I have the problem, too, sometimes. My Idea was not to use it es a debug tool, just to see, that something is wrong. For debugging I use QT browser, then. See CSharks answer here.
In order to see the js errors made by wkhtmltopdf use "--debug-javascript" parameter in your command.
PLEASE! do not use the quiet mode for wkhtmltopdf -> ("-q" or "--quiet") because it will silence your js errors, and you wont be able to see anything.
ALSO!
if you want to make something like a console.log() if you want to debug your js more in detail -> you can use: throw new Error(yourVar) and you will see the contents in the response of wkhtmltopdf (make sure you convert the variable you want to throw as error into string(if it's an object or something..))
wkhtmltopdf documentation: https://wkhtmltopdf.org/usage/wkhtmltopdf.txt
--quietswitch, it will not print out any debug information.