- Vue.js 2 Web Development Projects
- Guillaume Chau
- 239字
- 2021-07-02 22:34:23
Vue devtools
An official debugger tool for Vue is available on Chrome as an extension called Vue.js devtools. It can help you see how your app is running to help you debug your code. You can download it from the Chrome Web Store (https://chrome.google.com/webstore/search/vue) or from the Firefox addons registry (https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/?src=ss).
For the Chrome version, you need to set an additional setting. In the extension settings, enable Allow access to file URLs so that it can detect Vue on a web page opened from your local drive:

On your web page, open the Chrome Dev Tools with the F12 shortcut (or Shift + command + c on OS X) and search for the Vue tab (it may be hidden in the More tools... dropdown). Once it is opened, you can see a tree with our Vue instance named Root by convention. If you click on it, the sidebar displays the properties of the instance:

You can drag and drop the devtools tab to your liking. Don't hesitate to place it among the first tabs, as it will be hidden in the page where Vue is not in development mode or is not running at all.
You can change the name of your instance with the name option:
var app = new Vue({
name: 'MyApp',
// ...
})
This will help you see where your instance in the devtools is when you will have many more:

- 現代C++編程:從入門到實踐
- Learning Real-time Processing with Spark Streaming
- CockroachDB權威指南
- 數據結構和算法基礎(Java語言實現)
- Java應用開發與實踐
- 樂高機器人設計技巧:EV3結構設計與編程指導
- 數據結構簡明教程(第2版)微課版
- Building a Quadcopter with Arduino
- 第一行代碼 C語言(視頻講解版)
- C#程序設計(項目教學版)
- Mastering Akka
- 從0到1:HTML5 Canvas動畫開發
- Mudbox 2013 Cookbook
- WebStorm Essentials
- Xamarin Cross-Platform Development Cookbook