Web Developer Tools
0 likes816 views
The presentation by Ashutosh Mahto discusses the need for and functionalities of in-browser developer tools in modern web development, including tools available in various browsers like Firebug, WebKit DevTools, and IE DevTools. It covers aspects such as HTML and style inspection, JavaScript console usage and debugging, as well as resource and network inspection. Utilizing these tools can significantly reduce development time, address cross-browser issues, and facilitate root cause analysis during live page rendering.
Web Developer Tools
- 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.