Vue Devtools4:16 with Treasure Porth
Vue Devtools, available in popular browsers like Chrome and Firefox, is a powerful debugging tool that can help demystify the structure of our Vue applications.
Install Vue Devtools for Chrome
- You may also need to click the 3 dots at the top right of the screen in Chrome, then More Tools > Extensions. Then click Vue.js devtools > Details > then make sure “Allow Access to file URLS” is toggled on.
- You may need to refresh and/or restart your browser
- Make sure you’re using the unminified version of Vue.js
[MUSIC] 0:00 You may have noticed, as we've been working with Vue, 0:04 a couple of messages here in the console. 0:07 The first one says, download the Vue Devtools extension for 0:10 a better development experience. 0:13 We're gonna go ahead and do that. 0:15 Vue Devtools is a browser extension that will let us take a peek 0:17 at what's going on inside of our Vue instances. 0:20 With it, we can better see the structure of our apps and 0:23 observe changes to our data. 0:26 Vue Devtools can be extremely helpful for debugging, so let's take a look. 0:27 This link will take us to a GitHub repo with a link to where we can install 0:32 Vue Devtools, but let's just start by Googling vuejs devtools. 0:36 If you're using Firefox, you can find the installation 0:45 link at the Vue Devtools GitHub repo, or in the Teacher's Notes. 0:49 One of the first results should be a link to the Vue.js Devtools extension in 0:53 the Chrome web store. 0:57 Let's click on that, and then click Add to Chrome to install. 0:58 Add extension. 1:07 Once you've installed, the Vue logo should appear at the top right of your browser. 1:10 To use Vue Devtools, you may have to click the three dots at the top right 1:18 of the screen, then More Tools and Extensions. 1:23 Then click Details under Vue.js Devtools, and 1:27 make sure that allow access to file URLs is toggled on. 1:31 This allows us to use Vue Devtools with local files without a server. 1:37 You may also need to restart your browser, and make sure you're using the unminified 1:41 of Vue.js, which you should be if you've been following with me. 1:46 You won't be able to use Vue Devtools if you use the minified version, 1:50 it won't work. 1:54 All right, now that we have this set up, let's get a feel for how it works. 1:56 To follow along, you can open up the book detail example 2:00 from the last part of the course in Chrome. 2:04 Or you can download the project files from the link on this page and 2:06 open up the index.html file from the folder called book detail. 2:10 I'm going to change the orientation of Chrome Devtools so 2:23 that it is docked along the bottom here. 2:26 So now let's inspect the book detail template. 2:30 On the left, we're shown a tree of our Vue components. 2:33 Right now we have only one component, our root component, 2:36 which is the one Vue instance that we currently have in our project. 2:41 If we had a complex application with many nested Vue instances, 2:44 we'd be shown a helpful tree on this side of the window. 2:48 And it would allow us to inspect each Vue instance. 2:52 So if you click on the root instance, you can see on the right we have a view of 2:55 all the data associated with this Vue instance. 3:00 So we can use this to examine and change our data on the fly. 3:04 For example, if I click on the book title, 3:07 you can actually see the show detail property toggling from true to false. 3:10 And if I click on the showDetail property, 3:15 I can use this check box to change the boolean manually. 3:18 I can also change any of this text. 3:24 I can even change the type of data. 3:33 For example, I could change this to a number. 3:35 Note that none of this data persists. 3:43 Just like when we make changes in the console or 3:45 elements tab of Chrome Devtools, everything resets when the page reloads. 3:48 We'll use Vue Devtools to get a closer view into our apps throughout the course. 3:53 While we're here, let's click on console. 3:58 You'll see we have a couple of messages in the console from Vue. 4:01 There's nothing here that we need to worry about at the moment. 4:04 But keep your eye on the console as you're developing Vue applications. 4:07 Vue Devtools gives us access to enhanced error warnings, 4:10 which can be quite helpful for debugging. 4:13
You need to sign up for Treehouse in order to download course files.Sign up