What is Dev Tools and its purpose?

DevTools is a browser extension allowing you to inspect and debug your Vue applications in a more user-friendly interface. You can find the below extensions for different browsers or environments,

1. Chrome Extension
2. Firefox Addon
3. Standalone Electron app (works with any environment)

The DevTools plugins can be used as shown in the below snapshot,

Note:

1. If the page uses a production/minified build of Vue.js, devtools inspection is disabled by default so the Vue pane won't show up.
2. To make it work for pages opened via file:// protocol, you need to check "Allow access to file URLs" for this extension in Chrome's extension management panel.