Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Website Optimization

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

The Sources Panel

3:29 with Nick Pettit

The Sources panel allows you to make adjustments to your code in real time. You can revert to previous revisions of your changes, or you can save your changes to a file. Additionally, you can set breakpoints in JavaScript to stop your code from executing.

Please note that since this video was recorded, the button to pause exceptions has been moved from the bottom left of the Sources panel to the upper right of the Sources panel next to the other JavaScript debugging tools.

The functionality of the button remains the same.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    Next, we're gonna take a look at the sources panel. 0:00
    And you'll notice, here on the left, we have some code 0:05
    and over on the right, we have all sorts of JavaScript tools. 0:09
    Now this web page doesn't have any JavaScript on it, 0:15
    so we won't be using the sources panel a whole lot. 0:18
    However, if I were to edit a file, on the sources page, 0:21
    you'll see that it instantly updates in the browser, 0:26
    so if I were to change the background color here, 0:29
    to green You'll see that as I type it updates instantly in the browser 0:35
    window, so this is a really handy way to just go ahead and experiment 0:41
    with different styles quickly and then maybe you can put them back in your 0:45
    text editor and your project without having 0:49
    to switch back and forth between the browser. 0:51
    So I'm going to change this to blue and you'll notice that a little star appears. 0:55
    Up here next to the file name. 1:02
    I can go ahead and hit command s on a Mac or control 1:03
    s on a PC and then we'll go ahead and save that file. 1:07
    Now if I switch it back here to green, 1:12
    save again, I'll go ahead and switch it to orange. 1:14
    Save one more time here. 1:17
    And, I'm not really happy with the results of this. 1:18
    We've created a pretty ugly looking webpage by changing background there. 1:23
    But fortunately we can go ahead and right-click and click 1:28
    on local modifications, and you'll see the exact times that we 1:32
    made each one of our modifications and if we twirl those 1:37
    out we can see the difference between each one of those. 1:40
    Now if I see a revision I like I can say, apply this revision content. 1:45
    And it will go ahead, and I'll apply that revision back to the page. 1:50
    If I just wanna delete everything and remove all of the 1:54
    changes that I've made, I can go ahead and hit revert. 1:58
    And it will remove all of my local modifications. 2:02
    Now if you make some modifications here, 2:07
    and you are actually happy with them, you can actually save this out, as a file. 2:10
    So I can right click and hit 2:17
    save as and I could go ahead and save this style sheet right into my project. 2:19
    So you may not even need to use your text 2:25
    editor if you make changes here that you're happy with. 2:27
    Now, over here on the left, like I 2:32
    said, we're not loading in any Javascript, but if 2:35
    we were, we'd be able to set break points 2:38
    over here, and actually stop our Javascript from running. 2:40
    That's a little bit more advanced, and we're not going to get into that today. 2:45
    But I wanted to make you aware that that feature is available. 2:48
    You can also pause your Javascript when it's executing. 2:52
    So, if you click this button, 2:56
    you can click to pause on any type of exceptions. 2:57
    And if I click it again I can make it 3:02
    pause on any uncaught exceptions that might be any try catch 3:05
    block but again we're not going to do that today and 3:10
    if we were to set those break points they would appear 3:13
    over here. 3:17
    That's it for the sources panel. Next up we're gonna take a look at the 3:19
    timeline panel which will allow us to 3:22
    profile the rendering performance of our page. 3:25

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up