An Introduction To

Web Developer Tools

Presentation By :Ashutosh MahtoMindfire Solutions

Points to be discussed

1. Need of in-browser tools in modern web development2. Introduction to available tools in different browsers3. HTML inspection4. Element style inspection and manipulations5. Javascript Console6. Javascript Debugging7. Resources and Cookie inspection over network

Need for developer tools

Difficulty arises when we have -Difference in browsersDifference in versionsDifference in Platforms and Devices

While going live there needs a tool that can perform remote debugging

Also

IntroductionFirebug -

Add-on to Firefox Very much user friendlyCan be downloaded and installed from : getfirebug.com

Webkit Dev Tools -Included in webkit browsers – Chrome and Safari

IE Dev Tools -Included in Internet Explorer, version 8 onwards

Basic FunctionalityEach of these tools include these functionality : - HTML Inspection

- Style inspection

- Resource monitoring

- Network Inspection

- Console commands

All of these tools consist of same functionality but different interface.

Webkit DevTools

IE DevTools

Firebug

HTML Inspection- View updated HTML source at run-time- Edit HTML source- Check inline styles and attributes- HTML tab in Firefox & IE, Elements tab in Webkit Browsers

It can be effectively used to check effects of dimension and applied styles on an element to the others.

Style InspectionWe can analyze the following -

- Layout of element, and its dimension (margin, padding etc.)- Inherited styles and the source from where those are inherited- Edit the styles at run-time and analyze the effects- Check all the downloaded css files and check the source

CSS tab in IE & Firefox, Sources tab in Webkit browsers

Javascript Console

Almost all modern browsers come with in-built Javascript ConsoleUsing console we can-

- observe the syntax errors and run-time exceptions- use console commands and perform js checks & logging- write & execute javascript for some debugging purpose

It can be effectively used to log run-time exceptions and logging the javascript objects to check the member values.

Javascript DebuggingEach of these tools allows to debug javascript at run-timeOptions available in these tools -

To add breakpoints and stop execution at the breakpointsStep Into, Step Over & Step Out for debuggingWatch panel to watch the runtime valueStack Panel to observe the call stack

Resource InspectionWe can analyze the following -

- Check the cookie values and edit the values- Downloaded resources from server- Downloaded source files

We can check properties & dependency of cookies and what are the effects making changes to cookies.

Network InspectionWe can analyze the following -

- Network calls to server and the parameters, headers, response format, body etc sent/recieved with the call

- Request and response of each network call- Time consumed by the network call- Downloaded resources during the network call

We can effectively use it to check the performance and response from server during asynchronous calls

ConclusionUsing these tools may help to -

- reduce the development time in cross browser web development.- reduce the cross browser issues- get the root of problems with rendered page in live with ease

Although we are very much antiquated with firebug we can explore others and use all available tools to minimize the chance of cross browser issues.

Referenceshttp://getfirebug.com/faq/https://developers.google.com/chrome-developer-tools/http://alistapart.com/article/advanced-debugging-with-javascripthttp://paulrouget.com/e/devtoolsnext/http://msdn.microsoft.com/en-us/library/hh772704(v=vs.85).aspx