Tutorials: The Vue.js Devtools Browser Extension

For developers and expert users (but Vue beginners)

Inspecting and debugging Vue components

The VueJS devtools extension runs inside the Browser's Development Console.

The main use case for the Vue.js Devtools Browser Extension for Chrome (opens new window) is to explore Vue's nested component hierarchy on any VueJS-backed web page of the mDIS.

Important Constraint

The Vue Devtools Extension works on Vue Development builds only. Start mDIS with npm run serve, not npm run build.

Further Constraints

Again, the Vue Devtools Extension works on mDIS Development builds only (npm run serve), e.g, on wb45 (opens new window) (rarely online).
Of course, any changes made (e.g. to the Vuex Store) inside the Console Panel of the Extension are not permanent. Vue Devtools are just a way to figure out how a feature on an mDIS web page is implemented, and what changes are possible in general. The extension enables users to explore Vue's support for Reactive Programming (opens new window): after input changes, or config changes, dependent objects on the web-pages self-update immediately.
Paths shown in the pictures below might have been changed during ongoing redesign of the mDIS application.
This tutorial has been written for Google Chrome in 2019. There exists also a Vue.js Devtools Firefox Extension. It works similar to the Chrome extension, but the Chrome devtools are more powerful and easier to use.

Installation of the Extension

If you haven't done so, install the Vue.js Devtools Browser Extension for Chrome (opens new window). This is a one-time task.

Open Google Chrome, go to the Chrome Web Store (opens new window), search for Vuejs. The extension can be found here (opens new window) but this particular link might change
Click on the blue "Add to Chrome" button in the upper right corner.
(optional) Take note of the Extension's Documentation (opens new window) on Github.com. (There are some animated GIFs.)
(optional) Go to Chrome's extension management panel. On the Vue.js Devtools page, click on the white "Details" button. Click "Allow access to file URLs" for the Vue Devtools extension. You can temporarily disable the extension here, too; or make sure that the extension is actually enabled.

Usage of the extension (general case)

Go to any mDIS Web page of the Development Build (opens new window) in the ICDP/GFZ intranet.
(see screenshot below) There should be a green "V" icon next to the Browser's Address bar (1). Make sure it is green and not grey. Reload page if necessary. Move the mouse over it and make sure that the tooltip (2) looks like as shown in the screenshot below.

Cores_-mDIS-_Google_Chrome_317-cropped

Finding the "Vue" panel in the Chrome Developer tools

(see screenshot below). Go to any mDIS data-entry page. (The Login Page is too basic and not recommended). Make sure the Vue.js Devtools Icon is green (1). Open the Chrome Developer Tools panel. To do so, hit the F12 key (alternatively, Ctrl+Shift+I). Alternatively, with the Mouse, click the "vertical ..." Menu Icon of Chrome, choose the .../More Tools.../Developer Tools menu item (2).

Revealing the nested component structure of a Vue Application

This is the main use case for this extension.

(see screenshot below). After the devtools panels opened, you should see something like in the screenshot below. click on "Vue" in the middle bar (3). Click on "<Root>" in the left half in the panel (4). You can explore Vue's nested component hierarchy on that page by clicking on the black triangles (5) + (6). The data, methods and properties associated with each component are visible on the right half of the Vue developer panel. A small subset of these items (7) is also editable here. See below.

Cores_-mDIS-_Google_Chrome_316

Attention: The devtools extension might stop working, e.g. after some period of inactivity. Then nothing is selectable or editable any longer. If it is not editable, reload page; or close Chrome and navigate to your page again.

The 'properties panel' in the lower right

The panel in the lower right is similar to the properties page in the Visual Basic IDE (legacy DIS users). When the elements inside this panel are all collapsed, there are up to 4 main elements, props, data, computed, and injected. The most important is data, because its sub-elements are (sometimes) editable. Click on "data" to expand it.

Selection_323

Interesting: You can also click on "open in editor" icon in the top right corner of the right Vue panel.

Using the Vue "Components" panel in the Developer Tools for Chrome

(see screenshot below) Use Black triangles to drill down to "DisForm" item, click on it to highlight it with a green background (1).
(optional) Hold mouse over = $vm0 shown in white font inside the green bar (1). A black tooltip "Available as $vm in console" appears (1). This console would become visible after clicking tab "Console" (2). Do not click on "Console" at this time. This will be explained further in another section below, in section Cool uses.
After clicking "DisForm", the corresponding Vue component is highlighted inside the body of the black web page (3). Here it is the form that will posted to the web server, for processing with Yii/PHP.
The form data currently selected (and its field names as known to PHP are shown in the lower right panel. Click on "formModel" (4). The form field data is shown here. These fields are editable inside the lower right hand panel. The fields are also reactive, thus browser will self-update the current web page. Click formModel/core_recovery, change value, see it updated instantly in the body of the web page (upper half, black background). See also dependent values getting updated instantly, e.g. "core recovery "%").
(optional) The DisDataTable component (5) represents the Section child table. (It is not hightlighted in the screenshot.)

Cores_-mDIS-_Google_Chrome_322

Use case example: How to edit the Labels of an mDIS Data Entry Form

In the lower left panel, click on "Core Form" (1)
In the lower right panel, enter "Label" in the search box. (2)
In the data/json/fields/ array, open any object (e.g. 3: Object). Move the Mouse over the items, watch a pencil icon appear and a trashbin icon (3). Click on the value for the label (4). Change its value to something else. The (black) Web page should update instantly (5).

Selection_324

Of course this can also be done with Javascript code. See below.

Cool uses of the command line to interact with the DIS Vue App

Editing the panel as mentioned in the picture above requires a lot of clicks, and does not always work properly. It is easier to enter javascript commands in the 'Console' tab.

Prerequisite: Click on any <...> element in the left panel, such that it gets a dark green background, thus activating the $vm0 variable in the devtools.

Purpose	Left Panel, Click on Element	Javascript Commands in Console
See querystring parameters	`<ROOT>`, any	`$vm0.$route.query.filter`
Get last part of route	`<ROOT>`, any	`$vm0.$route.params`
open "drawer" (left sidebar)	`<App>`	`$vm0.$data.drawer = true`
close "drawer" (left sidebar)	`<App>`	`$vm0.$data.drawer = false`
change a label in group1	`<DisTextInput>` or `<v-text-field>`	`$vm0.$props.label = "Drilled Length (km)"`

Enter the commands from the rightmost column in the Javascript Console.

How to use the other GUI elements in the VueJS Devtools, e.g. "Vuex", "Events" tabs

Vuex tab - Vuex is a Vue library that is being used for state management. Vuex maintains data about the logged-in user and the session, for instance.

Events tab - this panel shows if there are custom events defined inside the Vue app. A component may emit custom events, and other components may listen for this event, and do something, e.g. update themselves. This Event tab mechanism facilitates communication among the components, especially from nested components ".