WEBVTT

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.