This session talks about the in-browser tools and the other available tools that would help the web developers do their job more perfectly.

1. An Introduction
To
Web Developer Tools
Presentation By :
Ashutosh Mahto
Mindfire Solutions

2. Points to be discussed
1. Need of in-browser tools in modern web development
2. Introduction to available tools in different browsers
3. HTML inspection
4. Element style inspection and manipulations
5. Javascript Console
6. Javascript Debugging
7. Resources and Cookie inspection over network

3. Need for developer tools
Difficulty arises when we have -
Difference in browsers
Difference in versions
Difference in Platforms and Devices
Also
While going live there needs a tool that can
perform remote debugging

4. Introduction
Firebug Add-on to Firefox
Very much user friendly
Can 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

5. Basic Functionality
Each of these tools include these functionality :
- HTML Inspection
- Style inspection
Webkit DevTools
IE DevTools
- Resource monitoring
- Network Inspection
Firebug
- Console commands
All of these tools consist of same functionality but different
interface.

6. 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.

7. Style Inspection
We 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

8. Javascript Console
Almost all modern browsers come with in-built Javascript Console
Using 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.

9. Javascript Debugging
Each of these tools allows to debug javascript at run-time
Options available in these tools To add breakpoints and stop execution at the breakpoints
Step Into, Step Over & Step Out for debugging
Watch panel to watch the runtime value
Stack Panel to observe the call stack

10. Resource Inspection
We 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.

11. Network Inspection
We 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

12. Conclusion
Using 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.

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