Integrated Dev Tools
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.
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
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.
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.
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.
To add a local app:
- Click on the Pokki dev tools icon in the taskbar
- Select “Add Pokki…” from the menu items
- Navigate to the directory that contains your app’s manifest file and select it
- 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”.
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.
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.
The Pokki inspection and debugging window is shown below.
The inspection window includes the following functionality:
- Browse and edit the live DOM hierarchy
- View and modify CSS styles
- Profile the loading time of your app's assets and functions
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
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.
Lastly, open your app’s popup page in Chrome. That’s it!