Docs

Integrated Dev Tools

Getting Started

The Pokki development tools are integrated in Pokki and do not require any additional download or install. If you do not already have Pokki, download it . To enable the developer tools select ‘Toggle Dev Tools’ from the shortcut inside the Pokki start menu directory. To disable them simply select this same shortcut again.

Note: If you are on a Mac or Linux, we have a poor-man’s development method utilizing Google Chrome and a JavaScript include which you can learn about here . While you can develop this way we highly recommend testing your Pokki on Windows. Actual Mac support is coming in the near future.

Basics

The Pokki dev tools enable you to develop and run your Pokki app locally. Pokki does not provide any kind of integrated text editor. You will be using your text editor of choice to edit and save local files, then interacting with the Pokki dev tools to reload your app, debug it, etc. It’s a very similar flow to web developers who are editing files and refreshing a browser.

The dev tools provide functionality for you to:

  • Add your local app as though it were installed from the store
  • Debug and inspect the popup and background pages
  • Reload your app after you make changes
  • Simulate how Pokki would unload your app for memory management

Interface

When the dev tools are enabled you should see a Pokki icon in the taskbar’s notification area (aka the system tray) as seen in the above image. If the icon isn’t visible it may be hidden. If your icon is hidden, click the up arrow on the left side of the notification area. Drag the Pokki icon from this hidden area to the taskbar notification area so that it is easier to access.

interface

Clicking on the Pokki dev tools icon reveals a menu with the following options:

  • Add Pokki... – Used to add a local app you’re developing to Pokki
  • For each installed app:
    • Development ->
    • [HTML files] ->
      • Show Developer Tools – Show the inspector and debug tools for this page
    • Unload – Simulate memory management and unload the app
    • Relaunch – Reload the app’s manifest file and associated HTML files
    • Remove – Remove the app from Pokki
  • Show Log Window – Displays internal Pokki log information
  • Relaunch Pokki – Quits and launches Pokki, reloading all apps
  • Quit – Quits Pokki, it may be started again by locating the Pokki shortcut in the start menu

The development tools may also be accessed by right clicking on a local app’s icon in the taskbar, as shown below.

add pokki

Adding a local app to Pokki

With the dev tools enabled it's easy to add a local app you’re developing to Pokki. Once added your app can be accessed from the taskbar, use the Pokki APIs and be debugged and inspected. The only difference you need to be aware of between a local app and a packaged app is that a local app’s local storage is cleared each time Pokki.exe is restarted. A packaged app’s local storage remains persistent between Pokki.exe restarts.

add pokki

To add a local app:

  1. Click on the Pokki dev tools icon in the taskbar
  2. Select “Add Pokki…” from the menu items
  3. Navigate to the directory that contains your app’s manifest file and select it
  4. That’s it – your app should now be in the taskbar

If your app is not showing up in the taskbar, click on the Pokki dev tools icon and select ‘Show Log Window’. The log may reveal why your app is not showing up, most likely due to a missing field or malformed manifest file.

Reloading your app

Once your app is loaded you will most likely be modifying its code in your favorite editor and want to see your changes reflected. Simply right click on your app's icon in the taskbar and select “Relaunch”.

reloading

Simulating memory management

Pokki includes a memory management service that may cause your pages to be unloaded to free memory. The background page, if specified, will be automatically reloaded however the popup page will not be reloaded until the user clicks on your app. The “Unload” option available in your app’s development menu simulates this purge so you can ensure your app behaves as expected. To learn more about how handle this situation please read Maintaining state from the developer guide.

unload

Debugging and inspecting

The dev tools include functionality that is heavily based on Chromium and the WebKit Web Inspector, enabling you to inspect and debug your popup or background page. You can learn more about these tools  here.

To access these tools right click on your app’s icon in the taskbar, select ‘Development’, the page you would like to inspect, and ‘Show Developer Tools’. You can also access this same menu by right clicking on the dev tools icon in the taskbar notification area and selecting your app.

debugger

The Pokki inspection and debugging window is shown below.

window tools

The inspection window includes the following functionality:

  • Browse and edit the live DOM hierarchy
  • View and modify CSS styles
  • Debug JavaScript code, including breakpoint support
  • Profile the loading time of your app's assets and functions
  • Access the JavaScript console

It's important to re-iterate that the inspection window is associated with your app at the HTML page level. This means you will have two debugger windows for your app if you are using both a background and popup page.

Note: Breakpoints are triggered only when the inspection window is open (although it may be minimized).

Developing on Mac or Linux

We have put together a very lightweight, framework independent JavaScript class that allows you to develop a Pokki on Mac or Linux in Google Chrome. The JavaScript class simulates or stubs out all of the Pokki namespace methods. It’s called PokkiBrowser.js and you can download it here. The file includes comments specifying how it supports the various Pokki APIs. Please note that this guide uses Mac examples but should be easily transferrable to Linux.

Firstly, we need to disable the same-origin policy to enable cross-origin XHR requests. To do this we run Chrome with the –disable-web-security command line switch.

Quit any open Chrome browsers and run the following in Terminal:

/Applications/Google\  Chrome.app/Contents/MacOS/Google\ Chrome --disable-web-security
  

This will open an instance of Chrome with web security disabled. Please note you’ll have to keep Terminal running while you develop otherwise this instance of Chrome will close.

Next, add PokkiBrowser.js to your app’s popup page before any other JavaScript files. This will take care of any ‘pokki is not defined’. You can include PokkiBrowser.js and then forget about it as it doesn’t cause any conflicts later on when your app ends up running in Pokki.

Lastly, open your app’s popup page in Chrome. That’s it!