• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Web Developer Tools
 

Web Developer Tools

on

  • 409 views

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

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

Statistics

Views

Total Views
409
Views on SlideShare
409
Embed Views
0

Actions

Likes
0
Downloads
1
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Web Developer Tools Web Developer Tools Presentation Transcript

    • An Introduction To Web Developer Tools Presentation By : Ashutosh Mahto Mindfire Solutions
    • 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
    • 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
    • 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
    • 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.
    • 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 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
    • 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.
    • 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
    • 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.
    • 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
    • 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.
    • 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