Gives you access to end-to-end stories (logs) for Storyboard-equipped applications
Storyboard DevTools Extension
* 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.
Source Manifest.json
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
Gulp Devtools 393 9 ★ 587KiB
DevTools Theme: Zero Dark Matrix 393 545 ★ 56.82KiB
Node.js V8 --inspector Manager (NiMV3) 393 97 ★ 582KiB
MobX Developer Tools 393 51 ★ 682KiB
npmhub 393 19 ★ 77.19KiB
Backbone Debugger 393 59 ★ 354KiB
Immutable.js Object Formatter 393 33 ★ 43.46KiB
Refined GitHub 393 213 ★ 572KiB
PeepTube 393 25 ★ 107KiB
BigConsole 393 29 ★ 2.32MiB
Smart Websocket Client 393 43 ★ 261KiB
React Performance Devtool 393 11 ★ 170KiB
DevTools Author 393 117 ★ 377KiB
Meteor DevTools 393 43 ★ 430KiB
Swoosh Cookie and Local Storage Specialist 393 121 ★ 720KiB
OctoLinker 393 110 ★ 184KiB
Sourcegraph 393 169 ★ 8.22MiB
Github Node.js require() navigator 393 8 ★ 509KiB
Reason Tools 393 13 ★ 818KiB
Lovely forks 393 13 ★ 945KiB
GitHub Hovercard 393 41 ★ 121KiB
XHR JSON Panel 393 18 ★ 45.82KiB
Apollo Client Devtools 393 266 ★ 490KiB
Reactime 393 33 ★ 803KiB
User reviews
lisa Sweeney (ID: 000000d4c63a443d) Voted 5 ★ - Updated 01/30/2017
Montserrat López Ibáñez (ID: 000000acd1bf8c8d) Voted 5 ★ - Updated 03/17/2016