1 00:00:00,730 --> 00:00:03,590 Next, we're gonna take a look at the sources panel. 2 00:00:05,170 --> 00:00:09,240 And you'll notice, here on the left, we have some code 3 00:00:09,240 --> 00:00:15,010 and over on the right, we have all sorts of JavaScript tools. 4 00:00:15,010 --> 00:00:18,270 Now this web page doesn't have any JavaScript on it, 5 00:00:18,270 --> 00:00:21,890 so we won't be using the sources panel a whole lot. 6 00:00:21,890 --> 00:00:26,560 However, if I were to edit a file, on the sources page, 7 00:00:26,560 --> 00:00:29,810 you'll see that it instantly updates in the browser, 8 00:00:29,810 --> 00:00:33,690 so if I were to change the background color here, 9 00:00:35,890 --> 00:00:41,300 to green You'll see that as I type it updates instantly in the browser 10 00:00:41,300 --> 00:00:45,390 window, so this is a really handy way to just go ahead and experiment 11 00:00:45,390 --> 00:00:49,140 with different styles quickly and then maybe you can put them back in your 12 00:00:49,140 --> 00:00:51,730 text editor and your project without having 13 00:00:51,730 --> 00:00:53,730 to switch back and forth between the browser. 14 00:00:55,040 --> 00:01:00,989 So I'm going to change this to blue and you'll notice that a little star appears. 15 00:01:02,060 --> 00:01:03,910 Up here next to the file name. 16 00:01:03,910 --> 00:01:07,981 I can go ahead and hit command s on a Mac or control 17 00:01:07,981 --> 00:01:12,020 s on a PC and then we'll go ahead and save that file. 18 00:01:12,020 --> 00:01:14,280 Now if I switch it back here to green, 19 00:01:14,280 --> 00:01:17,860 save again, I'll go ahead and switch it to orange. 20 00:01:17,860 --> 00:01:18,830 Save one more time here. 21 00:01:18,830 --> 00:01:23,990 And, I'm not really happy with the results of this. 22 00:01:23,990 --> 00:01:27,570 We've created a pretty ugly looking webpage by changing background there. 23 00:01:28,610 --> 00:01:32,100 But fortunately we can go ahead and right-click and click 24 00:01:32,100 --> 00:01:37,890 on local modifications, and you'll see the exact times that we 25 00:01:37,890 --> 00:01:40,720 made each one of our modifications and if we twirl those 26 00:01:40,720 --> 00:01:44,230 out we can see the difference between each one of those. 27 00:01:45,410 --> 00:01:50,790 Now if I see a revision I like I can say, apply this revision content. 28 00:01:50,790 --> 00:01:54,630 And it will go ahead, and I'll apply that revision back to the page. 29 00:01:54,630 --> 00:01:58,000 If I just wanna delete everything and remove all of the 30 00:01:58,000 --> 00:02:01,520 changes that I've made, I can go ahead and hit revert. 31 00:02:02,520 --> 00:02:05,350 And it will remove all of my local modifications. 32 00:02:07,010 --> 00:02:10,190 Now if you make some modifications here, 33 00:02:10,190 --> 00:02:17,980 and you are actually happy with them, you can actually save this out, as a file. 34 00:02:17,980 --> 00:02:19,820 So I can right click and hit 35 00:02:19,820 --> 00:02:25,120 save as and I could go ahead and save this style sheet right into my project. 36 00:02:25,120 --> 00:02:27,050 So you may not even need to use your text 37 00:02:27,050 --> 00:02:30,130 editor if you make changes here that you're happy with. 38 00:02:32,670 --> 00:02:35,260 Now, over here on the left, like I 39 00:02:35,260 --> 00:02:38,190 said, we're not loading in any Javascript, but if 40 00:02:38,190 --> 00:02:40,740 we were, we'd be able to set break points 41 00:02:40,740 --> 00:02:45,240 over here, and actually stop our Javascript from running. 42 00:02:45,240 --> 00:02:48,750 That's a little bit more advanced, and we're not going to get into that today. 43 00:02:48,750 --> 00:02:52,360 But I wanted to make you aware that that feature is available. 44 00:02:52,360 --> 00:02:56,660 You can also pause your Javascript when it's executing. 45 00:02:56,660 --> 00:02:57,780 So, if you click this button, 46 00:02:57,780 --> 00:03:02,780 you can click to pause on any type of exceptions. 47 00:03:02,780 --> 00:03:05,670 And if I click it again I can make it 48 00:03:05,670 --> 00:03:10,330 pause on any uncaught exceptions that might be any try catch 49 00:03:10,330 --> 00:03:13,540 block but again we're not going to do that today and 50 00:03:13,540 --> 00:03:17,220 if we were to set those break points they would appear 51 00:03:17,220 --> 00:03:17,720 over here. 52 00:03:19,520 --> 00:03:22,860 That's it for the sources panel. Next up we're gonna take a look at the 53 00:03:22,860 --> 00:03:25,710 timeline panel which will allow us to 54 00:03:25,710 --> 00:03:28,730 profile the rendering performance of our page.