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 can easily catched by our editor, Typescript or ESLint. Some bugs are real evil and hard to find.

Our browser will help us: 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.

'Elements' (FF:'inspector') is helpful if something is wrong in your html-code/design or if you want playing with styles. Here 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 output objects too.

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

When you now open our dialog you'll see the data of current selected portal. If one is selected else you'll only got a "undefined".

In the last line of this tab you can directly run javascript commands. All iitc-plugins are stored in the object plugin, so for calling our dialog we can run: > plugin.CountPortals.doCount();

When searching for a bug: put console.log commands on every line that could provide a hint. Watch 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)

When selecting it you'll see our code appearing 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 in IITC to trigger that function and the debugger should stop executing at our breakpoint. On the lower right side you'll see the "callstack" (= which function calls were done till reaching that point) and "watches". There you can add variables of interest (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 only appear 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'

The debug in your IITC Menu will open a small version of the console you know from your desktop browser. On the bottom line is a button to minimize the log and a line 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 the 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 your desktop.

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

Clone this wiki locally