- Debugging Web
- WebKit: Open Source project which powers Chrome,Safari and Firefox
- Firefox has 3D view, which is helpful in debugging layout problems.
- Firefox addon's for developers: Firebug and Web Developer
- Debugging JavaScript (With Firebug)
- Scripts tab doesn't show JavaScript files which have errors in them. Compilation errors are shown in console window.
- Conditional Breakpoints could be set.
- 'Stop On All Errors'. This option needs to be set, so that Firebug stops on an JavaScript error and shows it in Console.
- Firebug has built in Performance Profiler.
- Debugging CSS (With Firebug)
- Images and color codes could be previewed by moving cursor on it.
- Live Edit: Enables to edit CSS and see its impact.
- Style panel in HTML Tab. Style Panel has drop down which has a value of ":hover". If this is selected then, Styles panel shows styles applied when mouse hovers over selected element.
- Debugging Network (With Firebug)
- Firebug Net tab shows (At the bottom)
* Number of HTTP requests sent by browser to load current Page.
* Size (in KB or MB) of data received. ( Also amount of data fetched from Cache).
* Time taken to Load entire Page (Also time taken to fire Load event).
- Firebug Net tab shows all the resources downloaded. If an resource is image then hovering over corresponding record will show snapshot of image.
- Firebug Net tab enables user to Disable browser cache.
- Firebug XHR Tab is useful for Testing API calls made by JavaScript. Clicking on a record, shows value returned by that call. One useful feature here is that user can resend the request.
- Firebug Net Tab has Timeline column. The blue vertical line here shows when DOMContentLoaded event (DOM of the Page is loaded) was fired and Red line shows when Load event (Page is loaded. Browser will attempt to show page) was fired.
- console.timestamp(): This will add a new line to Time stamp column.
- What is Fiddler? Advanced HTTP Debugger.
* Serves as Network Proxy to watch network traffic.
* Shows detailed network request information.
* Allows copying and construction of HTTP requests.
- Fiddler allows to create a HTTP request (Which is not possible to do from Browsers). Thus a API call could be tested, even before actual client for the API is written.