Developers tools for web development

Following questions in StackOverflow I learned a lot of people don't know how to debug problems while developing a site. 
This page explains how to do just that. 

You can use almost every browser you want ( even on the IPad there are some developer tools )  - but I am going to show you how to use chrome's developer tools as they are most extensive and friendly. 


Opening the Developer Tools 


most browsers support the F12 for opening the developers tools so this is always your best chance. Chrome also supports "ctrl+shift+j" - which I use more often.  
I will use my site steps.mograbi.info and my blog at blog.mograbi.info for demonstrations.

When I click ctrl+shift+j I get the following picture


You can see a new panel opening in Chrome, with the following tabs : 
  • Elements - allows you to inspect the HTML, edit it and see it modified online. 
    • On the right hand you can see the CSS panel.  
    • You can modify CSS and HTML from these panels - applied live on page. 
    • Use the magnifying glass on the bottom left, and hover on the HTML for easy navigation. 
  • Resources - allows you to see cookies, storage, frames and more. 
  • Network - probably the most useful tab for debugging Ajax requests - shows all HTTP calls from your page. 
  • Sources - used for navigating static resources such as CSS files and JS files. 
    • Using this tab you can insert break points to debug JS. 
  • Timeline, Profiles, Audits - are all excellent monitoring tools for improving your page performance. 
  • Console - this is the JS console. Here you will see all logs printed with "console.log"

Find a missing resource

Simply reload the page with the "Network" tab opened. 
Every 404 response is colored red with the URL specified next to it.  
Clicking on the line shows you the headers send ( really good for POST body and form arguments ). 
You can also see the response preview or source. This is extremely good for Ajax calls where you have to see what you are getting back from the server. 






Debugging JavaScript

Debugging JavaScript is probably the easiest thing on the planet but a lot of people just don't know how to tackle this issue. 
There are 4 things you can do while debugging JS. 

  1. Simply place debugger; in your JS code. If the "Developers Tools" is open chrome will open a debugger view starting at that line
    1. If Chrome didn't stop there, it's probably because the code is not running at all. To make sure - you can add an "alert('hello!')
  2. Use console.log("data here") a lot. Chrome makes it really easy to inspect JSON objects that were logged to console. The proper way to log a lot of data in a single line with Chrome is to use an array. For example - console.log([ "posting ajax request" , ajaxOptions ] ); will log the string followed by the entire object that you can inspect in the console. 
    1. The console also shows errors with a link directly to the code. You can click it and quickly find the problematic code line. 
  3. An alternative to write "debugger;" in your code is to use the sources tab to find a JS file  
  4. The best for last - you can use the Chrome's developer tools' console to write new JS code in your page. If you want to experiment with some JavaScript code without modifying your source, simply pop up the console and start typing. 
    This method is very useful if you want to evaluate variables on the page. For example - to see if jquery is defined simply type "$" and press enter. 
Something I like to do a lot, is create Ajax request from the Chrome Developer Tools console. I simply press "ctrl+shift+j" and start typing something like 

$.ajax( { type : 'POST', url : '/somewhere' , data : { key1 : 'value1 }, ... } )

You won't believe what a time saver it is.


Comments