Shulou(Shulou.com)05/31 Report--

In this article, the editor introduces in detail "how to debug the Vue production environment", the content is detailed, the steps are clear, and the details are handled properly. I hope this article "how to debug the Vue production environment" can help you solve your doubts.

Preface

Vue production environment cannot enable vue devtools by default, and it is difficult to solve if there is a problem with the production application. Using the methods provided in this article, you can implement online debug vue without breaking points on the browser.

Principle

Let's first talk about how vue determines whether devtools is available.

The vue devtools extension component injects the _ _ VUE_DEVTOOLS_GLOBAL_HOOK__ variable into the window globally, based on which Vue determines whether debugging is needed.

Determine whether the Vue.config.devtools is true before initializing the vue root instance. If it is true

The window.__VUE_DEVTOOLS_GLOBAL_HOOK__.emit ('init', Vue) method is called to initialize the debug panel.

The principle of this method is written in the comments of the code.

Methods and steps

1. Copy the following js code and press F12 to paste it to the console for execution

two。 Close the console and open the console to see the Vue panel

The code function openVueTool () {/ / is executed in the method to avoid contaminating the global variable / / turn on the method of vue2 production debugging / / 1. Looking for vue instances, it can be said that 99% of the applications use app.__vue__//. If you can't find it, then find any component, use the component element. _ _ vue__.$root to get var vue = app.__vue__// 2.vue constructor var constructor = vue.__proto__.constructor / / 3.Vue has multiple levels, to find the top var Vue = constructor While (Vue.super) {Vue = Vue.super} console.log (Vue) / / 4. Find config and set devtools to trueVue.config.devtools = true; / / 5. Register on Vue DevTool var hook = window.__VUE_DEVTOOLS_GLOBAL_HOOK__hook.emit ('init',Vue) / / 6. If you have vuex store, you can also register / / refer to https://blog.csdn.net/weixin_34352449/article/details/91466542if(vue.$store){ var store = vue.$store; store._devtoolHook = hook; hook.emit ('vuex:init', store); hook.on (' vuex:travel-to-state',function (targetState) {store.replaceState (targetState);}) Store.subscribe (function (mutation, state) {hook.emit ('vuex:mutation', mutation, state);});}} openVueTool (); disadvantages

This method only works for the current tab, that is, if you accidentally refresh the page (out of habit), or if you need a new tab to open another route, you need to go through the above steps again.

Long-term solution

Install the Tampermonkey plug-in in the browser. It is recommended to use the edge browser

After installing the administrative panel of the plug-in, create a new script and paste the following code

After reading this, the article "how to debug the Vue production environment" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself to understand it. If you want to know more about related articles, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.