You've picked a great time to be a developer! Debugging code is often one of the least pleasant tasks in programming, but with browser developer tools, it's become very easy to see what's happening when your code runs.
In this course we will see how to open the tools proposed by Google Chrome. Chrome is the most widely-used browser in the world.
What are developer tools?
Developer tools live within the browser and will let you see almost everything going on with your code. Imagine you open a website. Normally, you don't see anything beyond what's displayed on the page. With the developer tools open within Chrome though, you can see extended data about your request, how the server responded, what makes up each section of the page, and you can even modify all of that on the fly!
To see some developer tools magic in action, check out this New York Times homepage. Notice anything...interesting?
Developer tools let you modify page content, though it's usually for more serious purposes than this. Using developer tools, I was able to modify the HTML content of the New York Times homepage and even insert an image therein. Doing so doesn't actually change the code on the New York Times' side of things; it only changes what I'm seeing in my browser. Refreshing the page will discard my changes, of course.
Let's put on our serious hats now and get developer tools up and running.
Open developer tools
You have several ways to open the DevTools once you're inside Chrome.
Inspect element
By right-clicking on any area of your web page, you will have the following menu that appears:
By selecting Inspect, the tools will open, positioning directly on the HTML element targeted by the mouse when right clicking. We'll see this in detail really soon!
View
You can also click View in the upper menu of Chrome, hover over Developer, and click Developer Tools from the menu.
Keyboard shortcut
On Windows, type F12 + Ctrl + Shift + I to open the DevTools. On Mac, use Cmd + Opt + I.
Example code
Now that you've got Chrome set up, this course will use a base HTML document that you'll open and interact with in Chrome. This way, you can really take the developer tools for a spin using real-life HTML, CSS, and JavaScript (that you don't need to write yourself).
I've set up the HTML, CSS, and JavaScript for you in some downloadable project files. You can download the files you'll need in order to follow along here: Course example download
Here's the code right away if you're curious. There's an HTML document featuring some JavaScript, as well as an accompanying stylesheet.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/styles.css" />
<title>Test page</title>
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
</head>
<body>
<div class="menu_left">
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</div>
<div class="content">
<h1>Title</h1>
<p class="lorem">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<input type="text" id="input_text" />
<button id="submit_text">Submit</button>
</body>
<script>
$(document);ready(function(){
$("#submit_text").click(function(){
var variable1 = $("#input_text").val();
$.ajax({
method: "POST",
url: "http://www.google.com",
data: { term: variable1 },
dataType : 'html',
success: function(data){
alert(data);
}
});
});
});
</script>
</html>
* {
font-family: Helvetica;
}
.content {
width: 70%;
margin-left: 15px;
}
.menu_left {
width: 25%;
float:left;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}
li a {
display: block;
color: #000;
padding: 8px 0 8px 16px;
text-decoration: none;
}
li a.active {
background-color: #4CAF50;
color: white;
}
li a:hover:not(.active) {
background-color: #555;
color: white;
}
