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