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

How to download and manually install Storyboard DevTools extension for Chrome

Looking for a way to install Storyboard DevTools extensions for Chrome, you can search for them in the Chrome Web Store, clicking the "Add to Chrome" button, and following the straightforward process.

However, you may need to install Storyboard DevTools extensions manually, this article outlines two simple methods to effortlessly install Storyboard DevTools extensions, whether they come as unpacked folders in compressed formats like .zip or as .crx files.

Method 1: Download Storyboard DevTools extension and manually install through Drag &Drop

If you ever need to manually install a Storyboard DevTools extension for Chrome, don't worry, it's a simple process. Just follow these easy steps, and you will have your extension ready to use in no time.

Step 1: Download the Storyboard DevTools Extension by clicking the "Download CRX" button on the website.

Look for the Storyboard DevTools extension you wish to install. Go to the website and download the Storyboard DevTools extension package, which is usually a .CRX file and comes in a zipped file. Here ".crx" file is the format for Storyboard DevTools extension that contains all the data.

Step 2: Extract &Arrange Files

Once the file is downloaded, extract that file into its own folder. Similarly, give that extension files a permanent home. In other words, keep it in a folder that you don't accidentally delete it because these files will be needed to make that extension work.

Step 3: Go to the Chrome Extensions Page

Open Google Chrome and in the address bar, type chrome://extensions; it will open the Google Chrome extensions page. Make sure that "My extensions" is selected in the sidebar.

Step 4: Drag and Drop the Extension

Now, go to the folder where you extracted the Storyboard DevTools extension and drag &drop the extension file from there anywhere onto the extension page within Google Chrome.

Step 5: Complete the Installation

Once you drag and drop the extension file, follow the steps that Google Chrome takes you through. Similarly, if the extension file is of .crx file format, you will be required to review the permissions and then add the extension.

Now, you can manage that added extension as you would like to with any other Chrome extension that you added through Chrome Webstore. Its icon will also appear in the Google Chrome Menu on the right side of the address bar once you activate it.

Method 2: Download Storyboard DevTools extension for Chrome and install in Developer Mode

This is another method to install Storyboard DevTools extension manually, but the twist is that here, you install by enabling the developer mode option provided in Google Chrome. This mode is commonly used for testing extensions or running unpublished tools.

Step 1: Download the Storyboard DevTools extension file

Select and download the Storyboard DevTools extension by clicking the 'Download CRX' button on the website.

Step 2: Extract the downloaded contents

Convert the file to a ZIP file if it is in CRX format then extract the Storyboard DevTools extension zip file or folder that you downloaded. Make sure you extract it using the same folder name and keep it safely in another folder, so you don't delete it by mistake. The extracted folder will be needed to keep your Storyboard DevTools extension running.

Step 3: Open Chrome Extension Setting Page

In the address bar of Google Chrome, type chrome://extensions and open the Chrome Extension Page.

Step 4: Enable Developer Mode

After opening the Chrome Extension page, look at the top right side, and you will find the toggle option of "Developer mode."Simply enable that developer mode option.

Step 5: Load the Unpacked Extension

Once you enable the developer mode option, you will see the menu of Load Unpacked, Pack Extensions and Update. From that, select the option "Load unpacked."

Step 6: Select the Extension Folder

Once the pop-up opens upon clicking Load unpacked, select the Storyboard DevTools extension directory and click on the "Select Folder "button.

Step 7: Confirm and Install

After you select an extension folder of a Google Chrome extension you're installing manually, confirm its installation for the final time and let the installation complete.

Conclusion

Here we've made a step-by-step guide on How to manually install Storyboard DevTools extension in 2 ways. We hope this guide proves helpful.

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.