microsoft / mezzurite-devtools

A Chrome extension for debugging and understanding Mezzurite

Mezzurite Developer Tools

Mezzurite Developer Tools allow you to view Mezzurite metrics for any application being instrumented with Mezzurite.

Requirements

You need an Angular, AngularJS, or React application running Mezzurite.

Installation

To install, download the latest release, or clone the repository and build the extension by running npm run build:prod.

Navigate to chrome://extensions and select Load unpacked, selecting the /dist folder output from the build.

Mezzurite Ecosystem

Projects
ApplicationInsights-JS-Mezzurite	Application insights extension of Mezzurite
Mezzurite	Base SDK for Mezzurite with Angular, AngularJS and React integration
Mezzurite DevTools	See Mezzurite metrics being captured with a browser extension
VSCode Mezzurite	Check which components and modules are instrumented within VS Code

Contributions

To read about contributing to this repo, click here

mezzurite-devtools's Issues

Change repository status from Private to Public

Indicate to the user that a Mezzurite event is being expected after a route change

After a route change, the extension does not know if that route is properly instrumented and is expected to generate a Mezzurite event. Therefore, it is unable to and does not show any indication that a Mezzurite event is expected. The extension should be enhanced to allow indicating this loading state to the user.

Make a decision on what to do with the icon

@baresj @cn894
When the extension is installed, a small icon shows up on the browser. Since it doesn't have any functionality at the moment, it would be good to reassess what functionality to add to this or if it's even necessary at all.

Some ideas on what to do:

• The icon itself could be colored or grayed out depending on whether Mezzurite is detected or not.
• Directly navigate to the devtools tab on click.
• Maybe introduce a smaller, less detailed view in a popout containing only the ALT and most recent capture cycle and a link to go to the devtools tab.

Handling when 'unsafe-eval' is not allowed in the site's Content Security Policy

Navigating to https://github.com causes the extension to error:

Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src github.githubassets.com".

Centralized extension state management

In order to enable easier debugging and a better separation of concerns, the extension's state management should be centralized. State management is scattered across the React app in devpanel/ and the background script. From what we have discussed so far offline, it should best reside in the background.

Implementing this will allow easier development of new features in the future. This issue will be used to track this work and include all relevant discussions.

Error: 'Object reference too long' thrown when inspecting a React app using Mezzurite-React v1.0.7

The error is being caused by the chrome.inspectedWindow.eval() call. The expression: window.mezzurite returns an object that the API call is unable to serialize correctly.

Implement a Gantt/Waterfall chart visualization for timings

The current visualization shows the user a ranking of durations per component, but it lacks the start and end times per component. A Gantt/Waterfall chart would be useful in displaying this information.

Add 'Build Passing' badge to ReadMe

Most open source repositories, when employing CI/CD, show a badge that indicates whether the latest build is passing or not. This adds a sense of confidence to users that look at our repository by showing them that we do keep track of the build status.

Change time stamp generation time

Currently, capture cycle time stamps are generated at the view layer, which is later than when the metrics are actually taken. The capture cycle time stamp should be either taken from the window.mezzurite object or generated as soon as a timing event is received.

Create a PR template for this repository

This will allow us to standardize Pull Request information and make it easier and clearer for receiving and reviewing contributions.

Create an Issue template for this repository

This will help us standardize how we receive and review issues for this repository.

Publish on the Chrome Extension Marketplace

Let's make our extension available on the marketplace!

Port extension to Firefox

Porting the extension to Firefox would help us expand our user base. From what I understand, the chrome.* APIs for WebExtensions is very similar to Chrome's and the main difference would be in the manifest.json file.

Integrate with Azure Pipelines for enabling CI/CD

In order to enforce check-in criteria for Pull Requests based on build, tests, linting, and more, we need to integrate with a CI/CD solution like Azure Pipelines. This issue should also track which kinds of checks we'd want from the start, that'll be pasted in the discussion as we decide.

Remove console.log() statements from codebase

In order to avoid cluttering the user's console, all console.log() statements should be removed prior to releasing the 1.0.0 version of the extension.

The extension loses obtained Mezzurite events when the DevTools instance is closed

When using the extension, if the DevTools instance is closed, the previously obtained events are lost. This is currently expected behavior given the design, but it should be enhanced. Closing and opening a new instance of DevTools on the same page should not cause any loss of Mezzurite event information.

Create dev and prod versions of webpack.config.js

Currently, the webpack.config.js only outputs a development build and is not configurable via CLI parameters. Ideally, we'd like to have a development and production build. This will allow the developer to generate the corresponding build, whether they're working or creating a release build in a CI/CD pipeline.

ESLint configuration for 'semi' throwing error

The 'semi' rule is misconfigured. It expects: "semi": [ "error", "always" ], but it currently has: "semi": [ "always", "error" ].

A quick fix.