Debugging javascript in wkhtmltopdf

Asked 17/6, 2013 at 15:53 Answered 11/10, 2022 at 7:4

Where I can see the output of javascript debug when wkhtmltopdf runs in debug mode (--debug-javascript)

Unlimited answered 17/6, 2013 at 15:53 Comment(1)

Are you running this in terminal/command line? It should print out when you execute wkhtmltopdf. Keep in mind, this is only printing out logged events, not everything that javascript is doing. Also, if you're using the --quiet switch, it will not print out any debug information. – Prevot 28/10, 2013 at 18:3

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.

Rhombohedral answered 15/10, 2015 at 4:39 Comment(12)

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. – Faxon 16/8, 2016 at 17:48

@Faxon Glad I could help! – Rhombohedral 16/8, 2016 at 17:54

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. – Whop 12/3, 2018 at 18:23

Thanks Lot.., It works. In my case a lambda function(()=>{}) work in chrome & Firefox, but did not work in Qt Browser. – Civilized 26/4, 2018 at 14:28

YES!! Thanks, found the culprit, the QT Browser doesn't support ES2015, so you might have to replace keywords like let & const – Leeleeann 26/10, 2018 at 11:56

Unfortunately, the qtweb browser there is 32-bit only. Won't work if your system is 64-bit only. – Clactonian 13/12, 2018 at 12:5

You can still run 32-bit programs on a 64-bit system. – Rhombohedral 20/12, 2018 at 22:1

To run QtWeb (32bit) on a 64bit platform (Ubuntu 16.04) I had to install some i386 apt packages: sudo apt install libglib2.0-0:i386 libxrender1:i386 libfontconfig1:i386 libxext6:i386 – Girdler 4/4, 2019 at 11:16

QT Browser is outdated and does not work on MacOS 10.14 at least. Was probably a good answer years ago. – Metaphysic 12/4, 2019 at 17:24

QT is the browser that is being used by the library itself, so it is the correct browser to use when debugging WKHTMLTOPDF related issues. Getting QT to run on Mac is a separate issue. Personally I use Win 10. So far I've had 0 problems. – Rhombohedral 17/4, 2019 at 5:58

Drag, QT is falling over and can't get up on Mohave – Prudenceprudent 28/5, 2019 at 15:53

That answer is gold. – Helminthology 19/9, 2020 at 16:9

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

Rolypoly answered 13/2, 2014 at 15:0 Comment(0)

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

Swanherd answered 18/7, 2017 at 13:44 Comment(2)

This was a good idea, I tried it using jquery, unfortunately all I got was: "Script error." – Coad 16/8, 2022 at 14:40

@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. – Swanherd 18/8, 2022 at 18:18

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

Boigie answered 11/10, 2022 at 7:4 Comment(0)

Recommended topics

Hot tags