Skip to content

8. Debugging

Jump to bottom
McBen edited this page Jul 17, 2020 · 3 revisions

Nobody is perfect and we all make mistakes.

Some of them are easy to spot and Typescript or ESLint will warn us early. Some bugs are real evil and hard to find.

The browser is our friend: hit "f12" to open the developer tools. If you see it the first time it might look overwhelming. Don't be afraid you'll soon master it.

'Elemtents' (FF:'inspector') is helpfull if something is wrong in your html-code/design or if you're tweaking styles. But we will focus on the tabs 'console' and 'sources' (FF:'debugger') because that's for code.

Tab-console

We already made use of it: console.log("CountPortals " + VERSION); If you scroll through the console messages (when the iitc-page and our tutorial plugin is loaded) there should be a line "CountPortals v0.0.0". This was generated by that command.

Not an amazing message but it tells use: plugin is loaded and 'init' was called.

There are different 'level' of messages you can generate: debug, info, log, warn, error Where to use debug, info or log is upto you. Usually you can stay with 'log' and ignore the others.

Keep console.warn("data is missing"); and console.error("this should never happen"); for really bad cases. They are also displayed in different colors to draw your attention. There is another one I like to use: console.assert( t > 0, "t must be greater then 0"); a conditional error message.

Instead of pure text you can print objects too.

    doCount(): void {
        console.log("Current portal:");
        console.log(window.portals[selectedPortal]);
        [...]

When you now open the dialog you'll see and can inspect the data of current selected portal.

You can also use this tab to directly run javascript commands in the last line. All iitc-plugins are stored in the object plugin. We can run our dialog function by: > plugin.CountPortals.doCount();

So, when searching for a bug: put console.log commands everywhere you thing it's important. Then check the log while the script is running and check if everything is like expected.

Tab-Source

While logging is easy it can still be hard to understand why something went wrong.

The 'Source' (or 'Debugger') Tab let us investigate our code directly. Search our code in the tree view on the left side: iitc_plugin_CountPortals/main.ts (in firefox:webpack/iitc_plugin_CountPortals/main.ts)

After selecting it you'll see our code in the middle window. Okay, we know our source that doesn't help much BUT we can set breakpoints. Scroll to our 'doCount' function and click on the line number of the first line in that function (or press ctrl-b).

Now hit our "count" link to trigger that function and the debugger should stop executing at our breakpoint. On the lower right side you can see the "callstack" (= which function calls were done till reaching that point) and "watches". There you can add these variable interesting for you or just hover the mouse over your code. Above that are shortcuts for stepping through your code (f8->run; f10->execute one line; f11->follow deeper into the next function)

Mobile

Sometimes bugs are only happens on mobile devices.

Here we got a console too! How to make it visible: enable it once: settings -> adv. settings -> Configure IITCm menu -> check 'debug'

Now you got a "debug" in you iitc menu. When opened it will show you the same stuff as the brower on desktop. On the bottom line is a buttom to minimize the log and to execute js-commands.

This helps a little bit, but wait, we do it even better:

Remote debug

Connect your phone via USB to your PC.

  • Enable USB debugging (settings->about-> click "build-number" multiple times; then system->adv->Dev.Options->USB-Debug)
  • start 'chrome' and open page: "chrome://inspect/#devices"
  • on your phone a "allow connection?" dialog should popup -> allow
  • if you now run IITC on your phone it should appear under your device in chrome (if you got connection problems check if other USB-debuggers are running or switch USB port)
  • hit "inspect" and enjoy

The view is a little bit different but you've all debug possiblity as it would run on you desktop.

Getting your plugin to the mobile device can be tricky sometimes. I prefer the adb way (once installed) -> "<~/Android/Sdk/platform-tools/>adb push dist/myplugin.dev.user.js /mnt/sdcard/IITC_Mobile/plugins"

Clone this wiki locally