Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
Now that we our website project, let's see how to use Visual Studio to run our website so that we can preview it in a browser.
Additional Learning
For more information about debugging, profiling, and build configurations in Visual Studio check out these articles.
- Debugging in Visual Studio
- Visual Studio 2015 - Analyze Performance While Debugging in Visual Studio 2015
- Understanding Build Configurations
Keyboard Shortcuts
- F5 - Start debugging (i.e. build and run your website/project)
-
0:00
Welcome back.
-
0:01
We've got our project created now, but having a website that you haven't seen
-
0:05
running in a browser, [INAUDIBLE] bad as useful as a book that you've never opened.
-
0:09
Luckily, Visual Studio makes it really easy.
-
0:13
Ready?
-
0:13
Let's do it.
-
0:15
To run a website, we'll click on the play button here at the top of the screen.
-
0:20
If you prefer to keep your hands on the keyboard, like I do,
-
0:23
you can also press the F5 function key.
-
0:26
But before we do that,
-
0:28
let's click the little down triangle here on the right hand side of the play button.
-
0:33
This displays a list of the installed browsers.
-
0:36
Using this list, we can select the browser that we want to use to run our website.
-
0:41
Let's select Google Chrome and then click the play button.
-
0:46
Visual Studio will build our website and load it into the browser that we selected.
-
0:51
Here's our website.
-
0:53
The first page that we see is our default page which for
-
0:56
our website is the homepage.
-
0:58
Using the menu here in the header, we can click on About,
-
1:02
to see the about page, or Contact to see the contact page.
-
1:07
If we click on Application Name, that takes us back to the homepage.
-
1:13
Let's switch back to Visual Studio.
-
1:16
Notice how our environment has changed, the output panel has been replaced
-
1:20
with the Autos and Call Stack panels, both of which are used for debugging.
-
1:25
Over here on the right, the Properties panel has been hidden and
-
1:29
we now have a Diagnostic Tools panel being displayed.
-
1:32
We're not gonna use the Diagnostic Tools during this workshop, so we can safely
-
1:36
collapse that panel by clicking the pin here in the right-hand corner.
-
1:41
There, to stop our application, click the stop button.
-
1:46
Our website has stopped running and
-
1:48
our environment returns back to what it was before.
-
1:51
Wasn't that fun?
-
1:52
I always enjoy seeing my websites running in a browser for the first time.
-
1:58
Whenever you start new website projects, it's helpful to get something up and
-
2:02
running as quickly as possible before you start making any other changes.
-
2:07
The process of making a small change or set a small changes then running your
-
2:11
website or application to review and test those changes, forms the basis
-
2:16
of what developers like to call iterative or incremental development.
-
2:22
Doing development in this way,
-
2:23
makes it easier to determine the source of a problem when something goes wrong.
-
2:28
Throughout your career as a developer, you'll literally do thousands and
-
2:32
thousands of iterations.
-
2:34
For our next iteration,
-
2:35
let's take a closer look at the folder structure of our project.
You need to sign up for Treehouse in order to download course files.
Sign up