21

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

El Kopyto
  • 1,157
  • 3
  • 18
  • 33
  • 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. – matth Oct 28 '13 at 18:03

4 Answers4

42

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.

CShark
  • 2,183
  • 1
  • 24
  • 42
  • 2
    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. – kohloth Aug 16 '16 at 17:48
  • 2
    @kohloth Glad I could help! – CShark Aug 16 '16 at 17:54
  • 1
    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. – Jim Rubenstein Mar 12 '18 at 18:23
  • 1
    Thanks Lot.., It works. In my case a lambda function(()=>{}) work in chrome & Firefox, but did not work in Qt Browser. – Pandi_Snkl Apr 26 '18 at 14:28
  • 1
    YES!! Thanks, found the culprit, the QT Browser doesn't support ES2015, so you might have to replace keywords like `let` & `const` – webaholik Oct 26 '18 at 11:56
  • 1
    Unfortunately, the qtweb browser there is 32-bit only. Won't work if your system is 64-bit only. – kleptog Dec 13 '18 at 12:05
  • You can still run 32-bit programs on a 64-bit system. – CShark Dec 20 '18 at 22:01
  • 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`` – Augusto Destrero Apr 04 '19 at 11:16
  • 1
    QT Browser is outdated and does not work on MacOS 10.14 at least. Was probably a good answer years ago. – David J Apr 12 '19 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. – CShark Apr 17 '19 at 05:58
  • 2
    Drag, QT is falling over and can't get up on Mohave – Bret Weinraub May 28 '19 at 15:53
  • 1
    That answer is gold. – William R. Marchand Sep 19 '20 at 16:09
20

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
Jasper
  • 1,971
  • 19
  • 34
9

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
halfbit
  • 3,773
  • 2
  • 34
  • 47
  • This was a good idea, I tried it using jquery, unfortunately all I got was: "Script error." – soger Aug 16 '22 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. – halfbit Aug 18 '22 at 18:18
0

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

AHeraldOfTheNewAge
  • 71
  • 5