So, Who Am I?

Adam Costenbader

Adam Costenbader

I am a software consultant working primarily with web applications and .NET technologies. I grew up in North Carolina, on the Outer Banks, and moved to the Mid-west, Minnesota, where I met my wife. We landed here in Lincoln where I started my career in Software Development.

I'm a husband, dad, developer, public speaker, musician, and a wannabe tinkerer.

Alright, Why Are We Here?

Chasing down bugs as a web applications developer can be a major _______ {Insert expletive of your choosing here} pain.

The good news? We're not the only ones who feel this way. Luckily the developers of our modern browsers also feel that figuring out web bugs is a pretty important deal and can be a major pain. Because of this they've developed developer tools.

My Theory?

Developers are whiners. Okay, okay. We just really like to be able solve the problems.

Then How DO We Solve These Problems?

I'm glad you asked.


NOTE:This page is meant to be renderened in your desktop Chrome browser. Those visiting this site on the mobile phone or non-Chrome browser will likely encounter some funky things.
Press F12

Elements Tab

If your work is working mostly with the elements that are on the web page, buttons, images, paragraphs, then you'll come to love the Elements panel in the developer tools. For isntance, take the buttons below, try right-clicking one and tehn selecting "Inspect Element." If the developer tools are not open they will open and take you to the Elements panel with the button element, you selected, hightlighted. From here you'll be able to see all the details of the element, the button, you'll notice it has the classes "col-md-1 btn btn-default" and the only text is " " or and empty space. If you double-click on the classes you'll be able to edit it but you can also right-click on them for the options available to you.

Also, if you select the button element and press the "Delete" button you'll be able to remove the element from the DOM. There's so much more that you can do, this is just a drop in the bucket. Go ahead, spend a little time playing with the Elements panel and see what you can come up with.

 
 
 
 
 
 
 
 
 
 
 
 
 
 

Network Tab

I'll pose a scenario; You have your site up and running but there is crucial information that isn't immediatly showing when the page loads. There are a few things that could maybe be the problem, perhaps an optimization issue with the JavaScript but you have a sneakin suspicion that it's the API taking too long to deliver the information. The question you have is "How do I proove that it's the API?"

This is where the Network panel comes into play. With the network panel open make sure that it's recording by looking in to top left, there should be a circle, if it's red it is recording, if it's grey it is not recording. Now, if it is grey, and not recording, click the circle in the top left so that it's red then reload the page, hit F5 or click the reload button.

Once the page has started to refresh you should start to see items showing up in a list on the page. These items represent everything that is the page you're looking at and the calls for information that it might be making. If you click on an item you'll see a new pane open in this panel. This pane will have panes for "Headers", "Preview", "Response", "Cookies", and "Timing." I find that I most often use the "Preview" tab. From this tab you'll be able view the detailed information for the element you clicked. If it's an image you'll see an image preview and the file's details. If it's a call for data, via AJAX, you'll see the response data/object and it's details/properties.

There's so much data, though. Is there an easier way to find what I need? Yes, luckily, there is. In the top left, near the recording button, there is another icon, shapped like a funnel. If you click on this funnel a bar will fold down. From this bar you can choose from pre-configured options like "Documents", "Stylesheets", "Images", "XHR", and several more. Clicking on the "XHR" button will limit the results to only to data requested over AJAX. Another way to get the data we need, for this page, is by using the search bar. We know that the data that we are using on this page is from the site "www.randomtext.me" and if we put this URL in the search bar it will limit the results to those items.

Now that we have this item we can see where it is loading in the scope of the page load. This also shows us that the page is loaded before the call for this data is made so it looks like the culprit is in our JavaScript call for the data. So how could we fix that? Let's continue and we'll learn how.

Our fancy crucial page information

 

Sources Tab

So we have a problem with our JavaScript. Alright, how do we debug it? Enter the panel I live most often on, the "Sources" panel. I use this panel in conjunction with the "Console" panel most often but we'll get to that panel soon.

Below we have a simple example of a broken feature on the page. If we click the button "+ Count" we should see the count in the "The current count is: {count}" increment by one (1) but, alas, it does nothing. Go ahead, click it.

So, let's fix it. Click on the "Sources" tab to open up the "Sources" panel. Now, we're going to cheat, I know where the problem is so I'm going to lead you to teh file with the problem. We could use the "Elements" panel to see how the button is wired up but we've already played around there. Stop now if you want to challenge yourself to find the file without my help and head on over to the elements panel and dig in.

Since, we am to be modular the problem is in it's own JavaScript file called "sourcesTeaching.js" now, let's find the file. In the left pane, with the "Sources" tab, in this pane selected. (I know Sources'ception) Since the URL is being maksed we'll want to look for the actual URL of the site which is in Azure at chromedev.azurewebsites.net. Fin this URL in the left pane and expand it. I like to try to keep my script files in at least a semi-organized fashion so once you've expended the site URL then expand "Scripts", and then expand "site" (chromedev.azurewebsites.net -> Scripts -> site). The file, with the broken JavaScript, is named "sourcesTeaching.js". I know, #relevant. If we click on this file it will open up in the main pane.

From looking at the file we can see that there's a problem with our jQuery selector that is silently breaking. To fix the problem click on line #5 and erase the "//" and then click on line #6, before $("#counter")... and type "//" to comment outthe code. When you've done this press "CTRL + S", this will save the edits to the browser. Now go back to the page and click the "+ Count" button again. This time you should see the count go up. Depending on how many times you clicked the button earlier you should see counter display "The current count is: 2 (+ however many times you clicked the button earlier)."

Job well done. We solved the problem and now we know which file needs to be updated in our source code and we've proven that it works.

The current count is: 0


 
 

Resources Tab

Sometimes the problem is in the data that being "remembered", or saved, on the clients computer. How do we work with this data? Easy, the "Resources" tab/panel.

To emulate adding some data to the client's sytem click the "Save Some Stuff" button below.



Now this button just save a cookie, saved data to local storage, session storage, and created a Web SQL Database and table. The Web SQL data is for view only but let's go ahead and take a look at what's in there. Expand the "Web SQL" node and then expand the "TestDatabase." From here we see the table in the database called "foo." If you click on "foo" you'll see one row of data with "rowId", "id", and "text." Now let's move on to our Local Storage, expand it and click on the site's URL. Now you can see the Local Storage data for the site and you should see the key of "teaching" and the value of "{"time":"2015-03-21T04:40:28.433Z","title":"Local Storage","Number":3}." If you click on the data you'll be able to update the key, and the value. If you press "Delete" with the row highlighted you'll be able to delete the data.

Go ahead an play with the other areas and see what data you can find, update, and delete. Also, you might be interested in seeing what other sites are putting on your system with cookies and local storage. Go ahead, play.

 
 

Emulation

Emulation helps you test as if you were browsing on a handheld device. To enable emulation click the button that looks like a phone in the top left of the deverloper tools window, to the right of the magnifying glass for search. You'll know when emulation is enabled as you'll see rulers showing up on the left and top of the web page window and you'll see a ribbon of input elements at the top of the page.

To test how your site shapes up with responsive design click the drop down labeled "Device" and select the device of your choosing. Once you've done this you'll see the view resize to match the pixel resolution of the device you selected. You'll notice that the bottom and right bars have a triple dash icon. You can click and drag on this icon to resize the page as you'd like. Go ahead and play around wit it but I have to admit this page doesn't scale well.

So what's on the other side? What's all this stuff about "Network?" Well I'm glad you asked because it's kind of neat. One of the slyest bugs that I've ever run into was a visual bug, where an element was being loaded above an input element afte that input element was loaded. This caused the input elment to shift downward, and often when the user was trying to interact with it. This drove them nuts. Well, the problem was that localhost ran so fast that we never saw the shift happening. If we can't reproduce the bug then it doesn't exist right? So how do we test for a slower connection? The "Network" drop down is going to be our best friend for this.

NOTE: We're going to reload the page soon. If you lose your place on the page use the navigation bar on the right to quickly return here by clicking "Emulation"

Click on the drop down for "Network" and pick "Regular 3G" once you have this select refresh the page, F5 it. At this point it should be evident that the connection is much slower. In this area I have added an element to show the URL of this page but to show it programmatically once the page has fully loaded but I also added this to the top of the page in case your reload takes you back to the top of the page. At this point you'll see elements on the page slowly loading and once everything has completely loaded you'll see the URL show up. If you put it back to "No Throttling" you should see the URL almost immediatly.

 

Console Tab

So excited... So excited again...

If you haven't guessed it the "Console" panel is my favorite one to use. For real. It's awesome.

I work a lot with JavaScript and if you can say the same then I can tell you that the Console panel can save you butt, especially in conjunction with the Sources panel. I wrote a module to help show what you can do with console but there is so, so much more as well so don't stop here.

In the console panel click on the white space and type ConsoleTest.Writer(10); and hit enter. From here you should see some new output. This is an example of the logging features provided with the Console API, see references for links to more information. There are more console tests in the javascript and I encourage you to use the Sources pane to find the others. I'll give hints, look for testing and counting.

Another awesome feature of the Console is to be able to quickly see the "innerds" of a JavaScript funtion and best yet is it's dead simple. Let's try again with the same function we ran above by ConsoleTest.Writer except this time we won't but in (10); we'll just hit enter at this time. When you leave off the parameters and paranthesis () the console will do it's best to find the code we need. You will likely find that this does not always work. For instance with scripts from the browser itself you won't be able to see the code. Let's try that out. In the Console type console.log and hit enter. You'll see function log() { [native code] } as a response which isn't very helpful but let's you know that it's native to the browser.

Pro Tip: You can use the console panel while on any other panel. To do this press "ESC" key. You should see a new panel open on the bottom of the developer tools with about four tabs "Console", "Search", "Emulation", and "Rendering." If you click the "Console" tab you'll be able to use console commands while on other tabs. As I mentioned earlier the Console and the Sources tab work hand in hand. Go ahead play around.

 
Fill Murray

If you attended my session, thanks for coming!

If you missed it but ended up here anyways, thanks for your interest!

I enjoy working with fellow developers and I strongly believe that we learn so much by teaching. So thank you for the opportunity to help me grow in my skills!

If you did attend my session please go ahead and fill a session evaluation. I'd love to know what I did well, what I could do better and any tips that you might have for me to improve on those areas.