web developer tools
DESCRIPTION
This session talks about the in-browser tools and the other available tools that would help the web developers do their job more perfectly.TRANSCRIPT
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