Vue dev-tools is a handy little tool developed by VueJs to make the debugging easier when you develop Vue Applications . Currently there is a chrome extension available . Also you can install it via yarn or npm as well .
But sometimes you might come across a issue like this when you try to use this tool .
Following are few ways to fix the issue .
- First of all , make sure you are using a non-minified version of VueJS.
- If you are using File:// protocol , By enabling “allow access to file URL’s option” in the chrome extension
after this try closing and reopening the chrome .
- By adding the devtools = true in the app.js file .
Vue.config.devtools = true
More info here
- If non of the above doesn’t work , try loading your Vue app over a local http-server.
Here is a simple http-server. And close and reopen your chrome tab .
I was able to resolve this issue by following option 2 and 3 .
Difference between $scope and $rootscope This article is written assuming you have the basic concepts of AngularJS ! Whenever you declare a controller in angular , you automatically create a $scope . So what does a $scope mean : “$scope is an object that refers to the application model. It is an execution context for expressions. $scopes are arranged in hierarchical structure which mimic the DOM structure of the application. $scope can watch expressions and propagate events.” documentation . In simpler terms it means that it is a way of tying an object to the DOM . If you consider the MVC model in Angular , the scope acts as a model . It is a template which hosts all the functions and the related data . Okay now that we have gotten some insight into the $scope , let talk about $rootscope shall we ? $rootscope is the parent (more like a root parent ) of all the $scopes you create . It is the ultimate boss . It is (almost) like the Object class of Java .It is the top most $scope of your app and it contains ng-app directive . There is only one $rootscope for each of the Angular application .
Connection between $rootscope and $scope