Learning to Export Kendo UI Widgets without a Browser Using PhantomJS Part 3: Debugging

2015-08-16 15_34_42-Remote Web Inspector

In our first 2 exercises, we completed a simple Kendo widget initialization and output using PhantomJS. But if you want to use this technique for something a little more complex with a few more widgets and a more complicated UI, it’s likely you will also want to know how to debug when things don’t go as planned.

Even though the whole point may be ‘browserless’, we can still use a WebKit browser to debug our PhantomJS process, and I will show you how.

First, add a debugger option to the PhantomJS command text.

And, so that the debugger will have a place to stop within the JavaScript, add a debugger statement there as well.

Now, run the project from Visual Studio. The console window will open, but the output message will not display yet. When the debugger option is used, PhantomJS waits to be run from the WebKit console. To do that, navigate in your browser (I used Chrome) to localhost:9000. You should see a link in the browser like this:

2015-08-16 15_34_42-Remote Web Inspector

Click the link, and you will see the WebKit Inspector. Type the command __run(); into the console window, and PhantomJS will execute and break at your debugger statement.

2015-08-16 15_35_26-localhost_9000_webkit_inspector_inspector.html_page=1

From here you can add more breakpoints and debug the script by stepping through. But you can also view the HTML, which is really useful.

2015-08-16 15_39_49-localhost_9000_webkit_inspector_inspector.html_page=2

Or view the other scripts on the page:

2015-08-16 15_39_35-localhost_9000_webkit_inspector_inspector.html_page=2

And you can continue the execution and view the output file as normal from this point. You can also view the full example here.

Did you learn something? I really recommend you attend FalafelCON 2015, where there will be many deep dives on Kendo UI.

The following two tabs change content below.
Rachel finds joy in meeting challenges in her career and her life. After deciding to pursue a career in electronics, and as one of only a handful of female students in her department, Rachel graduated at the top of her class with a BS in Electrical and Computer Engineering from Oklahoma State University. Two years after graduation, she was leading the software design team on a multi-million dollar testing system for the Department of Energy. Rachel has experience in circuitry design and automated test systems, but her true passion has always been for software. Rachel loves to spend time with her husband and daughters on their Oklahoma cattle ranch enjoying horseback riding, taking photos, and making memories with her extended family.