Weekly Vue News - #70 - Force-Enable Vue Devtools in Production Build
Hi 👋
My plans for this week are creating new video content for my brand-new YouTube channel.
I tried many different screencast tools but finally decided to buy Screenflow which is a very powerful tool.
Have a great week ☀️
Vue Tip: Force-Enable Vue Devtools in Production Build
Often we cannot reproduce a bug in the development environment and need to debug it in production.
Unfortunately, in most cases, the Vue Devtools browser extension is disabled in production builds:
Luckily, there is a way to force-enable it in production builds.
Open Console in Browser DevTools
First, we need to open the console in your browser's DevTools:
Windows or Linux: Ctrl + Shift + J
Mac: Cmd + Option + J
Access Vue App Instance
Now we need to get access to the Vue app instance:
If you are using Vue 2 you need to call:
Image created with CodeSnap.dev
For Vue 3, you need to run the following code in the console:
Image created with CodeSnap.dev
The app variable contains a reference to the Vue app instance:
We can now store the app version in a new variable called version:
Image created with CodeSnap.dev
Access Vue Devtools Instance
In the next step, we need access to the Vue Devtools instance which is available via window.__VUE_DEVTOOLS_GLOBAL_HOOK__:
We store it in a variable called devtools and set its property enabled to true:
Image created with CodeSnap.dev
Finally, we need to re-initialize the Vue app instance:
Image created with CodeSnap.dev
The last step is to refresh the browser DevTools to be able to detect the changes on the Vue app instance:
Windows or Linux: Alt + R
Mac: Option + R
Now the Vue Devtools extension is enabled in the production build:
ℹ️ If you don't want to do this on your own, check the "Vue force dev" Chrome extension
Curated Vue Content
👉🏻 In this article, Michelle Barker will walk you through some of the front-end optimization tips to keep our Vue apps as efficient as possible.
📕 Investing in Vue, Nuxt, and VueFire
👉🏻 Google's Firebase platform is building a 'first class' experience for Vue developers, including support for Nuxt.
📕 A domain-driven Vue.js Architecture
👉🏻 "For our reasonably large enterprise Vue.js app, this approach helped us a lot in clarifying responsibilities and enforcing separation of concerns on an architectural level. "
👉🏻 A CSS-in-TypeScript framework built for Vue
👉🏻 Still early days but has the perk of seamless integration into Vue, and works with Nuxt, Vitesse, and Vite.
Quote of the Week
JavaScript Tip: Clean up promises similarly to a try/catch/finally block
The finally() method of a Promise schedules a function, the callback function, to be called when the promise is settled (fullfilled or rejected).
It's very convienient for cleaning up similarly to try/catch/finally blocks.
Like then() and catch(), it immediately returns an equivalent Promise object, allowing you to chain calls to another promise method, an operation called composition.
This lets you avoid duplicating code in both the promise's then() and catch() handlers.
Image created with CodeSnap.dev
Curated Web Development Content
👉🏻 How to use the schema validation library Zod to check types at runtime.
👉🏻 Explained by none other than the excellent Matt Pocock.ypeScript-first schema declaration and validation library. In this tutorial, Matt Pocock has prepared a set of exercises that will help you level up.
📕 An Interactive Guide to Flexbox
👉🏻 A new, interactive explainer from Josh, with over 20 demos showing off how Flexbox works.
👉🏻 ESLint is joining forces with TSLint and planning a complete rewrite to prepare for “the next ten years of linting.”
👉🏻 Future CSS trends and takes a look at some far-fetched and futuristic CSS features that might one day make their way to the browses, such as CSS toggles, switch function, intrinsic typography. And more.
👉🏻 This is a great, quick explainer on the importance of including everyone from the beginning of your project to ensure accessible outcomes.
👉🏻 Stop using rm -rf to delete files on your computer.
👉🏻 In contrast to rm which is dangerous and permanently deletes files, this only moves them to the trash, which is much safer and reversible.
