Gives you access to end-to-end stories (logs) for Storyboard-equipped applications

Latest Version

Version
3.1.1
Update
March 1, 2017
Size
1.13MiB
Developer
Category
Users
393
Rating
5 ★
Manifest Version
2
Web Store Status
Languages Support
English
See more
Permissions
See more

Storyboard DevTools Extension

But why use Storyboard? (http://guigrpa.github.io/storyboard/)

* Hierarchical stories: put logs in context (stories), and group them in higher-order stories; they can be a life-saver with concurrent user actions and async events.
* End-to-end stories: see all client and server tasks triggered by a user action (a click on the Login button, maybe) in a single place.
* Storyboard DevTools Chrome extension: view client and server logs with a clean and detail-rich interface, including advanced features such as remote monitoring (for mobile devices and non-Chrome browsers) and relative timestamps.
* Storyboard CLI: wrap any application with it (no changes required) to monitor it remotely with the Storyboard DevTools.
* Real-time push of server logs to the Storyboard DevTools extension via WebSockets, with opt-in client-server clock synchronization. Even more: control the level of detail you get from various parts of your server remotely, without relaunching.
* Secure server logs: remote access is opt-in, and can be authenticated.
* Attach anything to your logs for further investigation.
* Plug-in architecture. Available plugins include Console, WebSocket Server & Client, File, (PostgreSQL) Database, and Browser Extension, but you can write your own too!
* Lightweight. Plugins are now (v3) available separately, so you only need to bring in the dependencies you actually use.
* Rich filter options: give logs source and severity attributes and apply fine-grained filtering, with white and black lists.
* Colorful: use color to convey meaning and importance. Storyboard extends the popular chalk library so that it can also be used on the browser.
* Enjoy the simple-yet-powerful API.

You will find a new \"Storyboad\" pane in your Chrome DevTools. Point your browser to either your normal server or Storyboard's standalone log server and log in (if required).

Some DevTools features worth highlighting:

* Modify the server's filter configuration without restarting it.
* Show stories chronologically (\"flat\") or hierarchically (\"tree\"): hover on the story title for the button to appear.
* Collapse/expand stories: click on the caret. Even when stories are collapsed, detect that they contain an error or warning thanks to a special icon.
* Open attachments and exceptions: click on the folder icon.
* Choose among 3 timestamp formats: UTC, local or relative to now: click on any timestamp.
* Set reference timestamps: right-click or control-click on any timestamp.
* Use quick find (case-insensitive) to highlight what you're looking for.
* Squash identical, consecutive messages into a convenient summary line.
* Configure when and how Storyboard \"forgets\" old logs and stories.
* Customise colours to your heart's content!

The Storyboard library is available here: http://guigrpa.github.io/storyboard/ (or just click on the Website button below).

Demo: https://storyboard-bhibtchlhy.now.sh/ (might be a bit slow <— free hosting!)

A note on permissions:

The \"Read and change all your data on the websites you visit\" permission sounds outright scary, but is required to send a request to a domain (the same domain of your app). It's not used for anything else.
Read more

Source Manifest.json

{"update_url": "https://clients2.google.com/service/update2/crx", "manifest_version": 2, "name": "Storyboard DevTools", "short_name": "Storyboard DevTools", "description": "Gives you access to end-to-end stories (logs) for Storyboard-equipped applications", "author": "Guillermo Grau Panea", "version": "3.1.1", "content_scripts": [ { "matches": [ "" ], "js": [ "contentScript.js" ], "run_at": "document_start" } ], "background": { "scripts": [ "background.js" ], "persistent": false }, "devtools_page": "devTools.html", "icons": { "16": "Logo16.png", "32": "Logo32.png", "48": "Logo48.png", "128": "Logo128.png" }}
Read more

Similar Extensions

icon

Gulp Devtools Extension · Developer Tools 393 9 ★ 587KiB

icon

DevTools Theme: Zero Dark Matrix Extension · Developer Tools 393 545 ★ 56.82KiB

icon

Node.js V8 --inspector Manager (NiMV3) Extension · Developer Tools 393 97 ★ 582KiB

icon

MobX Developer Tools Extension · Developer Tools 393 51 ★ 682KiB

icon

npmhub Extension · Developer Tools 393 19 ★ 77.19KiB

icon

Backbone Debugger Extension · Developer Tools 393 59 ★ 354KiB

icon

Immutable.js Object Formatter Extension · Developer Tools 393 33 ★ 43.46KiB

icon

Refined GitHub Extension · Developer Tools 393 213 ★ 572KiB

icon

PeepTube Extension · Accessibility 393 25 ★ 107KiB

icon

BigConsole Extension · Developer Tools 393 29 ★ 2.32MiB

icon

Smart Websocket Client Extension · Developer Tools 393 43 ★ 261KiB

icon

React Performance Devtool Extension · Developer Tools 393 11 ★ 170KiB

icon

DevTools Author Extension · Developer Tools 393 117 ★ 377KiB

icon

Meteor DevTools Extension · Developer Tools 393 43 ★ 430KiB

icon

Swoosh Cookie and Local Storage Specialist Extension · Developer Tools 393 121 ★ 720KiB

icon

OctoLinker Extension · Developer Tools 393 110 ★ 184KiB

icon

Sourcegraph Extension · Developer Tools 393 169 ★ 8.22MiB

icon

Github Node.js require() navigator Extension · Developer Tools 393 8 ★ 509KiB

icon

Reason Tools Extension · Developer Tools 393 13 ★ 818KiB

icon

Lovely forks Extension · Developer Tools 393 13 ★ 945KiB

icon

GitHub Hovercard Extension · Developer Tools 393 41 ★ 121KiB

icon

XHR JSON Panel Extension · Developer Tools 393 18 ★ 45.82KiB

icon

Apollo Client Devtools Extension · Developer Tools 393 266 ★ 490KiB

icon

Reactime Extension · Developer Tools 393 33 ★ 803KiB

User reviews

icon

lisa Sweeney (ID: 000000d4c63a443d) Voted 5 ★ - Updated 01/30/2017 nice

icon

Montserrat López Ibáñez (ID: 000000acd1bf8c8d) Voted 5 ★ - Updated 03/17/2016 Just what you need to debug your applications quickly and easily.