Chromium Dev Tools

Chromium DevTools is a set of  tools built directly into Chromium-based web browsers, such as Google Chrome and Microsoft Edge. These tools are designed to assist developers in various aspects of web development, debugging, and performance optimization. They offer insights into a webpage's structure, behavior, performance, and network activity, among other things. Because Perspective runs off a user specific browser or our chromium based workstation, the use of the dev tools is extremely helpful when troubleshooting client related issues.

Workstation vs Browser

By opening a Perspective session in a browser, developer tools are already built in so no extra steps are necessary. Perspective Workstation on the other hand, does not have these tools built in. In order to utilize the dev tools for a Perspective Workstation session, you must expose a port and then have dev tools view the resources of the session through that port. To expose the port, you must add debugPort = 9244 to the target line of the executable used to launch Perspective Workstation. This target line is accessible by right-clicking the program and navigating to the shortcut submenu as shown below.

Once configured, launch the project and open up chrome, or any Chromium-based browser. Navigate to http://localhost:9224. Open up dev tools (CTRL + SHIFT + I) or navigate to the browsers Settings → More Tools → Developer tools.

Console (CTRL + Shift + J):

The Console tab in Chromium DevTools provides an interactive JavaScript console where you can execute code, log messages, and interact with a webpage's JavaScript environment. In the scope of prospective development and troubleshooting, the console provides real time logging on how the browser is interacting with the project and gateway. For example, a button configured with a system.perspective.print() will display the log information in this console view. This can be really useful to debug scripting implementations that depend on what the session properties themselves are holding.

The console could also log errors that explain unexpected behavior that a session is experiencing. For example, a user was experiencing issues with loading a project after passing authentication. This was the error message observed in their console:

WebSocket connection to 'ws://10.10.10.10:8088/system/pws/abc-def/343c044?token=pXVN0FyoVwbxmMSRtHWKM7Fkxf7THL8Mm9V1R4r7FPY' failed:

connect @ PerspectiveClient.ef…d510d2934354db.js:2

store.Channel: Websocket connection closed. code=1006, wasClean=false, reason=No reason given, codeMeaning=Code not defined, codeDescription=Code out of range.

This error demonstrates that web socket secure traffic was failing to establish. Because wss traffic is required to create a bidirectional channel between the session and gateway, the project failed to load. This directed the troubleshooting process to investigate networking infrastructure and led to the discovery that wss traffic was disabled.

Size & Scaling (CTRL+SHIFT+M)

In Chromium DevTools, the "Size" and "Scaling" functions help understand and optimize the layout and dimensions of elements within a web page. Toggling the device toolbar will allow you to forcibly change the resolution of the session to any custom pixel width and height. It also has prebuilt resolutions for common devices. This is highly useful for developing dynamically sized views for a multitude of different screen resolutions.

Network

The Network tab in Chrome DevTools is a tool used by developers to monitor and analyze network activity between a web browser and a web server. It provides insights into how resources are loaded, requests are made, and responses are received during the loading of a web page. This tab is particularly useful for diagnosing performance issues and debugging network-related problems.

The waterfall chart in the Network tab visualizes the timing and dependencies of requests. It illustrates when requests are initiated, when they're completed, and how they relate to each other. Here is an example of a Perspective page with two high-resolution photos.

We can see that the second photo took almost a whole second to load. If we hover over the waterfall request, we can see its detailed metric information:

This is particularly useful when troubleshooting slow or unresponsive elements of a Perspective view. If users are requesting large amounts of data from the gateway or from any web server, you will be able to monitor its performance utilizing the waterfall chart. If a particular element of that view is taking longer than expected, you can monitor its transmission rate and determine if a redesign or infrastructure upgrade is necessary.

Memory

The Memory tab is a feature designed to help analyze memory usage and diagnose memory-related issues in web applications. It provides insights into how memory is allocated, used, and released by various components of a web page or application. This tab is particularly useful for identifying memory leaks, optimizing memory usage, and ensuring efficient resource management in your web projects.

A Perspective session, when launched using a Chromium-based browser, utilizes Chromium to run. Chromium processes are generated and handle the memory of that given project. Vision, on the other hand, utilizes Java and requires the use of Java tools/methods to troubleshoot memory problems (e.g., Jdump, etc.). If you are experiencing crashing behavior with a Perspective session in a Chromium-based browser or from Perspective Workstation, this is the tool you may want to use.

Depending on the memory situation, it may be useful to capture multiple heap snapshots in order to have something to compare to. Capturing a heap snapshot at the start of a session application when memory utilization is low and capturing an additional snapshot when memory utilization is high or exceeding a threshold would be ideal moments of capture.

Once your Perspective Session is loaded and running in a browser, open up dev tools (CTRL+SHIFT+I), navigate to the Memory tab, make sure the Heap Snapshot is selected as the profiling type. Select the javaScript VM instance you want to capture from and take the snapshot.

Here is an example of two heap snapshots that showed growth in heap size, which eventually led to a Chrome memory crash. We can compare the two heap snapshots using the comparison view.

Allocation sampling on the other hand has minimal performance overhead and is recommended to be used for long-running operations. However, this only provides a general approximation of allocations within the JS execution stack.

While utilizing the snapshot properties can help guide your investigation, it may not necessarily find the source of your memory issue. Depending on your snapshot, specific constructors may be larger than others. In many cases, memory situations are caused by the generation of some object that never gets properly addressed in garbage collection. So it’s recommended to start your investigation there. In this example, I was able to expand on objects and notice a pattern of repeating ia.shapes.svg and specific template instances Templates/Piping/Tee.

Locating large amounts of the same object may narrow down your search. In this case, finding these object references allowed us to investigate those aspects of the project and do further testing. It was later determined that a large number of these templates with SVG images were being animated and causing a buildup of memory over time.

Another way a memory leak can occur in your application is when an element is no longer attached to the Document Object Model (DOM) tree but is still referenced by some JavaScript running on the page. These elements are called detached elements. For the browser to garbage-collect (GC) the detached element, the element must not be referenced from the DOM tree or from JavaScript code. Here is an example of detached elements sorted by size delta.

Ultimately, this tool can guide you in the right direction to determine what needs to be redesigned in a project and/or reported as a bug. However, to fully understand how this tool works, it’s recommended to look over some additional resources:

https://developer.chrome.com/docs/devtools/memory-problems/memory-101/

https://developer.chrome.com/docs/devtools/memory-problems/

https://www.youtube.com/watch?v=YDU_3WdfkxA

Elements

A tool used to inspect and manipulate the HTML and CSS of a webpage in real-time. It provides a visual representation of the Document Object Model (DOM) and allows interaction with various aspects of a webpage's structure and styling. Inspecting elements is quite useful when overriding or extending Perspective Style Classes with the use of the advanced style sheet.

There are times when applying styles during Perspective development doesn't quite behave the way we expect. Inspecting elements of interest allows us to interact with the style's rules directly. This can be done by just adding declarations to the rules. The inspect tool will also provide you with all potential declarations you can adjust for that given rule the moment you begin typing in the text field, as shown here:

When applying rules, it's important to consider rule inheritance. There may be styles that take precedence over others and, therefore, prevent your change. One way around this is to use !important for the declaration. Here's an example:

#myid {
  background-color: blue;
}
.myclass {
  background-color: gray;
}
p {
  background-color: red !important;
}